获取:如果状态不正常,拒绝承诺并捕获错误?

新手上路,请多包涵

这就是我要做的:

import 'whatwg-fetch';

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(status)
                .then(res => res.json())
                .catch(error => {
                    throw(error);
                })
            });
    };
}

function status(res) {
    if (!res.ok) {
        return Promise.reject()
    }
    return res;
}

编辑:承诺不会被拒绝,这就是我想要弄清楚的。

我在 Redux 中使用这个 fetch polyfillredux-promise-middleware

原文由 Vlady Veselinov 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 603
2 个回答

Fetch Promise 仅在发生网络错误时以 TypeError 拒绝。由于 4xx 和 5xx 响应不是网络错误,因此没有什么可捕获的。您需要自己抛出错误才能使用 Promise#catch

一个 fetch Response 方便地提供一个 ok ,它告诉你请求是否成功。这样的事情应该可以解决问题:

 fetch(url).then((response) => {
 if (response.ok) {
 return response.json();
 }
 throw new Error('Something went wrong');
 })
 .then((responseJson) => {
 // Do something with the response
 })
 .catch((error) => {
 console.log(error)
 });

原文由 fny 发布,翻译遵循 CC BY-SA 4.0 许可协议

以下 login with username and password 示例显示了如何:

  1. 检查 response.ok
  2. reject 如果不OK,而不是抛出错误
  3. 进一步处理来自服务器的任何错误提示,例如验证问题
login() {
  const url = "https://example.com/api/users/login";
  const headers = {
    Accept: "application/json",
    "Content-Type": "application/json",
  };
  fetch(url, {
    method: "POST",
    headers,
    body: JSON.stringify({
      email: this.username,
      password: this.password,
    }),
  })
    .then((response) => {
      // 1. check response.ok
      if (response.ok) {
        return response.json();
      }
      return Promise.reject(response); // 2. reject instead of throw
    })
    .then((json) => {
      // all good, token is ready
      this.store.commit("token", json.access_token);
    })
    .catch((response) => {
      console.log(response.status, response.statusText);
      // 3. get error messages, if any
      response.json().then((json: any) => {
        console.log(json);
      })
    });
},

原文由 ohho 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题