Question

目前，我使用fetch with redux-thunk从API中读取代码 -

我的代码如下：

export function getUsers() {
  return (dispatch) => {
    // I have some helper code that automatically resolves the json promise
    return fetch(`/users`)
    .then((resp, json) => {
      if (resp.status === 200) {
        dispatch(getUsersSuccess(json));
      } else {
        dispatch(getUsersFail(json));
      }
    }).catch((err) => {
      // network error
      dispatch(getUsersFail(err));
    });
  };
}

此处的问题是catch方法，因为catch块中会抛出任何错误then。这通常意味着如果某个React组件的渲染函数因程序员错误而失败，则该错误会被吞噬回dispatch(getUsersFail(err))。

理想情况下，我想检测err是否是一个提取错误（并调度我自己的动作），否则抛出。但是，fetch会抛出通用TypeError。如何可靠地检测到捕获的错误是由fetch抛出的？

Answer 1

不要使用.catch()，而是直接在fetch promise上安装错误处理程序，作为.then()的第二个 - onreject - 参数：

return fetch(`/users`)
.then(([resp, json]) => {
  if (resp.status === 200) {
    dispatch(getUsersSuccess(json));
  } else {
    dispatch(getUsersFail(json));
  }
}, (err) => {
  // network error
  dispatch(getUsersFail(err));
});

查看difference between .then(…).catch(…) and .then(…, …)了解详情。

不过，我建议写一下

return fetch(`/users`)
.then(([resp, json]) => resp.status === 200 ? getUsersSuccess(json) : getUsersFail(json)
     , getUsersFail)
.then(dispatch);

检测promise链中的fetch TypeErrors

1 个答案: