1. Create a new file named request.js and import it into Axios:

import axios from 'axios';

2. Create a function named request and export it:

Create a The function is called request and is set to a new Axios instance with a base URL. To set a timeout in a wrapped Axios instance, pass the timeout option when creating the Axios instance.

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超時設(shè)置為5秒
});

3. Add an interceptor in the request function:

request.interceptors.request.use(function (config) {
  // 在發(fā)送請求之前做些什么
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});

request.interceptors.response.use(function (response) {
  // 對響應(yīng)數(shù)據(jù)做點什么
  return response;
}, function (error) {
  // 對響應(yīng)錯誤做點什么
  return Promise.reject(error);
});

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

4. Finally, export the request function:

export default request;

Now, every network request that passes the predefined interceptor can be executed through the request function in the application. For example:

import request from './request';

request.get('/users')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

This will make a GET request using a wrapped Axios instance and then handle the response using a predefined interceptor

Full example:

To be carried before sending the request Token and Username, you can use a request interceptor to add authentication headers to all requests,

The request interceptor checks whether values ??named "token" and "username" exist in localStorage and adds them as Authorization and Username headers. Adjust the names and values ??of these headers as appropriate.

To operate on response data, use response interceptors. In the above example, the response interceptor will verify whether the "status" attribute in the response data is "success". If not, treat it as an error and throw it as an exception. The response object contains exception information, including all information such as response headers, status codes, and response bodies. The logic of these checks and exception throwing can be adjusted according to the actual situation.

import axios from 'axios';

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超時設(shè)置為5秒
});

request.interceptors.request.use(function (config) {
  // 在發(fā)送請求之前添加身份驗證標(biāo)頭
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  config.headers.Username = localStorage.getItem('username');
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});
request.interceptors.response.use(function (response) {
  // 對響應(yīng)數(shù)據(jù)做些什么
  const responseData = response.data;
  if (responseData.status !== 'success') {
    const error = new Error(responseData.message || '請求失敗');
    error.response = response;
    throw error;
  }
  return responseData.data;
}, function (error) {
  // 對響應(yīng)錯誤做些什么
  return Promise.reject(error);
});

The above is the detailed content of How to encapsulate Vue3 Axios interceptor into request file. For more information, please follow other related articles on the PHP Chinese website!