Question

我有以下对象：

class Question {
    idQuestion: string;
    question: string;
    typeQuestion: string;
}

class Answer {
    idAnswer: string;
    idQuestion: string;
    answer: string;
}

class Option {
    idOption: string;
    idQuestion: string;
    option;
}

我想填充以下对象：

class QuestionOptionsAnswer {
    question: Question;
    answer: Answer;
    options: Option[];
}

目前，我为每种对象提供服务，因此我们可以通过以下方式进行说明：

questionService.getQuestions();
answerService.getAnswers();
optionService.getOptions();

要填充我已执行嵌套请求的questionoptionsanswer对象：

questionService.getQuestions()
    .subscribe(
        answerService.getAnswers()
           .subscribe(
               optionService.getOptions()
                  .subscribe();
           )
    )

我可以正确填充questionoptionsanswer对象，但速度很慢，所以我觉得我做的很糟糕。拥有questionoptionsanswer背后的想法是使用angular2指令以简单的方式呈现html。

我读到flatMap，switchMap，forkJoin，但我不太清楚如何使用它们。

这可能是加载此数据的好方法吗？

questionoptionsanswer将有一个问题对象，与之相关的答案，以及可能的选项，具体取决于typeQuestion，即：select，radio，multiple等。

Answer 1

所以你需要调用第一个请求并等待它的响应，然后同时调用另外两个请求（选项和答案）。

由于我想知道两个响应何时准备就绪，我将使用Observable.forkJoin()运算符在完成后发出包含所有源Observable值的单个数组，然后将数据添加到qoa我订阅时只会传递给Observer的变量。

运算符concat()或concatMap()可以按顺序进行多个HTTP调用，但是当您需要创建多个Observable来构造一个要发出的大响应时，这些运算符不是很有用（{{1}在你的情况下）。

我还使用QuestionOptionsAnswer来模拟HTTP请求。我不知道你的用例是什么，所以你可能不会使用Observable.of(...)而是使用Observable.create()代替：

Subject

打印到控制台：

function getQOA() {
    return Observable.create(observer => {

        Observable.of({ question_id: '1' }).subscribe(response => {
            var qoa = new QuestionOptionsAnswer();
            let question = new Question();
            question.idQuestion = response.question_id;

            qoa.question = question;

            let obs1 = Observable.of({ answer_id: '1', answer: 'bla' });
            let obs2 = Observable.of([{ option_id: '1', option: 'ble' }]);

            Observable.forkJoin(obs1, obs2).subscribe(responses => {
                let [answerResponse, optionsResponse] = responses;

                let answer = new Answer();
                answer.idAnswer = answerResponse.answer_id;
                answer.answer = answerResponse.answer;
                qoa.answer = answer;

                qoa.options = optionsResponse.map(o => {
                    let option = new Option();
                    option.idOption = o.option_id;
                    option.option = o.option;
                    return option;
                });

                observer.next(qoa);
            });
        });
    });
}

getQOA().subscribe(qoa => console.log(qoa));

在rxjs中执行高级http请求

1 个答案: