axios get error response message

How to Handle Error Responses in Axios GET Request

When making a GET request using Axios, it's important to handle any error responses that you might encounter. This can help to prevent unexpected behavior and make your application more robust. Here's how you can handle error responses in Axios GET request:

Method 1: Using .catch() method

The simplest way to handle error responses in Axios GET request is by using the .catch() method. This method is called when there is an error in the request or when the server returns an error response. Here's an example:


axios.get('https://example.com/api/data')
  .then(response => {
    // handle successful response
    console.log(response.data);
  })
  .catch(error => {
    // handle error response
    console.log(error.response.data);
  });

In the above example, we are making a GET request to 'https://example.com/api/data'. If the request is successful, we log the response data to the console. If there is an error in the request or if the server returns an error response, we log the error response data to the console.

Method 2: Using async/await with try/catch

You can also handle error responses in Axios GET request using async/await with try/catch block. Here's an example:


async function getData() {
  try {
    const response = await axios.get('https://example.com/api/data');
    // handle successful response
    console.log(response.data);
  } catch (error) {
    // handle error response
    console.log(error.response.data);
  }
}

In the above example, we are defining an async function getData() and calling axios.get() inside it. We are using try/catch block to handle the response and error. If the request is successful, we log the response data to the console. If there is an error in the request or if the server returns an error response, we log the error response data to the console.

Method 3: Creating a custom Axios instance

You can also create a custom Axios instance and define the error handling behavior globally. Here's an example:


const api = axios.create({
  baseURL: 'https://example.com/api/',
});

api.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    // handle error response
    console.log(error.response.data);
    return Promise.reject(error);
  },
);

api.get('data')
  .then(response => {
    // handle successful response
    console.log(response.data);
  });

In the above example, we are creating a custom Axios instance using axios.create() and defining the baseURL as 'https://example.com/api/'. We are also defining an interceptor using api.interceptors.response.use() method which is called for every response. If there is an error in the response, we log the error response data to the console and return a rejected Promise. If the request is successful, we log the response data to the console.

These are some of the ways you can handle error responses in Axios GET request. Choose the one that suits your application requirements.

Subscribe to The Poor Coder | Algorithm Solutions

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe