vue3 elementPlus axios请求配置(全局提示,接口请求动画)
【代码】vue3 elementPlus axios请求配置(全局提示,接口请求动画)
·
import axios from 'axios';
import { showMessage } from './status' // 接口请求失败的状态码
import { ElMessage, ElLoading } from 'element-plus'
let loading: any = null
const loadingConfig = { // ElLoading 的加载动画
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
}
console.log(localStorage.getItem("token"));
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 ?? '')) {
loading = ElLoading.service(loadingConfig)
}
// 在此处添加请求头等,如添加 token
const token = localStorage.getItem("token");
config.headers["Authorization"] = token ? "Bearer " + localStorage.getItem("token") : '';
return config;
},
(error: any) => {
loading.close()
Promise.reject(error);
}
)
// axios实例拦截响应
service.interceptors.response.use(
(response: any) => {
console.log(response, 'response');
loading.close() // 关闭加载动画
if (response.status === 200) { // 如果请求连接成功
if (response.data.code === 0 || response.config.responseType == 'blob'
) { // 如果请求的接口有返回数据
return Promise.resolve(response.data);
} else {
ElMessage({
message: response.data.message,
type: 'error',
})
return Promise.reject(response.data);
}
} else { // 请求失败 通过message 提示错误信息
ElMessage({
message: showMessage(response.status),
type: 'error',
})
return Promise.reject(response);
}
},
// 请求失败
(error: any) => {
loading.close()
const { response } = error;
if (response) {
// 请求已发出,但是不在2xx的范围
ElMessage({
message: showMessage(response.status),
type: 'error',
})
return Promise.reject(response.data);
} else {
ElMessage({
message: '网络连接异常,请稍后再试!',
type: '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},请检查网络或联系管理员!`;
};
更多推荐
已为社区贡献16条内容
所有评论(0)