如何使用 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

通过error.response很容易捕捉和处理401。

error => {
    if (err.response.status) {
            props.navigation.navigate('Login');
            return;
         }
         });

Answer 2

您可以添加一个拦截器来捕获所有 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);
 }
);

Answer 3

添加了调试器来检查对象，所以这就是错误对象的样子。

参考截图。右侧（范围内）

Answer 4

对我来说（使用 axios 0.19）都可以：

axios.interceptors.response.use(response => response, error => {
    if(error.response.status === 401) store.dispatch(logout);
    return error;
});

和

axios.interceptors.response.use(response => {
    if(response.status === 401) store.dispatch(logout);
    return response;
});

我添加这个是因为我在不同的来源看到了这两个版本，而且 Neil told 使用错误处理程序拦截的版本对他们不起作用，所以可能另一个对某人有帮助也是。