Angular/rxJS：使用combineLatest时如何处理404错误

你可以通过给每个HTTP请求添加局部错误捕获逻辑，让返回404的请求输出一个空对象的Observable，而非直接抛出错误中断整个流程。这样combineLatest就会等待所有请求完成（无论成功还是404），最终只合并所有成功加载的翻译数据。

修改后的代码（匹配你提供的RxJS 5语法） #

public getTranslation(lang: string): Observable<any> { 
  return Observable.combineLatest(this.resources.map(config => {
    const url = /* 这里填入你的URL生成逻辑，比如根据config和lang拼接 */;
    return this.http.get(url)
      .catch(error => {
        // 只处理404错误，其他错误仍抛出以暴露问题
        if (error.status === 404) {
          return Observable.of({});
        }
        return Observable.throw(error);
      });
  })).map(response => {
    return response.reduce((a, b) => {
      return Object.assign(a, b);
    });
  });
}

关键改动说明 #

• 给每个this.http.get(url)请求添加了.catch()操作符，单独处理单请求的错误
• 检测到404状态码时，返回一个包含空对象的Observable，这样该请求不会触发整个combineLatest的失败
• 非404错误依然抛出，避免隐藏网络故障、服务器错误等非预期问题
• 最终reduce合并时，空对象会被自然忽略（Object.assign合并空对象不会改变原有数据），结果仅保留成功加载的翻译内容

如果你使用RxJS 6+（当前主流版本），语法调整如下 #

import { combineLatest, of, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

public getTranslation(lang: string): Observable<any> { 
  const requestObservables = this.resources.map(config => {
    const url = /* URL生成逻辑 */;
    return this.http.get(url).pipe(
      catchError(error => {
        if (error.status === 404) {
          return of({});
        }
        return throwError(() => error);
      })
    );
  });

  return combineLatest(requestObservables).pipe(
    map(responses => responses.reduce((acc, curr) => Object.assign(acc, curr), {}))
  );
}

这个方案的核心是将单个请求的404错误限制在局部处理，不向上传播中断整个合并流程，同时保留对其他异常的感知能力，避免排查问题时陷入盲区。

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