Error in v-on handler (Promise/async): “cancel“

在这里插入图片描述
出这样的错,需要使用try{}catch(error){} 进行捕获错误就行

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; 我封装的请求方法有什么问题,改进一下
03-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值