What are Axios interceptors and how do I use them in React?

What are Axios interceptors and how do I use them in React?

Axios interceptors are functions that Axios calls for every request or response. They allow you to modify requests or responses before they are handled by then or catch.

Can you give me an example of how to set up an interceptor?

Sure! You can set up an interceptor like this:

axios.interceptors.request.use(config => {
  // Modify config before sending the request
  return config;
}, error => {
  return Promise.reject(error);
});

How do I handle errors with interceptors?

You can handle errors in the response interceptor like this:

axios.interceptors.response.use(response => {
  return response;
}, error => {
  // Handle the error
  console.error('Error occurred:', error);
  return Promise.reject(error);
});

Is it possible to add headers using interceptors?

Yes, you can add headers in the request interceptor by modifying the config object. For example:

config.headers['Authorization'] = 'Bearer token';