javascript - 如何使用 axios 检测 401 并停止控制台错误

Question

我正在尝试使用 axios 调用 API 并返回数据。

我有以下代码可以正常工作

axios.get('http://api/courses')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.status);
    } else {
      console.log('Error', error.message);
    }
  })
  .then(response => {
    console.log(response.data)
  });

这工作正常，API 返回 200 和数据，所以在控制台中我得到了返回的数据。

但是这不起作用

axios.get('http://api/courses')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.status);
    } else {
      console.log('Error', error.message);
    }
  })
  .then(response => {
    console.log(response.data)
  });

在上面的调用中，我从 API 返回了一个 401，我希望能够检测到它并做一些事情(我目前正在做一个 console.log)。但是在控制台中出现以下错误:

GET http://api/courses 401 (Unauthorized)
(anonymous) @ spread.js:25
e.exports @ spread.js:25
e.exports @ spread.js:25
Promise.then (async)
r.request @ spread.js:25
r.(anonymous function) @ spread.js:25
(anonymous) @ index.js:20
(anonymous) @ (index):49


(index):58 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
at axios.get.catch.then.response ((index):58)
at <anonymous>

有没有办法捕获 401？这似乎是需要身份验证的 API 的常见做法，但我似乎无法解决。 谢谢

Answer 1

您可以添加一个拦截器来捕获所有 401 响应。这样您就可以触发重定向或您可能需要的任何类型的操作。在此示例中，我将调度一个 redux 操作，该操作将清理一些用户数据并呈现登录表单。

const UNAUTHORIZED = 401;
axios.interceptors.response.use(
  response => response,
  error => {
    const {status} = error.response;
    if (status === UNAUTHORIZED) {
      dispatch(userSignOut());
    }
    return Promise.reject(error);
 }
);