如何使用 Promise 正确捕获错误？答案

【问题标题】：How to properly catch errors using Promise?如何使用 Promise 正确捕获错误？
【发布时间】：2020-04-17 20:44:18
【问题描述】：

我正在学习在线课程的反应，但我在跟随讲师时遇到了问题。在使用 Promise 处理从服务器检索数据的错误时，我有以下代码将操作分派到我的商店：

export const fetchPromos = () => (dispatch) => {

dispatch(promosLoading());

return fetch(baseUrl + 'promotions')
.then(response => {
    if (response.ok) {
      return response;
    } else {
      var error = new Error('Error ' + response.status + ': ' + response.statusText);
      error.response = response;
      throw error;
    }
  },
  error => {
        var errmess = new Error(error.message);
        throw errmess;
  })
.then(response => response.json())
.then(promos => dispatch(addPromos(promos)))
.catch(error => dispatch(promosFailed(error.message)));
}

在我关闭我的 json-server 或故意从服务器请求错误资源并重新加载我的应用程序后，我在浏览器中收到 UnHandled Rejection 错误，而不是我定义的错误。讲师似乎正确地看到了错误消息。我错过了什么吗？

【问题讨论】：

我无法理解它与我的代码的关系。您能否指出这个特定代码的错误在哪里，因为它似乎对教师有用。
未处理的拒绝中包含的错误是什么？这是您期望来自失败的fetch 的错误，还是其他错误？可能是您的 promosFailed 函数由于某种原因或类似的原因抛出错误。如果 .catch 中的回调由于某种原因抛出错误，您将收到未处理的拒绝。
好吧，我打开控制台看了看。正在正确调用 promosFailed 函数，并显示错误消息“无法获取”（它应该出现在组件的位置）。我在实际组件中有一个简单的 if -else 条件渲染。在这个组件中，它没有认识到它作为道具接收到的错误应该被显示，而是试图显示导致未定义属性错误的图像。
好的，所以基本上，问题不在此代码中。附带说明一下，第一个 .then 上的 error => 处理程序似乎是完全多余的。您只是发现了一个错误，创建了一个与原始错误消息相同的新错误，然后抛出了新错误。您可以完全删除该处理程序并具有相同或更好的行为。
@JLRishe Cheers 想通了。

标签： reactjs promise request fetch fetch-api

【解决方案1】：

这段代码没有错误，我发现了我的问题，因为我拼错了一个道具，导致它在渲染部分为空，从而绕过了我的条件渲染循环。

   if (isLoading) {
    return (
        <Loading />
    );
}
else if (errMess) {
    return (
        <h4>{errMess}</h4>
    );
}

Error 属性基本上是 Null。（导致 errMess 为空）

【讨论】：