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