滨州市网站建设_网站建设公司_一站式建站_seo优化

背景问题：
需要统一处理响应和错误。

方案思考：
使用响应拦截器处理错误。

具体实现：
增强的错误处理机制：

// utils/error-handler.jsimport{ElMessage,ElNotification}from'element-plus'// 错误类型映射consterrorMessages={400:'请求参数错误',401:'未授权，请重新登录',403:'拒绝访问',404:'请求资源不存在',500:'服务器内部错误',502:'网关错误',503:'服务不可用',504:'网关超时'}// 网络错误映射constnetworkErrors={'Network Error':'网络连接异常','timeout':'请求超时','Request failed with status code':'服务器响应异常'}// 错误处理类exportclassErrorHandler{// 处理 HTTP 状态码错误statichandleHttpError(status,message){consterrorMsg=errorMessages[status]||`请求错误${status}`ElMessage.error(errorMsg)// 特殊状态码处理if(status===401){// 清除用户信息，跳转登录页this.handleUnauthorized()}returnerrorMsg}// 处理网络错误statichandleNetworkError(error){letmessage='网络连接异常'if(error.message){for(const[key,value]ofObject.entries(networkErrors)){if(error.message.includes(key)){message=valuebreak}}}ElMessage.error(message)returnmessage}// 处理业务错误statichandleBusinessError(code,message){// 根据业务错误码处理switch(code){case10001:message='登录已过期，请重新登录'this.handleUnauthorized()breakcase10002:message='权限不足'breakdefault:message=message||'业务处理失败'}ElMessage.error(message)returnmessage}// 处理未授权statichandleUnauthorized(){// 清除本地存储的用户信息localStorage.removeItem('token')localStorage.removeItem('user_info')// 跳转到登录页setTimeout(()=>{window.location.href='/login'},1000)}// 显示通知staticshowNotification(title,message,type='error'){ElNotification({title,message,type,duration:3000})}}exportdefaultErrorHandler

更新请求工具以集成错误处理：

// utils/request.js (错误处理增强版)importaxiosfrom'axios'import{useUserStore}from'@/stores/modules/user'import{requestGuard}from'./request-guard'importErrorHandlerfrom'./error-handler'// 创建 axios 实例constservice=axios.create({baseURL:import.meta.env.VITE_APP_BASE_API||'/api',timeout:15000,headers:{'Content-Type':'application/json;charset=UTF-8'}})// 请求拦截器service.interceptors.request.use(config=>{// 防止重复请求if(requestGuard.hasPendingRequest(config)){constsource=axios.CancelToken.source()config.cancelToken=source.token source.cancel('重复请求')returnPromise.reject(newaxios.Cancel('重复请求'))}requestGuard.addPendingRequest(config)// 添加认证 tokenconsttoken=localStorage.getItem('access_token')if(token){config.headers['Authorization']=`Bearer${token}`}// 添加请求时间戳if(config.method==='get'){config.params={...config.params,_t:Date.now()}}returnconfig},error=>{returnPromise.reject(error)})// 响应拦截器service.interceptors.response.use(response=>{requestGuard.removePendingRequest(response.config)constres=response.dataif(res.code&&res.code!==200){ErrorHandler.handleBusinessError(res.code,res.message)returnPromise.reject(newError(res.message||'Error'))}else{returnres}},error=>{requestGuard.removePendingRequest(error.config)if(axios.isCancel(error)){console.log('请求被取消:',error.message)returnPromise.reject(error)}if(error.response){// HTTP 状态码错误ErrorHandler.handleHttpError(error.response.status,error.response.statusText)}else{// 网络错误ErrorHandler.handleNetworkError(error)}returnPromise.reject(error)})exportdefaultservice