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

2024-01-25 15:14| 来源: 网络整理| 查看: 265

此请求配置结核 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: importa.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 { 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控制是否展示加载动画

【本文地址】

公司简介

联系我们