How can I use Axios interceptors in my React app?

How can I use Axios interceptors in my React app?

You can use Axios interceptors to intercept requests or responses before they are handled by then or catch. This is useful for adding headers, logging, or handling errors globally.

Can you show me a code example of setting up an interceptor?

Sure! Here's a simple example:

import axios from 'axios';

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

instance.interceptors.request.use(config => {
    config.headers['Authorization'] = 'Bearer token';
    return config;
}, error => {
    return Promise.reject(error);
});

export default instance;

What about response interceptors? How do they work?

Response interceptors allow you to handle responses before they are processed by your application. You can use them to transform data or handle errors globally.

Can you give me an example of a response interceptor?

Absolutely! Here's an example:

instance.interceptors.response.use(response => {
    // Do something with response data
    return response;
}, error => {
    // Handle error globally
    console.error('Error response:', error);
    return Promise.reject(error);
});