JavaScript fetch处理服务端错误：如何在catch中获取异常报错信息

fetch API 的触发catch的规则和多数前端请求库不同：

• 仅网络层面的请求故障（比如断网、跨域拦截、域名不存在）时，才会进入catch块
• 服务端返回4xx、5xx等错误状态码时，fetch 会判定请求执行成功，进入then回调，因此你只能在then里打印到错误信息，无法触发catch

你需要在then回调中先校验响应状态，不符合预期时手动抛出错误，即可将错误信息传递到catch块处理。

fetch(/* 你的PHP请求地址 */)
  .then(function(response) {
    // 先校验响应状态是否为2xx成功区间
    if (!response.ok) {
      // 解析服务端返回的错误内容：如果返回的是JSON格式，替换为response.json()即可
      return response.text()
        .then(function(errorMsg) {
          // 手动抛出错误，触发后续catch
          throw new Error(errorMsg);
        })
    }
    // 正常请求的响应体解析，按需换用response.text()等方法
    return response.json();
  })
  .then(function(validData) {
    // 此处写业务成功逻辑
    console.log('请求成功', validData);
  })
  .catch(function(error) {
    // 此处可直接拿到错误信息，渲染到页面元素即可
    console.log('错误信息：', error.message);
    document.querySelector('#你的错误提示元素选择器').innerText = error.message;
  });

• response.ok是原生提供的语法糖，等价于response.status >= 200 && response.status < 300
• 如果服务端返回的错误是JSON结构，你可以在抛出错误前取出指定字段，比如throw new Error(errorJson.msg)，更灵活的适配业务需求

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