当前位置：首页 > news >正文

从一个Bug谈前端响应拦截器的应用

news 来源：原创 2025/7/18 12:01:00

一、问题场景

今天在开发商品管理系统时，遇到了一个有趣的问题：当添加重复的商品编号时，页面同时弹出了两条 "商品编号已存在" 错误提示：
在这里插入图片描述
这个问题暴露了前端错误处理机制的混乱，让我们从这个问题出发，深入了解响应拦截器的应用。

二、问题分析

原始代码

// 响应拦截器
instance.interceptors.response.use(result => {if (result.data.code === 1) {return result.data;}ElMessage.error(result.data.msg || '服务异常');return Promise.reject(result.data);},err => {if(err.response.status === 401){ElMessage.error('请先登录！')router.push('/login')}else{ElMessage.error('服务异常');}return Promise.reject(err);}
)// 业务代码
const saveProduct = async () => {try {// ... 表单验证等代码 ...const res = await productAddService(submitData)if (res.code === 1) {ElMessage.success('添加成功')// ... 其他成功处理 ...} else {ElMessage.error(res.msg || '添加失败')}} catch (error) {ElMessage.error(error.msg || '商品编号已存在')}
}

错误提示重复的原因

后端返回数据：{code: 0, msg: “商品编号已存在”, data: null}
响应拦截器发现 code !== 1，显示错误消息并 reject
业务代码的 catch 块又显示了一次错误消息

三、解决方案

统一的响应拦截器处理

// src/utils/request.js
instance.interceptors.response.use(result => {// 业务成功if (result.data.code === 1) {return result.data;}// 业务失败，统一处理错误提示ElMessage.error(result.data.msg || '操作失败');return Promise.reject(result.data);},err => {// 处理HTTP错误if(err.response.status === 401){ElMessage.error('请先登录！')router.push('/login')}else{ElMessage.error('服务异常');}return Promise.reject(err);}
)

简化业务代码

const saveProduct = async () => {try {await productForm.value.validate()const submitData = {...productModel.value,price: Number(productModel.value.price)}const service = isEditMode.value ? productEditService : productAddServiceconst res = await service(submitData)// 只处理成功情况ElMessage.success(`${isEditMode.value ? '编辑' : '添加'}成功`)dialogVisible.value = falseproductList()resetProductModel()} catch (error) {// 错误已在拦截器中处理，这里不需要重复处理return}
}

四、响应拦截器

什么是响应拦截器

这里我进行一个类比，想象你在一个公司工作：

你就是业务部门（前端业务代码）
前台小姐姐就是响应拦截器
各种快递就是服务器返回的数据

场景一：正常快递

快递 → 前台验收 → 签字 → 转交给你

对应代码：

// 响应拦截器（前台小姐姐）
axios.interceptors.response.use(response => {if (response.data.code === 1) {  // 检查快递是否完好return response.data          // 转交给业务部门}}
)// 业务代码（你）
const res = await getProductList()  // 直接收到处理好的快递
console.log(res.data)              // 使用快递内容

场景二：问题快递

坏快递 → 前台拒收 → 你完全不用处理

对应代码：

// 响应拦截器（前台小姐姐）
axios.interceptors.response.use(response => {if (response.data.code !== 1) {  // 发现快递有问题ElMessage.error('快递有问题')  // 通知你快递有问题return Promise.reject()       // 直接拒收，不给你添麻烦}}
)// 业务代码（你）
try {const res = await getProductList()// 只需要处理正常情况
} catch {// 问题已经被前台处理了，你不用管
}

响应拦截器就像这个"前台接待"，它在服务器响应返回到我们的业务代码之前，对所有响应进行统一的处理。

为什么需要响应拦截器？

没有响应拦截器时：

// 每个业务请求都需要重复处理这些情况
const getProductList = async () => {try {const res = await axios.get('/api/products')if (res.data.code === 1) {  // 成功return res.data.data} else if (res.data.code === 401) {  // 未登录ElMessage.error('请先登录')router.push('/login')} else {  // 其他错误ElMessage.error(res.data.msg)}} catch (error) {ElMessage.error('网络错误')}
}const addProduct = async () => {try {const res = await axios.post('/api/product/add')// 又要重复上面的代码...} catch (error) {// 又要重复上面的代码...}
}

使用响应拦截器后:

// 统一的响应处理
axios.interceptors.response.use(response => {// 统一处理成功和失败if (response.data.code === 1) {return response.data}// 统一处理未登录if (response.data.code === 401) {ElMessage.error('请先登录')router.push('/login')return Promise.reject(response.data)}// 统一处理错误提示ElMessage.error(response.data.msg)return Promise.reject(response.data)},error => {// 统一处理网络错误ElMessage.error('网络错误')return Promise.reject(error)}
)// 业务代码变得简洁
const getProductList = async () => {try {const res = await axios.get('/api/products')return res.data  // 只需处理成功的情况} catch (error) {// 错误已经在拦截器中处理过了}
}

四、请求流程图

请求发起 → 请求拦截器 → 服务器 → 响应拦截器 → 业务代码

五、最佳实践总结

响应拦截器职责
- 统一处理响应数据格式
- 统一处理错误提示
- 处理特殊状态码（如401未登录）
- 转换服务端数据结构（如果需要）
业务代码职责
- 关注业务逻辑
- 处理成功场景
- 可以选择性地处理特定错误
- 不重复错误提示
错误处理原则
- 统一入口处理错误
- 避免重复提示
- 提供清晰的错误信息
- 合理使用 Promise.reject()

六、扩展应用

处理登录失效

if (err.response.status === 401) {ElMessage.error('登录已过期，请重新登录')router.push('/login')
}

处理网络错误

if (!error.response) {ElMessage.error('网络连接失败，请检查网络设置')
}

处理特定业务错误

if (result.data.code === 100001) {// 处理特定业务错误码handleSpecialError(result.data)return Promise.reject(result.data)
}

七、总结

响应拦截器就像一个尽职尽责的前台，帮你处理了所有烦琐的检查工作，让我们可以专注于核心业务。

从一个Bug谈前端响应拦截器的应用

一、问题场景今天在开发商品管理系统时，遇到了一个有趣的问题：当添加重复的商品编号时，页面同时弹出了两条 "商品编号已存在" 错误提示： 这个问题暴露了前端错误处理机制的混乱，让我们从这个问题出发&…...

编程日记 2025/7/18 12:01:00

在做题中学习（78）：数组中第K个最大元素

解法：快速选择算法说明：堆排序也是经典解决topK问题的算法，但时间复杂度为：O(NlogN) 而将要介绍的快速选择算法的时间复杂度为: O(N) 先看我的前两篇文章，分别学习：数组分三块，随机选择基准…...

编程日记 2025/7/18 11:52:55

药剂学试卷

1【单选题】在倍氯米松气雾剂中加入四氟乙烷是用作 C A、助悬剂 B、乳化剂 C、抛射剂 D、防腐剂 2【单选题】一步制粒机可完成的工序是 B A、粉碎→混合→制粒→干燥 B、混合→制粒→干燥 C、过筛→制粒→混合→干燥 D、过筛→制粒→混合 3【单选题】小檗碱片包…...

编程日记 2025/7/18 11:53:56

3D 生成重建020-Gaussian Grouping在场景中分割并编辑一切

3D 生成重建020-Gaussian Grouping在场景中分割并编辑一切文章目录 0 论文工作1 方法2 实验结果 0 论文工作最近提出的高斯Splatting方法实现了高质量的实时三维场景新视角合成。然而，它仅仅关注外观和几何建模，缺乏细粒度的物体级场景理解。为了解决…...

编程日记 2025/7/18 10:15:00

力扣143.重排链表

题目描述题目链接143. 重排链表给定一个单链表 L 的头节点 head ，单链表 L 表示为： L0 → L1 → … → Ln - 1 → Ln请将其重新排列后变为： L0 → Ln → L1 → Ln - 1 → L2 → Ln - 2 → … 不能只是单纯的改变节点内部的值&#xff…...

编程日记 2025/7/18 11:52:55

本文介绍麒麟信安服务器系统（kylinsec）的安装。

本文介绍麒麟信安服务器系统（kylinsec）的安装。下载在开源欧拉官方找到商业版本的介绍找到相关产品： https://www.openeuler.org/zh/download/commercial-release/ 麒麟信安kylinsec下载地址： https://mirrors.kylinsec.com…...

编程日记 2025/7/14 1:34:07

单链表---回文结构

判断某一个单链表是否是回文结构，是返回true、不是返回false。所谓的回文结构，就是类似对称结构： 对于奇数与偶数个结点均是如此。那么就有思路：①找到链表的中间结点②逆置后半部分或前半部分③比较两者 ①找中间结点&#x…...

编程日记 2025/7/18 11:39:50

Java --- 反射

目录一.什么是反射？ 二.反射的核心方法和功能： 1.获取类的元信息： 2. 动态实例化对象： 3. 访问字段（包括私有字段）： 4. 调用方法（包括私有方法）： 5.…...

编程日记 2025/7/18 11:40:56

python编程Day12-属性和方法的分类

私有和公有在python中定义类的时候，可以给属性和方法设置访问权限，即规定在什么地方可以使用。权限一般分为两种：公有权限、私有权限公有权限定义：直接定义的属性和方法就是公有的特点： 可以在任何地方访问和使…...

编程日记 2025/7/15 4:47:54

C#实现TCP客户端和服务器

本文将介绍如何使用C#实现TCP客户端和服务器的基本功能，客户端与服务器可以相互发送消息。效果展示服务器端实现首先，我们实现TCP服务器。以下是服务器端所需的类和代码： using System; using System.Collections.Generic; using Syste…...

编程日记 2025/7/13 11:20:24

数据库编程: JDBC 中数据库驱动包的安装,配置及引用

目录驱动包的下载安装 1. 去oracle 官方网站下载 2. github 的开源软件 3. 中央仓库(推荐使用这个) 驱动包的配置及引用 1. 第一步: 打开idea, 在 idea 中创建新的项目 2. 然后我们要在 jdbc_1 目录下创建一个新的目录包 3. 最后引入MySQL 的驱动包, 作为项目的依赖尾…...

编程日记 2025/7/14 4:58:01

mx linux 在konsole终端中无法输入中文的解决方法

在mx linux系统中，浏览器可以正常输入中文，但是终端窗口中无法输入中文的解决方法，可以通过以下步骤安装 fcitx - frontend - qt5 组件： 1. 打开终端。你可以通过系统菜单或者快捷键（如 Ctrl Alt T ）来…...

编程日记 2025/7/14 5:18:04

./configure 安装ngnix的命令

./configure 是一个在 Unix 和类 Unix 系统中常用的 shell 脚本命令，主要用于配置软件源代码包，以便进行编译和安装。这个命令通常在从源代码编译软件之前执行，它会自动检测系统的配置并生成适合该系统的 Makefile。以下是 ./configure 脚本…...

编程日记 2025/7/18 11:54:55

网络安全之接入控制

网络安全之接入控制身份鉴别定义:验证主题真实身份与其所声称的身份是否符合的过程，主体可以是用户、进程、主机。同时也可实现防重放，防假冒。分类:单向鉴别、双向鉴别、三向鉴别。主题身份标识信息:密钥、用户名和口令、证书和私钥 I…...

编程日记 2025/7/16 18:00:24

2.1 关系模型

关系模型的基本概念关系：二维表，通常在数据库中表现为一个表； 属性：关系中的一个列即为关系的一个属性； 域： 每个属性的取值范围即为该属性的域； 元组：关系中的一个行是一个元组…...

编程日记 2025/7/15 19:39:41

深入浅出 Go 语言 sync包中的互斥锁、条件变量

深入浅出 Go 语言 sync包中的互斥锁、条件变量引言在并发编程中，多个 Goroutine 同时访问共享资源可能会导致数据竞争（Race Condition），进而引发程序的不一致性或崩溃。为了确保并发程序的正确性和稳定性，Go 语言提…...

编程日记 2025/7/18 5:24:20

利用Python实现子域名简单收集

免责申明本文仅是用于学习研究子域名信息收集，请勿用在非法途径上，若将其用于非法目的，所造成的一切后果由您自行承担，产生的一切风险和后果与笔者无关；本文开始前请认真详细学习《‌中华人民共和国网络安全法》【学法…...

编程日记 2025/7/18 11:48:13

npm发布插件到私有仓库保姆级教程

在开发项目的过程中，我们经常需要安装插件依赖，那么怎么把自己开发的组件封装成一个插件，并发布到npm 插件市场或者上传到私有仓库里面呢？今天总结下自己发布插件到私有仓库的记录： 一、创建组件执行命令创建一个空…...

编程日记 2025/7/15 23:44:48

利用Java easyExcel库实现高效Excel数据处理

在Java应用程序中，处理Excel文件是一项常见任务，尤其是在需要读取、写入或分析大量数据时。easyExcel是一个基于Java的高性能Excel处理库，它提供了简洁的API和优化的性能，以简化Excel文件的处理。本文将指导您如何使用easyExcel库…...

编程日记 2025/7/3 20:00:32

基于Springboot的校园交友网站设计与实现

1.1 管理信息系统概述管理信息系统是计算机在信息管理领域的一种实用技术。通过运用管理科学、数学和计算机应用的原理及方法，在符合软件工程规范的原则下，形成一套完整的理论和方法体系。是一个以人、计算机和其他外部设备组成的可以进行信息的收集、…...

编程日记 2025/7/16 6:07:18

android studio 读写文件操作（应用场景三）

android studio版本：2023.3.1 patch2 例程：filesaveandread 其实我写这个都是我记录我要做后个数独小游戏，每一个都是为了解决一个问题。即是分享也是备忘，反正我什么都不会，就是一顿瞎改，不行就研究。这…...

编程日记 2025/7/18 11:59:55

小程序 —— Day1

组件 — view和scroll-view view 类似于HTML中的div，是一个块级元素案例：通过view组件实现页面的基础布局 scroll-view 可滚动的视图区域，用来实现滚动列表效果案例：实现纵向滚动效果 scroll-x属性：允许横向滚动…...

编程日记 2025/7/15 23:45:55

使用 PyTorch 和 Horovod 来编写一个简单的分布式训练 demo

使用 PyTorch 和 Horovod 来编写一个简单的分布式训练 demo，可以帮助你理解如何在多GPU或多节点环境中高效地训练深度学习模型。Horovod 是 Uber 开发的一个用于分布式训练的框架，它支持 TensorFlow、Keras、PyTorch 等多个机器学习库。下面是一个基于 P…...

编程日记 2025/7/14 11:39:20

【Linux】以 CentOS 为例备份与恢复/home分区，并调整分区容量

在 Linux 系统中，这里举例对 /home 目录进行备份、重建和恢复操作，并调整分区大小、更换文件系统或修复损坏的分区等。〇、前提条件确认文件系统类型为 xfs。确认 /home 目录确实没有重要数据，或者已经做好了数据备份。确保在执行这些…...

编程日记 2025/7/18 11:47:41

OpenAI 12Days 第二天强化微调（RFT）：推动语言模型在科学研究中的应用

OpenAI 12Days 第二天强化微调（RFT）：推动语言模型在科学研究中的应用文章目录 OpenAI 12Days 第二天强化微调（RFT）：推动语言模型在科学研究中的应用RFT的工作原理与应用领域案例研究：基因突变…...

编程日记 2025/7/12 21:43:58

神经网络的梯度反向传播计算过程，举例说明

目录神经网络的梯度反向传播计算过程网络结构权重和偏置激活函数前向传播损失函数反向传播参数更新举例神经网络的梯度反向传播计算过程为了说明神经网络的梯度反向传播计算过程，我们考虑一个简单的全连接网络，该网络有一个输入层、一个隐藏层和一个输出…...

编程日记 2025/7/18 12:00:59

定点数乘法：补码一位算法（booth算法）

方法初始化将被乘数A放在寄存器A中。将乘数B放在寄存器B中，并在最低位添加一个额外的位Q(-1) 0。结果寄存器P初始化为0，长度为2n位。迭代过程（重复n次） 对于i从0到n-1： 检查乘数B的最后两位（B 和…...

编程日记 2025/7/18 11:57:40

robots.txt

robots.txt 文件是网站管理者用来告知搜索引擎爬虫（也称为机器人或蜘蛛）哪些页面可以抓取，哪些页面不应该被抓取的一种文本文件。它位于网站的根目录下，并且文件名必须全部小写。这个文件对于SEO（搜索引擎优化&#xf…...

编程日记 2025/7/18 11:44:31

如何用 JavaScript 操作 DOM 元素？

如何用 JavaScript 操作 DOM 元素？——结合实际项目代码示例讲解在前端开发中，DOM（文档对象模型）操作是与页面交互的核心。通过 DOM 操作，开发者可以动态地修改页面内容、响应用户交互、控制样式等。JavaScript 提供…...

编程日记 2025/7/13 21:24:33

vue3使用后端传递的文件流进行文件预览

文章目录一、注意事项1、responseType设置为：arraybuffer2、Blob设置type，来源于后台封装的response.headers[content-type]3、使用encodeURIComponent()，避免符号影响文件名二、java接口一、注意事项 1、responseType设置为&#xff1…...

编程日记 2025/7/18 11:59:55

ubuntu20.04设置远程桌面

安装xrdp sudo apt install xrdp 2、检查xrdp状态 sudo systemctl status xrdp3、（若为Ubuntu 20）添加xrdp至ssl-cert sudo adduser xrdp ssl-cert 4、重启服务 sudo systemctl restart xrdp最后可以远程了，注意一个账号只能一个登录...

编程日记 2025/7/18 12:01:00

在vue3里使用scss实现简单的换肤功能

实现的换肤功能：主题色切换、亮色模式和暗黑模式切换、背景图切换主题色就是网站主色，可以配置到组件库上面；亮色模式又分为两种风格：纯白风格和背景图风格，不需要背景图的话可以删掉这部分逻辑和相关定义&#xff1b…...

编程日记 2025/7/14 10:48:28

flyway执行sql遇到变量执行报错解决

前两天在公司使用flyway工具执行sql时，开发写的sql里面有变量，于是这个flyway工具不识别这个变量直接报错，不接着往下执行了。报错信息如下： flyway工具执行sql报错 information: No value provided for placeholder: ${ep1} 于是…...

编程日记 2025/7/16 15:15:14

解谜类游戏《迷失岛2》等如何抽象出一套通用高效开发框架？

解谜类游戏以精妙的谜题设计和引人入胜的故事叙述为特点，考验着玩家的智慧与观察力。《迷失岛2》与《南瓜先生2九龙城寨》正是这一领域的佳作。游戏以独特的艺术风格和玩法设计吸引了大量玩家，而它们背后隐藏着一套强大的框架。上海胖布丁游戏的技术总…...

编程日记 2025/7/15 5:46:21

Ant Design Vue v4版本如何解决1px没有被postcss-px2rem转成rem的问题

背景说明如果你的 Ant Design Vue 项目有要做适配的需求，那首先要选择一种适配方案。笔者选择的是用 postcss-px2rem 进行适配。笔者在配置了 postcss-px2rem的相关配置后，发现 postcss-px2rem 没有对 Ant Design Vue 进行适配。在网上看了一些文章之后…...

编程日记 2025/7/15 8:18:55

【系统架构设计师论文】云上自动化运维及其应用

随着云计算技术的迅猛发展，企业对云资源的需求日益增长。为了应对这一挑战，云上自动化运维（CloudOps）应运而生，它结合了DevOps理念和技术，通过自动化工具和流程来提高云环境的管理效率和服务质量。本文将探讨云上自动化运维的主要衡量指标，并详细介绍一个实际项目中如何…...

编程日记 2025/7/10 13:31:38

河南地质灾害资质办理的政策

一、资质分类资质等级： 甲级资质：由自然资源部审批管理，适用于承担大型地质灾害防治项目。乙级资质：由省、自治区、直辖市自然资源主管部门审批管理，适用于承担中型地质灾害防治项目。丙级资质：由省…...

编程日记 2025/7/13 9:23:29

单例模式--懒汉饿汉模式

一.啥是单例模式? 先介绍一下设计模式： 设计模式好⽐象棋中的 "棋谱". 红⽅当头炮, ⿊⽅⻢来跳. 针对红⽅的⼀些⾛法, ⿊⽅应招的时候有⼀些固定的套路. 按照套路来⾛局势就不会吃亏. 软件开发中也有很多常⻅的 "问题场景". 针对这些问题…...

编程日记 2025/7/15 1:06:36

HDD 2025年技术趋势深度分析报告

随着数据量的指数级增长以及人工智能（AI）、物联网（IoT）、云计算和视频监控等领域的需求激增，硬盘驱动器（HDD）行业正面临着前所未有的挑战与机遇。本报告旨在深入剖析2025年HDD技术的发展方向&am…...

编程日记 2025/7/15 1:17:30

关于uni-app的uni.showModal和indexOf的使用

这里使用showModal时，这个里面的content需要使用到字符串的形式，不能用到number类型 uni.showModal({title: 提示,content: "hello",success: function (res) {if (res.confirm) {console.log(用户点击确定);} else if (res.cancel) {console…...

编程日记 2025/7/14 17:14:34

Spring Data Elasticsearch

简介说明 spring-data-elasticsearch是比较好用的一个elasticsearch客户端，本文介绍如何使用它来操作ES。本文使用spring-boot-starter-data-elasticsearch，它内部会引入spring-data-elasticsearch。 Spring Data ElasticSearch有下边这几种方法操作El…...

编程日记 2025/7/18 11:53:55

汇编语言简要记录-1

汇编语言与汇编指令汇编语言的主题是汇编指令汇编指令与机器指令的差别在于指令的表示方法上 1、汇编指令是机器机器指令便于记忆的书写格式 2、汇编指令是机器指令的助记符 ag：机器指令 1000100111011000操作：将寄存器BX的值送到AX中汇编指令 MOV …...

编程日记 2025/7/12 4:59:34

Java程序猿搬砖笔记(十七)

文章目录 MySQL触发器ElasticSearch按日期分组查询每天的文档数量MySQL中order by排序将null排在最前或者最后面swagger3.0默认访问路径swagger3.0模块化配置MySQL中要少用UNION，多用UNION ALLElasticSearch Bucket & Metric聚合分析及嵌套聚合Mysql case when做…...

编程日记 2025/7/18 11:48:14

代码设计：设计模式：观察者模式

文章目录定义类结构应用总结定义实现响应式编程的代码设计，即触发事件或数据变化时，将数据从被观察者类通过观察器传递给观察者处理，即被观察者类间接调用观察者类的方法处理事件或数据类结构被观察者类、观察器类、观察者类被观察…...

编程日记 2025/7/13 15:00:47

第32天：安全开发-JavaEE应用Servlet路由技术JDBCMybatis数据库生命周期

时间轴： 32天主要学习内容： 1、JavaEE-HTTP-Servlet技术 2、JavaEE-数据库-JDBC&Mybatis java技术使用历史（2023 ）： JavaEE-HTTP-Servlet&路由&周期: java学习范围： 3、Java: 功能:数据…...

编程日记 2025/7/18 1:15:32

如何使用Apache HttpClient来执行GET、POST、PUT和DELETE请求

Apache HttpClient 是一个功能强大且灵活的库，用于在Java中处理HTTP请求。它支持多种HTTP方法，包括GET、POST、PUT和DELETE等。本教程将演示如何使用Apache HttpClient来执行GET、POST、PUT和DELETE请求。 Maven依赖要使用Apache HttpClient&…...

编程日记 2025/7/17 22:29:36

Next.js 系统性教学：加载界面、重定向与路由分组

更多有关Next.js教程，请查阅： 【目录】Next.js 独立开发系列教程-CSDN博客目录 1. 加载界面与流式渲染 1.1 加载界面 (loading.js) 1.2 流式渲染 2. 路由重定向 2.1 基于服务器的重定向 2.2 动态重定向 2.3 中间件中的重定向 3. 路由分组 3.1…...

编程日记 2025/7/14 22:47:36