前端之家收集整理的这篇文章主要介绍了
angular – 在rxjs中执行高级http请求，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
502_0@
我有以下对象：
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将有一个问题对象,与之相关的答案,以及可能的选项,具体取决于类型问题,即：选择,无线电,多个等.
因此,您需要
调用第一个请求并等待其响应,然后同时
调用另外两个请求(对于选项和答案).
由于我想知道两个响应何时准备就绪,我将使用Observable.forkJoin()运算符,它们在完成时发出包含源Observables的所有值的单个数组,然后将数据添加到我将在订阅时传递给Observer的qoa变量.
像concat()或concatMap()这样的运算符可以按顺序进行多个HTTP调用,但是当你需要创建多个Observable来构造一个你要发出的大响应时(在你的情况下是QuestionOptionsAnswer),它们不是很有用.
我还使用Observable.of(…)来模拟HTTP请求.我不知道你的用法是什么,所以你可能不会使用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));
打印到控制台：
QuestionOptionsAnswer {
question: Question { idQuestion: '1' },answer: Answer { idAnswer: '1',answer: 'bla' },options: [ Option { idOption: '1',option: 'ble' } ] }
