vue3 antdVue axios请求配置(全局提示,配合antd自带的加载动画实现请求动画)
此请求配置结核 pinia 使用 antdVue 中的message和loading 实现接口请求时 展示加载动画,接口请求失败后,全局提示错误信息。App.vue页面最外层包裹 antd加载动画,通过pinia控制是否展示加载动画。status配置代码。
·
此请求配置结核 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控制是否展示加载动画
更多推荐
已为社区贡献16条内容
所有评论(0)