處理在 forEach 中出現錯誤的 http 調用 - Angular 9

Question

我正在編寫一段循環訪問數組並進行 HTTP 調用的代碼。
大多數這些 HTTP 調用都是針對不存在的資源進行的，但我不知道是哪些資源。
我目前正在使用這段代碼：

    langs.forEach(lang => {
      this.http.get('assets/i18n/' + lang + '.json')
        .pipe(
          tap(data => console.log('server data:', data)),
          catchError(this.handleError),
        );
    });

上面列出的這段代碼在控制台中沒有顯示任何內容，而實際上應該預期有幾個數據結構。
我沒想到的是錯誤消息，例如： GET http://localhost: 4205/assets/i18n/[...] 404 (Not Found) ，而只是成功調用的結果。
不知道怎么才能只得到好的數據結構，在一個周期內過濾錯誤。
提前致謝。

編輯：

this.handleError取自 angular 文檔：

private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message

    return throwError(
      'Something bad happened; please try again later.');
}

Answer 1

如果你需要在一個for循環中進行多次調用，我建議你使用ForkJoin rxjs操作符，除了更優雅之外，通過將所有調用一起進行也更高效。

const calls = [];
langs.forEach(lang => calls.push(this.http.get('assets/i18n/' + lang + '.json')));
Observable.forkJoin(calls).pipe(catchError(this.handleError)).subscribe(responses => {...});

Answer 2

我建議使用forkJoin並行運行多個 HTTP 請求。 如果您想處理單個請求的錯誤但仍為其他請求返回響應，您可以為每個單獨的請求添加錯誤處理。

服務.ts

getLanguages(): Observable<any[]> {
  const observables = langs.map(lang => {
    return this.http.get(`assets/i18n/${lang}.json`).pipe(
      catchError(() => of(null))
    );
  });

  return forkJoin(observables).pipe(
    // remove empty values from the array
    map(results => results.filter(x => !!x)),
  );
}

然后將服務注入到組件中並訂閱getLanguages()函數。

組件.ts

ngOnInit() {
  this.service.getLanguages().subscribe(responses => {
    console.log(responses); // [ {}, {}, {}, ... ]
  });
}