Detailed explanation of the example of Vue3 Axios interceptor encapsulated into a request file

The Axios interceptor can be encapsulated into a separate request file for reuse throughout the application.

Here is an example showing how to encapsulate an Axios interceptor into a request file:

1. Create a new file named and import Axios:

import axios from 'axios';

2. Create a function called request and export it:

This creates a function called request and sets it to a new Axios instance with the base URL. To add a timeout setting in an encapsulated Axios instance, you can pass the timeout option when creating an Axios instance.

export const request = ({
  baseURL: '/api',
  timeout: 5000, // Timeout is set to 5 seconds});

3. Add an interceptor in the request function:

(function (config) {
  // What to do before sending a request  return config;
}, function (error) {
  // What to do about the request error  return (error);
});

(function (response) {
  // Do something about the response data  return response;
}, function (error) {
  // Do something to respond to errors  return (error);
});

This will add a request interceptor and a response interceptor. You can perform the required actions in these interceptors, such as adding an authentication header before a request is sent or checking for errors in response data after a response is returned.

4. Finally, export the request function:

export default request;

5. You can now use the request function in your application to execute network requests, and each request will pass through a predefined interceptor. For example:

import request from './request';

('/users')
  .then(function (response) {
    (response);
  })
  .catch(function (error) {
    (error);
  });

This will issue a GET request using the encapsulated Axios instance and then process the response using a predefined interceptor

Complete example:

To carry the Token and Username before sending the request, you can use the request interceptor to add authentication headers to all requests.

The request interceptor checks whether there are values ​​named "token" and "username" in localStorage and adds them as Authorization and Username headers. Adjust the names and values ​​of these headers according to actual conditions.

To operate on response data, use a response interceptor. In the above example, the response interceptor checks whether the "status" attribute in the response data is "success". If not, treat it as an error and throw it as an exception. The exception contains a response object, which contains all response information, such as a response header, status code, and response body. The logic of these checks and exception throwing can be adjusted according to actual conditions.

import axios from 'axios';

export const request = ({
  baseURL: '/api',
  timeout: 5000, // Timeout is set to 5 seconds});

(function (config) {
  // Add authentication header before sending the request   = `Bearer ${('token')}`;
   = ('username');
  return config;
}, function (error) {
  // What to do about the request error  return (error);
});
(function (response) {
  // What to do with the response data  const responseData = ;
  if ( !== 'success') {
    const error = new Error( || 'Request failed');
     = response;
    throw error;
  }
  return ;
}, function (error) {
  // What to do with the response error  return (error);
});

This is the article about the Vue3 Axios interceptor encapsulated into a request file. For more related content of Vue3 Axios interceptor, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!