Question

在我的应用程序中，我有一个简单的提取方法，用于检索通过身份验证令牌发送到API的用户列表

fetch("/users", {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    token: this.props.getUser().token
  })
})
  .then(res => res.json())
  .then(users => this.setState({ users }))
  .catch(err => {
     console.error(err);
   });

但是，如果令牌过期，API可能会返回401错误。如何在提取中正确处理它，以便仅在响应成功时设置状态？

Answer 1

处理获取响应成功/错误的更简洁方法是使用Response#ok只读属性

https://developer.mozilla.org/en-US/docs/Web/API/Response/ok

fetch('/users').then((response) => {
  if (response.ok) {
    return response.json();
  }
  throw response;
}).then((users) => {
  this.setState({
    users
  });
}).catch((error) => {
  // whatever
})

Answer 2

第一个res函数中的回调函数内的

.then包含一个名为status的密钥，用于保存请求状态代码。

＆＃13;

const url = 'https://api.myjson.com/bins/s41un';

fetch(url).then((res) => {
  console.log('status code:', res.status); // heres the response status code
  
  if (res.status === 200) {
    return res.json();   // request successful (status code 200)
  }
  
  return Promise.reject(new Error('token expired!')); // status code different than 200
  
}).then((response) => console.log(response));

＆＃13;

在fetch中处理失败的API响应

2 个答案: