Angular 2等待所有來自循環末端的http.put

Question

我有一個問題。在我的程序中，我需要更新服務器上的少量記錄，所以我需要在循環中執行此操作。畢竟我需要從服務器獲取新的信息。問題是我如何等待所有http.put響應201？

現在一些代碼： 我有內部業務的更新功能：

public updateDataonServer(rodz: string, id: number, bodyContent: any) { 
let body = JSON.stringify(bodyContent); 
let headers = new Headers({ 'Content-Type': 'application/json' }); 
this.currentUser.setHttpHeader(headers); 

let options = new RequestOptions({ headers: headers }); 

return this._http.put(serverAdress + '/rin/' + rodz + '/' + id, 
    body, 
    options).map(res => res.status).catch(this.handleError); 

}

我用它在這個函數：

changeShow(showId: number, oldShow: MpGruppedGroup[]) { 
    for (var show of oldShow) { 

     var paramsDict = { 
      'DAILY_PLAN_GROUP_ID': show.dailyPlanGroupId, 
      'DAILY_AIRINGS': show.dailyAirings, 
      'SHOW_ID': showId 
     }; 

     this.manager.updateDataonServer('MP_GROUPED', show.dailyPlanGroupId, paramsDict).subscribe((data: any) => { 
      console.log('status ', data); 
     }); 
    } 


    // that should be done after all updates return 201 status 
    this.getShowDayGroups(showId); 
} 

Answer 1

您可以使用async/await。首先標記updateDataonServer爲異步和更改HTTP如何調用如下：

public async updateDataonServer(rodz: string, id: number, bodyContent: any) : Promise<any> { 
let body = JSON.stringify(bodyContent); 
let headers = new Headers({ 'Content-Type': 'application/json' }); 
this.currentUser.setHttpHeader(headers); 

let options = new RequestOptions({ headers: headers }); 

const res = await this._http.put(serverAdress + '/rin/' + rodz + '/' + id, 
    body, 
    options).toPromise(); 
return res.status; 
} 

然後，獲得由then()

changeShow(showId: number, oldShow: MpGruppedGroup[]) { 
    for (var show of oldShow) { 

     var paramsDict = { 
      'DAILY_PLAN_GROUP_ID': show.dailyPlanGroupId, 
      'DAILY_AIRINGS': show.dailyAirings, 
      'SHOW_ID': showId 
     }; 

     this.manager.updateDataonServer('MP_GROUPED', show.dailyPlanGroupId, 
      paramsDict).then(data=> console.log('status ', data)); 


    } 


    // that should be done after all updates return 201 status 
    this.getShowDayGroups(showId); 
} 

回請參閱this並且如果你面對的問題與轉換HTTP觀察的承諾，請有看看這個answer

Answer 2

您可以使用RxJS達到你想要的東西：

//extracts the params needed for the put request, 
// and returns the result of http.put 
// it DOES NOT subscribe to the http.put 
updateSingleShowOnServer(show) { 
    .... 
    // use this function to encapsulate extracting the values from 
    // your 'show' object and constructing your http.put request 
} 

// accepts an array of 'shows' and 
// returns an observable that emits after every single put request 
// has returned a value 
updateMultipleShowsOnServer(shows) { 

    // convert your array of shows into an array of put requests to update shows 
    let requests$ = shows.map(show => this.updateSingleShowOnServer(show)); 

    // return an Observable that waits until each request in the requests array 
    // outputs a value before emitting a value. 
    // you are going to subscribe to the observable output from this method 
    return Observable.combineLatest(requests$); 
} 

我對你的方法名稱進行了一些屠殺感到抱歉，但我爲此更好地向你解釋了這些方法在做什麼。隨意在你的代碼中使用你自己的名字。

但是，使用這些方法，您changeShow變爲：

changeShow(showId: number, oldShow: MpGruppedGroup[]) { 

    // IMPORTANT - if any put request fails, this combined request will also fail, 
    // so you might want an error handler on your subscribe 
    updateMultipleShowsOnServer(oldShow).subscribe(results => { 

     // result is an array of the results of all put requests. 
     this.getShowDayGroups(showId);   
    }, errors => { 

     // Optional - do something if you got an error in one of the requests 
    }) 

} 

額外注

• 不要忘記導入Observable.combineLatest使用'進口「rxjs /添加/可觀察/ combineLatest'

• combineLatest將在這裏工作，因爲每個http請求obse可行只發​​射一次。但是，如果您有多次可觀察到的排放，zip可能是更好的運營商。 我傾向於贊成combineLatest，因爲它往往更普遍有用。您應該仔細閱讀這兩家運營商以瞭解差異。

• 如果第二點沒有意義，閱讀了關於RxJS整體多一點 - 這是一個強大的工具，在你的工具箱