Angular 9中在forEach循环内处理HTTP请求错误，仅获取成功响应

我来帮你搞定这个问题！首先得指出你当前代码里的两个关键问题：

1. HTTP请求根本没执行：Angular的HttpClient返回的是冷Observable，必须调用.subscribe()才会真正发起请求，你之前的代码里只创建了Observable但没订阅，所以控制台啥输出都没有。
2. 错误处理会抛出错误并干扰结果收集：你的handleError最后返回了throwError()，这会让失败的请求向外抛出错误，不仅会打印404日志，还会导致这个请求的Observable终止，无法被正常过滤。

解决方案步骤 #

1. 修改错误处理逻辑，静默忽略失败请求

把handleError改成遇到错误时返回一个空的Observable（EMPTY），这样失败的请求不会输出错误日志，也不会向下传递错误，相当于直接被过滤掉：

import { EMPTY } from 'rxjs';

private handleError(error: HttpErrorResponse) {
  // 如果你不需要记录错误，可以完全去掉这里的console.error
  // 要是想自己后台记录但不显示给用户，也可以保留但注释掉前端日志输出
  // if (error.error instanceof ErrorEvent) {
  //   console.error('An error occurred:', error.error.message);
  // } else {
  //   console.error(
  //     `Backend returned code ${error.status}, ` +
  //     `body was: ${error.error}`);
  // }
  
  // 返回空Observable，静默忽略错误
  return EMPTY;
}

2. 用RxJS操作符批量处理请求并订阅

推荐用from把数组转成Observable，再配合mergeMap发起请求，最后订阅来触发所有请求并收集有效结果。这样代码更优雅，也能确保每个请求都被执行：

import { from, mergeMap, tap } from 'rxjs';

// ...

// 把langs数组转成Observable，逐个处理每个语言项
from(langs).pipe(
  // 为每个语言项发起HTTP请求，mergeMap支持并发执行（想顺序执行就用concatMap）
  mergeMap(lang => 
    this.http.get(`assets/i18n/${lang}.json`).pipe(
      tap(data => console.log('server data:', data)),
      catchError(this.handleError.bind(this)) // 绑定this确保handleError能正常访问类成员
    )
  )
).subscribe({
  next: (validData) => {
    // 这里处理每个成功返回的有效数据结构
    console.log('获取到有效数据:', validData);
    // 你可以把validData存入数组或其他变量中
  },
  complete: () => {
    console.log('所有请求处理完毕');
  }
});

额外说明 #

• 如果你需要等待所有请求完成后一次性获取所有有效结果，可以把mergeMap换成concatMap，再加上toArray()操作符：

  from(langs).pipe(
    concatMap(lang => 
      this.http.get(`assets/i18n/${lang}.json`).pipe(
        catchError(this.handleError.bind(this))
      )
    ),
    toArray() // 把所有成功结果收集成一个数组
  ).subscribe(allValidData => {
    console.log('所有有效数据集合:', allValidData);
  });
  

• 一定要绑定this：在catchError里用this.handleError.bind(this)，确保handleError函数能正确访问类中的成员（如果有的话）。

内容的提问来源于stack exchange，提问作者Memmo