Angular中HTTP请求404错误的Try Catch处理实现问询

你当前的try/catch无法捕获HTTP请求的404错误，核心原因是Angular HttpClient返回的是异步Observable，异步操作抛出的错误不会被同步的try/catch捕获，必须通过RxJS的错误处理机制来处理。

方案1：在subscribe中直接添加错误回调 #

这是最直接的处理方式，利用subscribe方法的第二个参数捕获HTTP错误：

loadMap(): void {
  const processId = /* 你的processId变量 */;
  this.mapReportConfigModel
    .getMapConfig()
    .subscribe(
      (configData) => {
        this.configData = configData;

        // 初始化地图
        mapboxgl!.accessToken = this.configData.accessToken;
        this.map = new mapboxgl.Map({
          container: this.configData.container,
          center: [this.configData.centerLat, this.configData.centerLng],
        });
       
        // 处理地图自身的错误逻辑
        this.map.on("error", (response) => {
          this.showError(
            "500",
            "mapReport.err_no_map_reports",
            "mapReport.err_generating_map_report_message"
          ).subscribe(() => {
            this.router.navigateByUrl("/dashboard");
          });
        });
      },
      (error) => {
        // 处理HTTP请求错误
        if (error.status === 404) {
          this.showError(
            "404",
            "mapReport.err_config_not_found",
            "mapReport.err_config_file_missing_message"
          ).subscribe(() => {
            this.router.navigateByUrl("/dashboard");
          });
        } else {
          // 处理其他HTTP错误类型
          this.showError(
            error.status.toString(),
            "mapReport.err_unknown",
            "mapReport.err_unknown_message"
          ).subscribe(() => {
            this.router.navigateByUrl("/dashboard");
          });
        }
      }
    )
    .add(() => {
      // 无论请求成功或失败，都隐藏加载动画
      this.loadingService.hide(processId);
    });
}

方案2：用catchError操作符统一处理错误 #

如果需要在多个请求中复用错误处理逻辑，可以使用RxJS的catchError操作符在Observable管道中处理：

首先导入所需操作符：

import { catchError } from 'rxjs/operators';

然后修改loadMap方法：

loadMap(): void {
  const processId = /* 你的processId变量 */;
  this.mapReportConfigModel
    .getMapConfig()
    .pipe(
      catchError((error) => {
        if (error.status === 404) {
          this.showError(
            "404",
            "mapReport.err_config_not_found",
            "mapReport.err_config_file_missing_message"
          ).subscribe(() => {
            this.router.navigateByUrl("/dashboard");
          });
        }
        // 重新抛出错误以终止流，也可返回默认配置Observable替代
        throw error;
      })
    )
    .subscribe(
      (configData) => {
        // 成功逻辑保持不变
        this.configData = configData;
        mapboxgl!.accessToken = this.configData.accessToken;
        this.map = new mapboxgl.Map({
          container: this.configData.container,
          center: [this.configData.centerLat, this.configData.centerLng],
        });
       
        this.map.on("error", (response) => {
          this.showError(
            "500",
            "mapReport.err_no_map_reports",
            "mapReport.err_generating_map_report_message"
          ).subscribe(() => {
            this.router.navigateByUrl("/dashboard");
          });
        });
      }
    )
    .add(() => {
      this.loadingService.hide(processId);
    });
}

• 移除原有的try/catch块，它对异步Observable的错误完全无效。
• add()方法会在Observable完成或出错时触发，适合执行隐藏加载动画这类收尾操作。
• 通过error.status可以精准判断HTTP错误状态码，针对性处理404场景。

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