import axios from "axios"; import { ElMessage, ElLoading } from "element-plus"; // 全局状态 const pendingRequests = new Map() let loadingCount = 0 let loadingInstance = null const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 15000, }); // 生成唯一请求标识 const generateReqKey = (config) => { const { method, url, params, data } = config return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&') } // 请求拦截器 service.interceptors.request.use(config => { const requestKey = generateReqKey(config) // 取消重复请求 if (pendingRequests.has(requestKey)) { pendingRequests.get(requestKey)('取消重复请求') } config.cancelToken = new axios.CancelToken(cancel => { pendingRequests.set(requestKey, cancel) }) // 全局Loading控制 if (!config.silentLoading) { loadingCount++ if (loadingCount === 1) { loadingInstance = ElLoading.service({ lock: true, text: "加载中...", background: "rgba(0, 0, 0, 0.7)", }) } } // Token处理 const token = localStorage.getItem("token"); token && (config.headers.Authorization = `Bearer ${token}`) return config }) // 响应拦截器 service.interceptors.response.use( response => { const requestKey = generateReqKey(response.config) pendingRequests.delete(requestKey) // 关闭Loading if (!response.config.silentLoading) { loadingCount = Math.max(0, loadingCount - 1) if (loadingCount === 0 && loadingInstance) { loadingInstance.close() } } // 业务逻辑处理 const res = response.data if (res.code !== 200) { ElMessage.error(res.message || "操作失败") return Promise.reject(new Error(res.message || "Error")) } return res }, error => { // 清理请求记录 if (axios.isCancel(error)) { console.log('请求被取消:', error.message) return Promise.reject(error) } const requestKey = generateReqKey(error.config) pendingRequests.delete(requestKey) // 关闭Loading if (!error.config.silentLoading) { loadingCount = Math.max(0, loadingCount - 1) if (loadingCount === 0 && loadingInstance) { loadingInstance.close() } } // 增强错误处理 if (!error.response) { ElMessage.error("网络连接异常") } else { const status = error.response.status const messageMap = { 400: '请求参数错误', 401: () => { localStorage.removeItem('token') router.replace('/login') return '登录已过期' }, 403: '没有操作权限', 404: '资源不存在', 500: '服务器错误', 502: '网关错误', 503: '服务不可用' } const handler = messageMap[status] || (() => `请求失败 (${status})`) const message = typeof handler === 'function' ? handler() : handler ElMessage.error(message) } return Promise.reject(error) } ) export default service; 这是我封装的请求，我该如何使用