2016-09-23 87 views
1

我想在Angular 2應用程序中創建兩個連續的http請求,其中第一個ajax調用的結果用於後續一組ajax調用。我正在努力瞭解如何構建它。如何在Angular 2應用程序中使用RxJS實現ajax請求

這種安排的目的是後續的ajax調用獲取數據,用於將細節(新屬性)添加到第一個調用中獲取的對象集合中。

我意識到這是1 + N問題的ajax版本,但是我對設計的控制有限。

下面的僞代碼是(一個函數體)沿着我認爲我需要的線,但可能有一個更乾淨的方式。

let finalObservable = Observable.create<viewModel>(); 

var firstAjax = this._http.request(url1, options) 
    .map((rs)=>rs.json()); 

firstAjax.subscribe((d)=>{ 
    // d is an array of plain js objects 
    let secondAjax: Observable<any>[]; 
    d.each((item, index)=>{ 
    // roll item properties and index into url2s query string 
    secondAjax.push(_http.request(url2, options); 
    }); 
    // assumption is I can pass an array of observables into forkJoin 
    Observable.forkJoin(secondAjax) 
    .subscribe((allRs)=>{ 
     allRs.each((rs, index)=>{ 
     d[index].newProperty = rs.text() 
     }); 
     // give a value to the final observable 
     finalObservable.publish(d); 
    }); 
}); 

// Observable does not have a value yet, but will get one when the code 
// above runs. 
return finalObservable; 

不確定「.publish」。一旦我知道它是什麼的時候,我試圖給出一個可觀察的值,這比我創建可觀察值的時間晚了一段時間。

回答

1

的方式在RX鏈的請求是經由flatMap

下面是一個簡單的例子:

his.http.get('./customer.json').map((res: Response) => { 
       return res.json(); 
      }) 
      .flatMap((customer) => this.http.get(customer.contractUrl)).map((res: Response) => res.json()) 
      .subscribe(res => this.contract = res); 

下面是更詳細和演示,以及:http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

相關問題