无法在Angular 4中捕获ExpressJs自定义错误消息

你的问题主要出在Express错误处理的逻辑细节、错误对象的规范传递，以及Angular端的错误解析方式上，我来一步步帮你搞定：

第一步：修正Express的错误处理中间件 #

你当前的中间件里重复设置了res.status，如果错误对象没有status属性，第二次设置会导致状态码异常。而且返回纯文本消息不如返回JSON结构更方便Angular解析，调整如下：

// server.js 错误处理中间件
app.use(function (err, req, res, next) {
  // 统一处理状态码，默认500
  const statusCode = err.status || 500;
  // 返回结构化的JSON错误数据
  res.status(statusCode).json({
    code: statusCode,
    msg: err.message || '服务器内部错误'
  });
});

第二步：在Controller里规范抛出自定义错误 #

你的create函数里，无论是数据库查询错误还是业务逻辑错误（比如部门名称重复），都需要创建包含status和message的标准错误对象再reject，这样错误处理中间件才能正确识别：

// my-controller.js
function create(data) {
  return new Promise((resolve, reject) => {
    Department.findOne({ title: data.title })
      .exec((err, doc) => {
        if (err) {
          // 数据库查询错误，定义500状态码+对应消息
          const dbErr = new Error('查询部门信息失败，请稍后重试');
          dbErr.status = 500;
          return reject(dbErr);
        }
        if (doc) {
          // 业务逻辑错误：部门已存在，定义409冲突状态码
          const duplicateErr = new Error('该部门名称已存在，请更换名称');
          duplicateErr.status = 409;
          return reject(duplicateErr);
        }
        // 执行创建部门的逻辑
        const newDept = new Department(data);
        newDept.save((saveErr, savedDoc) => {
          if (saveErr) {
            const saveErrObj = new Error('创建部门失败，请稍后重试');
            saveErrObj.status = 500;
            return reject(saveErrObj);
          }
          resolve(savedDoc);
        });
      });
  });
}

第三步：Angular端正确捕获并解析错误 #

Angular 4里调用API时，需要通过catch（或catchError，取决于RxJS版本）捕获HttpErrorResponse，然后从响应体中提取自定义消息：

// Angular 部门服务示例
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class DepartmentService {
  constructor(private http: HttpClient) {}

  createDepartment(data: any): Observable<any> {
    return this.http.post('/api/departments', data)
      .catch((error: HttpErrorResponse) => {
        // 从错误响应的JSON体中提取自定义消息
        const errMsg = error.error.msg || '请求失败，请稍后重试';
        // 将错误抛出给组件处理
        return Observable.throw(errMsg);
      });
  }
}

在组件里调用服务时，就能直接拿到自定义错误消息并展示：

// Angular 组件示例
createDept() {
  this.departmentService.createDepartment(this.formData)
    .subscribe(
      (res) => {
        console.log('部门创建成功', res);
        // 处理成功逻辑，比如重置表单、提示成功
      },
      (err) => {
        // 展示自定义错误消息
        this.errorTip = err;
        // 或者用alert/toast组件提示
        alert(err);
      }
    );
}

关键注意事项 #

• 一定要让Express返回JSON格式的错误数据，纯文本会增加Angular解析的复杂度；
• 自定义错误对象必须带status属性，否则错误中间件会默认使用500状态码；
• Angular 4的HttpClient会自动解析JSON响应，所以错误内容可以直接通过error.error访问。

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