处理在 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); // [ {}, {}, {}, ... ]
  });
}