[英]react axios then works but catch doesn't work
I've read the following questions but I couldn't find the solution.我已阅读以下问题,但找不到解决方案。
I wanna to get errors 400, 500, ... someone has said you should catch in then but I tried it and nothing happened.我想得到错误 400、500,......有人说你应该抓住它,但我试过了,什么也没发生。 for test I wrote a function to get error 404, 400, ...为了测试,我编写了一个函数来获取错误 404、400、...
export const myAxios = url => {
Axios.get(url)
.then(response => {
// Success
console.log("then response ", response);
})
.catch(error => {
// Error
if (error.response) {
console.log("error respone", error.response);
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
// console.log(error.response.data);
// console.log(error.response.status);
// console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the
// browser and an instance of
// http.ClientRequest in node.js
console.log("erros request: ", error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log("Error message", error.message);
}
console.log("errors config : ", error.config);
});
};
axios doesn't catch errors and browser console logs this: axios 不会捕获错误并且浏览器控制台会记录以下内容:
xhr.js:172 GET http://localhost:3000/app/..../choices 404 (Not Found)
dispatchXhrRequest @ xhr.js:172
xhrAdapter @ xhr.js:11
dispatchRequest @ dispatchRequest.js:59
Promise.then (async)
request @ Axios.js:53
Axios.<computed> @ Axios.js:68
wrap @ bind.js:9
myAxios @ textaxios.js:4
(anonymous) @ List.jsx:14
commitHookEffectList @ react-dom.development.js:22030
Any tips or help will be appreciated.任何提示或帮助将不胜感激。
packages:包:
"axios": "^0.19.0"
"react": "^16.12.0"
Your code seems fine, perhaps it's the local endpoint (resource) that you're trying to get to?您的代码看起来不错,也许是您要访问的本地端点(资源)?
Here's an example using an example placeholder service:这是使用示例占位符服务的示例:
document.getElementById('btn-valid').addEventListener('click', () => { // Valid URL myAxios('https://jsonplaceholder.typicode.com/todos/1') }) document.getElementById('btn-invalid').addEventListener('click', () => { // Invalid URL myAxios('https://jsonplaceholder.typicode.com/todus/1') }) const myAxios = url => { axios.get(url) .then(response => { console.log('success', response); }) .catch(error => { console.log('error', error) }) }
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <button id="btn-invalid">Invalid URL</button> <button id="btn-valid">Valid URL</button>
Additionally, you can try using Axios interceptors to 'intercept' requests or responses before they're handled by then
or catch
:此外,您可以尝试使用 Axios拦截器在它们被then
或catch
处理之前“拦截”请求或响应:
axios.interceptors.response.use(response => {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
console.log('inside interceptor success')
return response;
}, error => {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
console.log('inside interceptor error')
return Promise.reject(error);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.