如何捕获Angular POST API调用错误并在页面展示？

首先你这段代码有个关键问题：Angular的HttpClient.post方法参数顺序是URL、请求体、配置选项，你现在把headers当成请求体传进去了，这会导致请求格式错误，先把这个问题修正，再处理错误捕获。

方式一：在subscribe中直接添加错误回调 #

这是最直接的写法，适合单个请求的错误处理：

组件代码修改 #

// 先修正请求参数逻辑
const tokenClean = sessionStorage.getItem('token')?.replace(/[:{}"]/g, '');
const tokenFinal = tokenClean?.replace(/token/g, '');
const headers = {
  'Authorization': `Bearer ${tokenFinal}`
};

// 定义组件变量用于存储错误信息
public apiError: string = '';

// 修正post参数顺序：url、请求体（这里传空对象）、headers配置
this.http.post(apiUrl + "token/vendor/request/getproductlist", {}, { headers })
  .subscribe(
    (data: any) => {
      this.listDropDown2 = data;
      // 请求成功时清空错误信息
      this.apiError = '';
    },
    (error: any) => {
      // 捕获错误并格式化信息
      this.apiError = `请求失败: ${error.message || '未知错误'}`;
      // 如需排查问题，可在控制台打印完整错误对象
      console.error('API请求详情:', error);
      // 如果后端返回自定义错误内容，可通过error.error获取，比如：
      // this.apiError = error.error?.msg || '请求失败';
    }
  );

页面模板展示错误 #

在组件的HTML模板中添加错误展示区域：

<!-- 错误提示区域，只有存在错误时才显示 -->
<div *ngIf="apiError" style="color: red; margin: 10px 0;">
  {{ apiError }}
</div>

方式二：使用RxJS的catchError操作符 #

适合需要统一处理错误逻辑的场景（比如多个请求复用错误处理）：

组件代码修改 #

先导入必要的RxJS操作符：

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

然后修改请求逻辑：

const tokenClean = sessionStorage.getItem('token')?.replace(/[:{}"]/g, '');
const tokenFinal = tokenClean?.replace(/token/g, '');
const headers = {
  'Authorization': `Bearer ${tokenFinal}`
};

public apiError: string = '';

this.http.post(apiUrl + "token/vendor/request/getproductlist", {}, { headers })
  .pipe(
    catchError((error: any) => {
      this.apiError = `请求失败: ${error.message || '未知错误'}`;
      console.error('API请求详情:', error);
      // 返回空的可观察对象，避免subscribe因错误中断
      return of(null);
    })
  )
  .subscribe((data: any) => {
    if (data) {
      this.listDropDown2 = data;
      this.apiError = '';
    }
  });

页面展示错误 #

和方式一的模板写法完全一致。

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