vue3 antdVue axios请求配置(全局提示，配合antd自带的加载动画实现请求动画)

此请求配置结核 pinia 使用 antdVue 中的message和loading 实现接口请求时 展示加载动画，接口请求失败后，全局提示错误信息

import axios from 'axios';
import { showMessage } from './status' // 接口请求失败的状态码
import { message } from 'ant-design-vue'
import { useSeverLoadingStore } from '@/stores/severLoading' // 引入定义的store 
const store = useSeverLoadingStore() // 调用方法,控制加载动画的开启关闭



const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL + '/', // url = base url + request url
    timeout: 600000,
    withCredentials: true, // send cookies when cross-domain requests
    // headers: {
    //     "Cache-Control": "no-cache",
    //     Pragma: "no-cache",
    // },
})
declare module "axios" {
    interface AxiosResponse<T = any> {
        errorinfo: null;
        // 这里追加你的参数
    }
    export function create(config?: AxiosRequestConfig): AxiosInstance;
}

const loadingWhiteList = ['/trade/pay/send/result/search'] // 请求白名单
// axios实例拦截请求
service.interceptors.request.use(
    config => {
        console.log("🚀 ~ file: index.ts:28 ~ config:", config)
        if (!loadingWhiteList.includes(config?.url ?? '')) { // 如果白名单中没有请求的url,则加载loading
            // loading = ElLoading.service(loadingConfig)
            store.isLoading(true)
        }
        // 在此处添加请求头等，如添加 token
        const token = localStorage.getItem("token");
        config.headers["Authorization"] = token ? "Bearer " + localStorage.getItem("token") : '';
        return config;
    },
    (error: any) => {
        store.isLoading(false)
        // loading.close()
        Promise.reject(error);
    }
)
// axios实例拦截响应
service.interceptors.response.use(
    (response: any) => {
        console.log(response, 'response');
        store.isLoading(false)
        // loading.close() // 关闭加载动画
        if (response.status === 200) {  // 如果请求连接成功
            if (response.data.code === 0 || response.config.responseType == 'blob'
            ) { // 如果请求的接口有返回数据
                return Promise.resolve(response.data);
            } else {

                message.error(response.data.message)
                return Promise.reject(response.data);
            }
        } else {  // 请求失败 通过message 提示错误信息
            message.error(showMessage(response.status))

            return Promise.reject(response);
        }
    },
    // 请求失败
    (error: any) => {
        store.isLoading(false)
        // loading.close()
        const { response } = error;
        if (response) {
            // 请求已发出，但是不在2xx的范围
            message.error(showMessage(response.status))

            return Promise.reject(response.data);
        } else {
            message.error('网络连接异常,请稍后再试!')
        }
    }
);

export default service

status配置代码

export const showMessage = (status: number | string): string => {
    let message: string = "";
    switch (status) {
        case 400:
            message = "请求错误(400)";
            break;
        case 401:
            message = "登录信息已过期，请重新登录(401)";
            break;
        case 403:
            message = "拒绝访问(403)";
            break;
        case 404:
            message = "请求出错(404)";
            break;
        case 408:
            message = "请求超时(408)";
            break;
        case 500:
            message = "服务器错误(500)";
            break;
        case 501:
            message = "服务未实现(501)";
            break;
        case 502:
            message = "网络错误(502)";
            break;
        case 503:
            message = "服务不可用(503)";
            break;
        case 504:
            message = "网络超时(504)";
            break;
        case 505:
            message = "HTTP版本不受支持(505)";
            break;
        default:
            message = `连接出错(${status})!`;
    }
    return `${message}，请检查网络或联系管理员！`;
};

pinia的代码：

import { defineStore } from 'pinia'

export const useSeverLoadingStore = defineStore('myLoading', {
    state: () => {
        return {
            loading: false
        }
    },
    actions: {
        isLoading(val: boolean) {
            this.loading = val
        },

    }
})

 App.vue页面最外层包裹 antd加载动画，通过pinia控制是否展示加载动画