javascript 如何使用 axios 检测 401 并停止控制台错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48743474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect a 401 with axios and stop the console error
提问by davidjh
I am trying to use axios to call an API and return data.
我正在尝试使用 axios 调用 API 并返回数据。
I have the following code which works fine
我有以下代码可以正常工作
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)
});
This works fine, the API returns a 200 and data so in the console I get the data returned.
这工作正常，API 返回 200 和数据，因此在控制台中我得到返回的数据。
However this does not work
然而这不起作用
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)
});
On the above call i get a 401 returned from the API, I want to be able to detect that and do something (where i am currently doing a console.log). However in the console I get the following errors:
在上面的调用中，我得到了从 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>
Is there a way to capture a 401? It seems like common practice by API's that require auth, but I cannot seem to work it out. Thanks
有没有办法捕获401？这似乎是需要身份验证的 API 的常见做法，但我似乎无法解决。谢谢
回答by Bruno Paulino
You can add an interceptor that will catch all 401 responses. That way you can fire a redirect or any sort of actions you might need. In this example I am dispatching a redux action that will clean up some user data and render the login form.
您可以添加一个拦截器来捕获所有 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);
}
);
回答by YakovL
For me (with axios 0.19) both work:
对我来说（使用 axios 0.19）两者都有效：
axios.interceptors.response.use(response => response, error => {
if(error.response.status === 401) store.dispatch(logout);
return error;
});
and
和
axios.interceptors.response.use(response => {
if(response.status === 401) store.dispatch(logout);
return response;
});
I'm adding this because I've saw both versions in different sources and also Neil toldthat the version that uses the error handler to intercept didn't work for them, so may be another one is helpful to somebody too.
我添加这个是因为我在不同的来源中看到了两个版本，而且 Neil 还告诉我使用错误处理程序拦截的版本对他们不起作用，所以另一个版本可能对某人也有帮助。
回答by Ashish Singh Rawat
Added debugger to check the object, so this is how the error object looks like.
添加了调试器来检查对象，所以这就是错误对象的样子。
Refer screenshot. Right side(under scope)
参考截图。右侧（范围内）
