Angular中如何在subscribe()获取错误状态码及错误响应消息

你需要修改错误回调逻辑，从400错误的响应体中提取验证消息，替换原来直接传入错误对象的方式，具体实现如下：

修改后的完整代码 #

thisService.createProduct(new ProductDetail(this.data)).subscribe({
  next: (response) => {
    this.isSaved = true;

    if (this.isSaved) {
      this.createdId = Number(response);
      this.metadata.uploadEvent(this.createdId);
    }
  },
  complete: () => {
    this.snackBar.open('Product has been created.', '', {
      duration: 3000
    });
    this.router.navigate(['products']);
  },
  error: (e) => {
    let errorMessage = '创建商品时发生错误';
    
    if (e.status === 400) {
      // 根据后端实际返回的错误结构调整提取逻辑，以下是常见场景
      // 场景1：后端返回 { message: "商品名已存在" }
      if (e.error?.message) {
        errorMessage = e.error.message;
      }
      // 场景2：后端返回 { errors: { productName: ["商品名重复"] } }
      else if (e.error?.errors?.productName?.length) {
        errorMessage = e.error.errors.productName[0];
      }
      // 场景3：后端直接返回字符串错误信息
      else if (typeof e.error === 'string') {
        errorMessage = e.error;
      }
      console.log('验证错误详情:', e);
    } else {
      // 处理其他状态码的错误
      errorMessage = e.message || errorMessage;
    }

    this.snackBar.open(errorMessage, '', {
      duration: 3000
    });
  }
});

关键说明 #

• 默认消息兜底：先定义通用错误消息，确保在无法提取自定义验证消息时，用户仍能看到清晰提示
• 适配后端响应结构：400错误的验证消息通常会放在e.error属性中，你需要根据自己后端的实际返回格式调整对应的属性路径（比如e.error.message、e.error.detail或者嵌套的错误数组）
• 避免直接传入错误对象：原来的this.snackBar.open(e)会显示[object Object]，用户无法理解具体错误，必须提取字符串类型的消息
• 调试辅助：保留console.log可以帮助你查看错误响应的完整结构，方便调整提取逻辑

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