如何在404错误时获取返回的JSON并展示服务端消息？

看起来你现在的代码只处理了请求成功的场景，要捕获404这类错误并提取服务端返回的自定义消息，得给subscribe加上错误处理逻辑才行。Angular的HttpClient在遇到非2xx状态码时会触发错误流，我们可以在错误回调里拿到服务端返回的JSON内容，针对性处理404的情况。

修改后的完整代码示例 #

this._transactionService.findExistingTransaction(user, searchNumber)
  .subscribe({
    next: (data) => {
      this.transactionResponse = data;
      console.log(JSON.stringify(this.transactionResponse));
      // 这里写请求成功后的业务逻辑...
    },
    error: (err) => {
      // 先提取服务端返回的错误消息，兼容服务端没返回消息的情况
      const serverMessage = err.error?.message || '请求出现异常，请稍后重试';
      console.log('错误详情:', err.error);

      // 专门处理404状态的情况
      if (err.status === 404) {
        // 把服务端的404消息展示出来，比如赋值给模板变量或者用提示组件
        this.errorTip = serverMessage;
        // 也可以直接用alert弹出，或者用你项目里的UI组件库提示框
        // alert(serverMessage);
      } else {
        // 处理其他错误状态码，比如500、403等
        this.errorTip = serverMessage;
      }
    }
  });

关键细节说明 #

• 用对象形式的subscribe参数（Angular 6+推荐写法），把成功和错误逻辑分开，比旧的多参数写法更清晰易读。
• err.error就是服务端返回的JSON响应体，按照你的描述，它里面应该包含状态码和提示消息，所以直接访问对应字段就行（比如err.error.message，如果服务端字段名不同记得改成对应名称）。
• 要确保你的findExistingTransaction方法返回的是Observable，而且项目里的HttpClient没有被拦截器错误处理吃掉错误响应。

额外优化建议 #

如果服务端返回的错误结构是固定的（比如统一是{ statusCode: number, message: string }），可以定义一个TypeScript接口来规范类型，让代码更安全：

// 定义错误响应接口
interface ApiError {
  statusCode: number;
  message: string;
}

// 在错误回调里使用
const errorData = err.error as ApiError;
const serverMessage = errorData.message || '未知错误';

这样后续维护的时候，能更明确知道错误对象的结构，避免拼写错误。

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