JavaScript中使用async/await如何捕获服务端500错误并触发回调？

核心原因 #

fetch API 原生不会将 HTTP 4xx/5xx 状态码判定为请求失败，只有网络层面的异常（断网、跨域被拦截、DNS解析失败等）才会触发 catch 回调。
你本地环境能正常触发弹窗，大概率是本地服务返回500时没有返回合法JSON结构，response.json() 解析抛出异常才走到了catch分支；部署后nginx的500响应如果配置了统一的错误返回结构（哪怕状态码是500也返回可被JSON解析的内容），解析步骤不会报错，自然不会触发catch。

修改后的代码 #

手动增加HTTP状态码判断，非2xx区间直接抛出错误即可触发catch：

function searchByKeyword() {
  for (let x in networks) {
    let urlParameter = x;
    let network = networks[x];

    async function SearchKeywordForNetwork() {
      let url = `${base}/articles/${urlParameter}/${startDate.value}/${endDate.value}/${searchKeyword.value}`;
      const response = await fetch(url);
      // 新增状态码校验，response.ok仅当status在200~299范围时为true
      if (!response.ok) {
        throw new Error(`请求异常，状态码: ${response.status}`);
      }
      const json = await response.json();
      network.value = json;
    }

    SearchKeywordForNetwork().catch(showLimitReachedAlert);
  }
}

补充排查点 #

如果修改后部署依然不触发弹窗，检查nginx配置：

• 确认nginx返回500响应时，是否正确添加了Access-Control-Allow-Origin等跨域相关响应头。如果500响应没有携带跨域头，浏览器会直接拦截响应，也会抛出跨域错误进入catch，此时可在catch回调内新增日志打印确认错误类型：

  SearchKeywordForNetwork().catch(err => {
    console.log('请求错误', err);
    showLimitReachedAlert();
  });
  

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