How can I use Axios interceptors in my Vue.js application?

How can I use Axios interceptors in my Vue.js application?

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();

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

export default instance;

What about response interceptors?

Response interceptors can be set up similarly. You can handle responses or errors globally:

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

How do I remove an interceptor if I no longer need it?

You can remove an interceptor by using the eject method. You need to store the interceptor ID when you add it:

const myInterceptor = instance.interceptors.request.use(...);
instance.interceptors.request.eject(myInterceptor);