Vue3中axios请求封装、请求拦截与相应拦截详解

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

// 用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,
    })
 
}

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
    })
})

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