Angular2 - 如何鏈接異步http請求並在失敗時停止

Question

我有一個HTTP請求數組，我需要以某種順序觸發，但如果前一個請求失敗，那么以下任何一個都不會被執行。

1. 我怎樣才能做到這一點？

2. 什么是最好的方法？

我需要這樣的東西：

  let failed: boolean = false;
  payloadArray.forEach(payload => {
     if (!failed) {
     http.post(this.url, payload, this.options)
     .map((res: Response) => {
        return res.json;
      })
    .catch((error: any) => {
          failed = true;
          Observable.throw(error.json().error || 'Server error')
       });
     }
  }

Answer 1

這將需要一個Observable創建者合並發出的值，但只在每次完成后按順序訂閱。 我不認為RxJs庫中有類似的東西。

我寫了一個工廠方法，我認為會產生你想要的東西：

public sequence(requests: Array<Observable<Response>>): Observable<Response[]> {
    return Observable.create((observer) => {
        const output = [];

        function executeHttp() {
            const request = requests.pop();
            if (request) {
                request.take(1).subscribe((value) => {
                    output.push(value);
                    executeHttp();
                }, (ex) => {
                    observer.error(ex);
                });
            } else {
                observer.next(output);
                observer.complete();
            }
        }

        executeHttp();
    });
}

請注意，我在HTTP observables中添加了一個take(1)運算符。 這樣做是為了讓HTTP observable在產生響應后被銷毀。 這樣您就不必打電話取消訂閱。 你可以使用take(1)或first()做同樣的事情，但是當沒有任何東西發出時它們的工作方式不同。

如果你發現運營商做你想做的事。 請告訴我。

Answer 2

如果要發送多個HTTP請求，請使用ForkJoin 。 至於你的問題，Http模塊處理響應中的成功和錯誤

let failed: boolean = false;
let sampleArr = [];

payloadArray.forEach(payload => {
    if (!failed) {
        sampleArr.push(this.http.post(this.url, payload, this.options))
    }
})

Observable.forkJoin(sampleArr).subscribe(
    (data) => this.data = data, 
    (err) => Observable.throw(err.json().error || 'Server error')

);