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

// Add a request interceptor
instance.interceptors.request.use(config => {
    // Do something before request is sent
    config.headers['Authorization'] = 'Bearer token';
    return config;
}, error => {
    return Promise.reject(error);
});

// Add a response interceptor
instance.interceptors.response.use(response => {
    // Any status code that lie within the range of 2xx cause this function to trigger
    return response;
}, error => {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    console.error('Error response:', error);
    return Promise.reject(error);
});

This sets up a request interceptor to add an authorization token and a response interceptor to log errors.

What if I want to handle errors globally?

You can handle errors globally in the response interceptor. For example, you can redirect users to a login page if they receive a 401 Unauthorized error.