Hello Guys How are you all? Hope you all are fine today in this tutorial we are going to learn How to handle errors in Axios in javascript. So Here I am Explain to you all the possible solutions here. Without wasting your time, Let’s start This Article to Solve This Error.
How to handle errors in Axios?
How to handle errors in Axios
to handle errors in Axios A conventional approach is to catch errors in the
catch()
block like below. intercepting requests or responses before they are handled by then or catch.Axios handling errors
to handle errors in Axios A conventional approach is to catch errors in the
catch()
block like below. intercepting requests or responses before they are handled by then or catch.
Axios handling errors
Solution 1
A conventional approach is to catch errors in the catch()
block like below:
axios.get('/api/xyz/abcd')
.catch(function (error) {
if (error.response) {
// Request made and server responded
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
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
});
Solution 2
intercepting requests or responses before they are handled by then or catch.
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
Solution 3
If you want to gain access to the whole error body, do it as shown below:
async function login(reqBody) {
try {
let res = await Axios({
method: 'post',
url: 'https://myApi.com/path/to/endpoint',
data: reqBody
});
let data = res.data;
return data;
} catch (error) {
console.log(error.response); // this is the main part. Use the response property from the error object
return error.response;
}
}
Solution 4:
You can go like this: error.response.data. In my case, I got an error property from the backend. So, I used error.response.data.error. My code:
axios
.get(`${API_BASE_URL}/students`)
.then(response => {
return response.data
})
.then(data => {
console.log(data)
})
.catch(error => {
console.log(error.response.data.error)
})
Summery
It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also Read