How can I use Axios interceptors in a Django and Vue application?

How can I use Axios interceptors in a Django and Vue application?

You can use Axios interceptors to handle requests and responses globally in your Vue application. This is useful for adding authentication tokens or handling errors.

Can you show me an example of setting up an Axios interceptor?

Sure! You can set up an interceptor like this:

import axios from 'axios';

axios.interceptors.request.use(config => {
    // Add authorization token to headers
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return config;
}, error => {
    return Promise.reject(error);
});

What about handling errors with interceptors?

You can handle errors in the response interceptor like this:

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

Is there a way to use interceptors for both requests and responses?

Yes, you can chain both request and response interceptors together. Just define them one after the other as shown in the previous examples.