Fetch请求返回500状态码时无法读取响应的求助

当你用Fetch调用接口遇到500状态码时，当前代码的问题在于：你reject的是未解析的Response对象，并没有读取它的响应体内容，因此无法直接获取到message属性。

下面提供两种可行的解决方法：

方法一：在reject前提前解析错误响应 #

fetch('your-api-endpoint')
  .then(response => {
    if (!response.ok) {
      // 先解析错误响应的JSON数据，再将解析结果reject出去
      return response.json().then(errorData => Promise.reject(errorData));
    }
    return response.json();
  })
  .then(data => {
    // 处理成功响应
    console.log(data);
  })
  .catch(error => {
    // 直接访问解析后的错误对象的message属性
    console.log(error.message); // 输出 "Test error"
  });

方法二：在catch中解析Response对象 #

fetch('your-api-endpoint')
  .then(response => {
    if (!response.ok) {
      return Promise.reject(response);
    }
    return response.json();
  })
  .then(data => {
    // 处理成功响应
    console.log(data);
  })
  .catch(error => {
    // 区分Response类型错误和其他错误（如网络故障）
    if (error instanceof Response) {
      // 解析响应体的JSON数据
      error.json().then(errorData => {
        console.log(errorData.message); // 输出 "Test error"
      });
    } else {
      console.log('非HTTP响应错误:', error);
    }
  });

注意事项 #

• 如果接口返回的不是JSON格式，将response.json()替换为response.text()即可读取响应文本。
• 方法二中，error.json()是异步操作，若需要基于错误内容执行后续逻辑，要注意异步流程的处理。

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