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

Answer 2

对我来说（使用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;
});

我之所以添加它，是因为我在不同的来源中都看到了这两个版本，并且在尼尔（{3）}中也发现使用错误处理程序进行拦截的版本不适用于它们，所以可能另外一个有用也有人。

Answer 3

添加了调试器以检查对象，因此错误对象的外观如下。

请参阅屏幕截图。右侧（在范围内）

Answer 4

通过error.response非常容易捕获和处理401。

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