rxjsで高度なHTTPリクエストを実行

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すなわちに応じて、質問オブジェクト、それに関連付けられた答えは、その可能なオプションがあります：選択して、ラジオ、複数など

Answer 1

だから、最初の要求を呼び出し、待つ必要がありますその応答をしてから、2つの他の要求（オプションと答え）を同時に呼び出します。

両方の応答がいつ準備されているかを知りたいので、完了したときにソースObservablesのすべての値を含む単一の配列を放射するObservable.forkJoin()演算子を使用して、​​変数にデータを追加します購読するときに観察する。

オペレーターなどconcat()やconcatMap()あなたが（あなたのケースでQuestionOptionsAnswer）を放出したい一つの大きな応答を構築するために、複数の観測を作成する必要がある場合に非常に有用ではないために、複数のHTTP呼び出しを行うためには良いですが。

また、Observable.of(...)を使用してHTTPリクエストをシミュレートしました。

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' } ] }