Detailed explanation of axios request encapsulation, request interception and corresponding interception in Vue3

Preface

For the three packages, easy to use

The purpose of   is to create a newaxiosInstance, this instance can have a custom configuration. By using, you can generate a client for any API and reuse the same configuration in any call using the same client. This makes it easier to use multiple APIs in your application, because you can create a separate instance for each API and set up a different configuration in each instance.

The method accepts a configuration object as a parameter, which contains the following properties:

• baseURL: The base URL for all requests.
• headers: Custom headers to send.
• timeout: Specifies the number of milliseconds before the request timeout.
• withCredentials: Indicates whether cross-site access control (CORS) credentials should be used.
• xsrfCookieName: The name of the cookie used as the xsrf token value.
• xsrfHeaderName: The name of the HTTP header containing the xsrf token value.

For example, the following code creates a new axios instance and configures it to use/api/As the basic URL:

const instance = ({
  baseURL: '/api/'
});

axios request encapsulation

// Create an axios instance with createconst Service = ({
    timeout: 3000,
    baseURL: 'http://127.0.0.1:8888/api/private/v1/',
    headers: { 'Content-type': 'application/json;charset=utf-8' }
 
})
 
// get data request encapsulationexport const get = config => {
    return Service({
        ...config,
        method: 'get',
        data: ,
    })
 
}
 
// Post data request encapsulationexport const post = config => {
    return Service({
        ...config,
        method: 'post',
        data: ,
    })
 
}

Request Intercept and Response Intercept

In Vue3, the Axios library can be used to make HTTP requests. The Axios library provides request interceptors and response interceptors to perform some operations when requests are sent and responses are returned.

A request interceptor can be used to perform some operations before the request is sent, such as adding tokens, setting request headers, etc. The response interceptor can be used to perform some operations after the response is returned, such as processing error messages, stripping invalid data, etc.

let loadingObj = null;
// Request interception, add loading, and handle requests in a unified manner((config) => {
    loadingObj = ({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    return config;
})
 
 
// Response to intercept and perform unified processing of return values(response => {
    ();
    const data = ;
    if (!) {
        ( || 'Server Error')
    }
    else {
        ElMessage({
            message: 'Login successfully',
            type: 'success',
            duration: 1500
        })
    }
    return ;
}, error => {
    ();
    ElMessage({
        message: 'Server Error',
        type: 'error',
        duration: 2000
    })
})

Interface request

import { get, post } from './service'
// Login data requestexport const loginAPI = data => {
    return post({
        url: '/login',
        data
    })
}

Summarize

This is the article about axios request encapsulation, request interception and corresponding interception in Vue3. For more related content related to Vue3 axios request encapsulation and interception, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!