角2 - チェーンWebサービスコール

Question

私はいくつかのWebサービスコールを連続して作成しようとしていますが、問題は、最初の呼び出しで.subscribeが実行される前に2回目の呼び出しが行われることです。 this.saveValueは2番目のWebサービス呼び出しのJSONで渡されるため、this.saveValueを設定するにはサブスクライブが必要です。

このコードで現在起こっていることは、最初の呼び出しが行われ、次に2番目の呼び出しが行われ、その後にsaveValueが設定されることです。助けのための

Component.ts

busy: Subscription; 
saveValue: string; 

submitButton_Click():void{ 
    try{ 
     // First Web Service Call 
     this.busy = this.service.firstMethod(this.object) 
      .first() 
      .subscribe(result => { 
       if(result.length > 0){ 
        this.saveValue= result; // VALUE SET FOR USE OF NEXT WEB SERVICE CALL 
        console.log('Worked'); 
       } 
       else{ 
        console.log('Failed'); 
       }  
      }) 



     for(let current of this.array){ 
      let temp= new Object(); 
      temp.id = this.saveValue; 

      // Second Web Service Call 
      this.busy = this.service.secondMethod(temp) 
       .first() 
       .subscribe(result => { 
        if(result.valueOf() != false){ 
         console.log('Worked'); 
        } 
        else{ 
         console.log('Failed'); 
        }   
       }) 
     } 

Service.ts

// First Method 
public firstMethod(object: Object): Observable<string>{ 
    return this.client.post<Result>(URL + '/add', object, new Result(), this.token.id) 
     .map(result => { 
      let temp = new Object().deserialize(result.data); 
      return temp.id; 
     }, this) 
     .catch(this.handleError); 
} // This works and returns proper value 

// Second Method (Needs this.saveValue as part of the passed object) 
public secondMethod(object: Object): Observable<boolean> { 
    return this.client.post<Result>(OTHERURL + '/add', object, new Result(), this.token.id) 
     .map(result => result.success, this) 
     .catch(this.handleError); 
} 

ありがとう！

Answer 1

はい、最初の処理が完了するまで待つ必要があるためです。非同期呼び出しを行うたびに、コードの次のビットがうまく実行されます。それを試してみてください：

this.busy = this.service.firstMethod(this.object) 
      .first() 
      .subscribe(result => { 
       if(result.length > 0){ 
        this.saveValue= result; // VALUE SET FOR USE OF NEXT WEB SERVICE CALL 
        console.log('Worked'); 

      for(let current of this.array){ 
      let temp= new Object(); 
      temp.id = this.saveValue; 

      // Second Web Service Call 
      this.busy = this.service.secondMethod(temp) 
       .first() 
       .subscribe(result => { 
        if(result.valueOf() != false){ 
         console.log('Worked'); 
        } 
        else{ 
         console.log('Failed'); 
        }   
       }) 
     } 
       } 
       else{ 
        console.log('Failed'); 
       }  
      }) 

申し訳ありませんが、書式のごみ。私はWebStormを手軽に持っておらず、私はそれがなければ怠惰だ:-)

Answer 2

Observable.flatMapオペレータを使ってHTTPリクエストをチェインすることができます。

this.service.firstMethod(this.object) 
    .flatMap(firstMethodResult => this.service.secondMethod(firstMethodResult)) 
    .subscribe(secondMethodResult => { 
      console.log(secondMethodResult); 
    }); 

あなたが望む多くの相互依存的要求などのチェーンをすることができますこの方法を：私たちは2番目の要求は、最初の1の結果に依存する2つの要求をしたいと言います。

（何らかの理由で）あなただけsubscribeメソッドを使用する場合は、2番目の要求は最初の要求のsubscribeコールバック内で行われる必要がある：

this.service.firstMethod(this.object) 
    .subscribe(firstMethodResult => { 
     this.service.secondMethod(firstMethodResult)) 
      .subscribe(secondMethodResult => { 
       console.log(secondMethodResult); 
      }); 
    }); 

はそれが助けを願って！