close
How to handle errors in Axios, handle errors in axios, Axios handling errors, handle errors,

How to handle errors in Axios

by

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.

Contents
  1. How to handle errors in Axios?
  2. Solution 1
  3. Solution 2
  4. Solution 3
  5. Solution 4:
  6. Summery

How to handle errors in Axios?

  1. 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.

  2. 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

Leave a Comment