Vue3's axios request encapsulation, request interception, corresponding interception

The three are packaged in Service.js for easy use

axios.create What does is create a new  axios instance, which can have custom configuration. Using  axios.create, you can generate a client for any API and reuse the same configuration in any call using the same client. This makes it more convenient when using multiple APIs in an application, because you can create a separate instance for each API and set different configurations in each instance.

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

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

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

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

Axios request encapsulation

// 用create创建axios实例
const Service = axios.create({
    timeout: 3000,
    baseURL: 'http://127.0.0.1:8888/api/private/v1/',
    headers: { 'Content-type': 'application/json;charset=utf-8' }

})

// get 数据请求封装
export const get = config => {
    return Service({
        ...config,
        method: 'get',
        data: config.data,
    })

}

// post 数据请求封装
export const post = config => {
    return Service({
        ...config,
        method: 'post',
        data: config.data,
    })

}

Request interception and response interception

In Vue3, you can use the Axios library to make HTTP requests. The Axios library provides request interceptors and response interceptors to perform actions when a request is sent and when a response comes back.

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

let loadingObj = null;
// 请求拦截，增加loading，对请求统一处理
Service.interceptors.request.use((config) => {
    loadingObj = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    return config;
})


// 相应拦截，对返回值做同意处理
Service.interceptors.response.use(response => {
    loadingObj.close();
    const data = response.data;
    if (!data.data) {
        ElMessage.error(data.meta.msg || '服务器错误')
    }
    else {
        ElMessage({
            message: '登录成功',
            type: 'success',
            duration: 1500
        })
    }
    return response.data;
}, error => {
    loadingObj.close();
    ElMessage({
        message: '服务器错误',
        type: 'error',
        duration: 2000
    })
})

interface request

import { get, post } from './service'

// 登录数据请求
export const loginAPI = data => {
    return post({
        url: '/login',
        data
    })

}