如何在 javascript 中使用异步等待捕获服务器错误？答案

【问题标题】：How can i catch a server error with async await in javascript?如何在 javascript 中使用异步等待捕获服务器错误？
【发布时间】：2021-11-02 12:47:50
【问题描述】：

所以我有一个从我的 API 获取数据的函数。我对请求设置了限制，当达到限制时，服务器返回 500 响应。在本地开发中进行测试时，会捕获错误并触发弹出窗口的showLimitReachedAlert 函数。使用 docker (+ nginx) 运行设置时，不会触发弹出功能。

如何修改此函数以捕获 500 响应并触发该函数？

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);
      const json = await response.json();
      network.value = json;
    }

    SearchKeywordForNetwork().catch(showLimitReachedAlert);
  }
}

【问题讨论】：

那么看看你的开发工具的网络标签：有没有 500 错误要捕获？因为这是一个不错的选择，但您的 docker+nginx 设置并没有做与普通本地设置相同的事情。

标签： javascript fetch server-error

【解决方案1】：

首先，如果你想捕获它，你需要实际抛出一个错误。另外，请注意，如果响应具有 500 状态代码，则 fetch() 不会引发任何错误。要实现您想要的，您需要检查响应，如果有 500 则抛出错误，然后捕获错误。这是一个例子：

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);
      if (response.status == 500) 
        throw new Error("Got a 500 status code");
      const json = await response.json();
      network.value = json;
    }

    try {
      await SearchKeywordForNetwork()
    } catch (error) {
      showLimitReachedAlert();
    }
  }
}

我唯一要补充的是：如果网络出现故障，fetch 会抛出错误。抛出自定义错误并在 catch 语句中检查错误的类型可能很方便。否则，您将在这两种情况下都调用 showLimitReachedAlert。

【讨论】：

【解决方案2】：

想出了如何做到这一点。在 Docker 和本地版本中都经过测试。

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

    async function getToday() {
      let url = `${base}/articles/${urlParameter}`;

      fetch(url)
        .then(async (response) => {
          const json = await response.json();
          network.value = json;

          // check for error response
          if (!response.ok) {
            // const error = (json && json.message) || json.statusText;
            return Promise.reject(error);
          }
        })
        .catch((error) => {
          showLimitReachedAlert();
        });
    }

    getToday();
  }
}

【讨论】：

欢迎来到 StackOverflow，很高兴您的问题得到解答！看起来您正在使用与 Gregorio 的答案非常相似的东西（!response.ok 而不是 response.status !== 500） - 将有用的答案投票并标记为 accepted 被认为是一种很好的做法，以感谢海报并为其他人创建有用的参考可能会遇到这个问题。
是的，是的，已经尝试过，但没有允许，因为我没有足够的声誉。