news 2026/6/14 1:49:49

Vue——Vue3 响应拦截与错误处理

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Vue——Vue3 响应拦截与错误处理

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

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

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

// 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
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/13 11:11:51

基于springboot的信息技术知识赛系统(11700)

有需要的同学,源代码和配套文档领取,加文章最下方的名片哦 一、项目演示 项目演示视频 二、资料介绍 完整源代码(前后端源代码SQL脚本)配套文档(LWPPT开题报告)远程调试控屏包运行 三、技术介绍 Java…

作者头像 李华
网站建设 2026/6/12 20:58:26

Vue——Vue3 Mock 数据与联调

背景问题: 开发阶段需要 Mock 数据。 方案思考: 使用 Mock 服务进行前后端并行开发。 具体实现: 使用 MSW (Mock Service Worker) 进行 Mock: // mock/index.js import { setupWorker } from msw/browser import { rest } from ms…

作者头像 李华
网站建设 2026/6/12 19:32:06

无线网络仿真:6G网络仿真_(10).6G与5G网络仿真对比

6G与5G网络仿真对比 在无线网络技术的发展过程中,5G网络的仿真和测试已经积累了大量的经验和工具。然而,随着6G技术的提出和发展,仿真技术也面临着新的挑战和机遇。本节将详细对比6G与5G网络仿真在原理、工具、性能指标和应用场景等方面的不同…

作者头像 李华
网站建设 2026/6/12 19:04:34

交通仿真软件:SUMO_(19).交通仿真中的大数据处理技术

交通仿真中的大数据处理技术 在交通仿真软件中,大数据处理技术是实现高效、准确仿真结果的关键。随着城市交通系统的复杂性和数据量的不断增加,如何有效地处理和利用这些数据成为了交通仿真领域的一个重要课题。本节将详细介绍如何在交通仿真软件中应用大…

作者头像 李华
网站建设 2026/6/12 16:27:07

Salesforce推出全新升级版Slackbot智能体

Salesforce公司今日正式发布了其大幅增强版的Slackbot人工智能助手,该助手内置于Slack平台中。该公司在去年10月举办的Dreamforce 2025大会上首次展示了这一升级版本。原版Slackbot主要专注于显示通知等相对简单的任务。新版本大幅扩展了该工具可以自动化的使用场景…

作者头像 李华
网站建设 2026/6/12 16:25:48

AI大模型30个核心术语详解,从小白到入门

文章按照AI产品的四层架构(基座层、模型层、应用层、用户层)详细解释了30个AI领域的重要术语。基座层涵盖算法、算力、数据相关概念;模型层介绍AI核心能力载体;应用层展示AI落地场景;用户层关注AI与用户交互。这些术语…

作者头像 李华