如何在JavaScript原生Fetch API中使用响应体自定义错误消息

你遇到的问题很常见——Fetch API不会把HTTP错误（比如400、500这类状态码）自动视为Promise的reject状态，只有网络层面的错误才会直接进入catch。而且你之前的代码在抛出错误时只使用了statusText，没有去解析服务端返回的具体错误响应体，这就是为什么拿不到详细错误信息的原因。

解决方案：先解析错误响应再抛出 #

核心思路是：当检测到响应状态异常时，先解析响应体（JSON或文本，取决于服务端返回格式），再将解析后的错误信息包装成Error抛出，这样catch块就能拿到完整的错误详情了。

基础版（假设服务端返回JSON格式错误）

fetch(url)
  .then((response) => {
    // 使用response.ok快捷判断是否为成功响应
    if (response.ok) {
      return response.json();
    }
    // 状态异常时，先解析错误响应的JSON内容
    return response.json().then(errorData => {
      // 这里可以根据服务端返回的结构提取错误信息，比如errorData.details
      throw new Error(errorData.details || response.statusText);
    });
  })
  .then((jsonResponse) => {
    // 处理正常的JSON响应
    console.log('成功响应:', jsonResponse);
  })
  .catch((error) => {
    // 这里就能拿到服务端返回的具体错误信息了
    console.error('错误详情:', error.message);
  });

兼容文本格式的版本

如果服务端可能返回纯文本错误，可以把解析方法换成response.text()：

fetch(url)
  .then((response) => {
    if (response.ok) {
      return response.json();
    }
    return response.text().then(errorText => {
      throw new Error(errorText || response.statusText);
    });
  })
  .then((jsonResponse) => {
    // 处理正常响应
  })
  .catch((error) => {
    console.error('错误详情:', error.message);
  });

更健壮的兼容方案（同时支持JSON和文本）

如果不确定服务端返回的格式，可以先尝试解析JSON，失败则 fallback 到文本：

fetch(url)
  .then((response) => {
    if (response.ok) {
      return response.json();
    }
    // 先尝试解析JSON，失败则用文本
    return response.json()
      .catch(() => response.text())
      .then(errorContent => {
        // 把对象格式的错误转成字符串，方便在Error中传递
        const errorMessage = typeof errorContent === 'object' 
          ? JSON.stringify(errorContent) 
          : errorContent || response.statusText;
        throw new Error(errorMessage);
      });
  })
  .then((jsonResponse) => {
    // 处理正常响应
  })
  .catch((error) => {
    console.error('错误详情:', error.message);
  });

关键说明 #

1. response.ok的作用：这是Fetch API提供的快捷属性，等价于response.status >= 200 && response.status <= 299，用它判断成功响应更简洁。
2. 响应体只能解析一次：Fetch的响应对象的json()、text()等方法只能调用一次，所以必须在抛出错误前完成解析，否则后续无法再获取响应体内容。
3. 自定义错误对象：你也可以不使用Error，而是抛出一个包含完整响应信息的自定义对象，比如：

throw {
  status: response.status,
  message: errorData.details,
  fullError: errorData
};

这样在catch块中就能拿到更多错误上下文。

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