How do I use Axios interceptors in Vue 3?

How do I use Axios interceptors in Vue 3?

You can use Axios interceptors in Vue 3 to handle requests and responses globally. Would you like a code example?

Yes, please provide a code example.

Sure! Here’s a basic example:

import axios from 'axios';

const instance = axios.create();

// Request interceptor
instance.interceptors.request.use(config => {
    // Modify request config before sending it
    console.log('Request:', config);
    return config;
}, error => {
    return Promise.reject(error);
});

// Response interceptor
instance.interceptors.response.use(response => {
    // Handle response data
    console.log('Response:', response);
    return response;
}, error => {
    return Promise.reject(error);
});

export default instance;

How do I handle errors in the response interceptor?

In the response interceptor, you can check for error responses and handle them accordingly. For example:

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