为何Express错误处理器对fetch/XHR请求无效？求解决方案

核心问题 #

1. catchAsync参数顺序错误：你定义的catchAsync返回的函数参数是(res, req, next)，顺序完全颠倒，导致req和res对象被误用，这也是你之前修改catchAsync手动渲染无效的根本原因。
2. 错误处理器未区分请求类型：不管是普通表单提交（期望HTML响应）还是fetch请求（期望JSON响应），错误处理器一律渲染HTML页面，导致fetch尝试解析HTML为JSON时抛出解析错误。

第一步：修复catchAsync函数 #

修正参数顺序，确保req、res、next的顺序正确：

function catchAsync(func) {
  return function (req, res, next) {
    func(req, res, next).catch((err) => {
      next(err);
    });
  };
}

第二步：改造错误处理器，适配不同请求类型 #

通过请求头判断请求类型，分别返回HTML错误页或JSON错误信息：

app.use((err, req, res, next) => {
  const { status = 500 } = err;
  res.status(status);

  // 判断是否为AJAX/fetch请求（两种判断方式兼容不同场景）
  const isAjax = req.xhr || (req.headers.accept && req.headers.accept.includes('application/json'));

  if (isAjax) {
    // 给AJAX请求返回JSON格式错误数据
    res.json({
      status: status,
      message: err.message || '服务器内部错误',
      // 开发环境返回堆栈信息，生产环境隐藏
      stack: process.env.NODE_ENV === 'development' ? err.stack : undefined
    });
  } else {
    // 普通请求渲染错误页面
    res.render('error', { error: err, status });
  }
});

第三步：优化fetch请求的错误处理逻辑 #

fetch不会自动将4xx/5xx状态码视为reject，需要手动判断响应状态，并处理错误场景：

const saveEdit = (address, ...etc) => {
  fetch(`${address}`, {
    method: 'PUT',
    headers: { 
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-Requested-With': 'XMLHttpRequest' // 主动标记为AJAX请求，方便后端识别
    },
    body: `${...}`, // 替换为你的实际请求体
  })
  .then(resp => {
    // 先判断响应状态是否正常
    if (!resp.ok) {
      // 尝试解析后端返回的JSON错误信息
      return resp.json().then(errData => {
        throw new Error(errData.message || `请求失败，状态码：${resp.status}`);
      });
    }
    return resp.json();
  })
  .then(successData => {
    // 处理成功后的逻辑，比如更新页面内容
    console.log('编辑保存成功', successData);
  })
  .catch(err => {
    // 捕获并展示错误，比如在页面上显示提示
    console.log('保存出错:', err.message);
    // 示例：给用户展示错误提示
    // document.querySelector('.error-message').textContent = err.message;
  });
};

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