【AntDesign】封装全局异常处理-全局拦截器

[toc]

场景

本文前端用的是阿里的Ant-Design框架,其他框架也有全局拦截器,思路是相同,具体实现自行百度下吧

因为每次都需要调接口,都需要单独处理异常情况(code !=0),因此前端需要对后端返回的通用响应进行统一处理,比如

  • 业务异常提示

    从 response取出code,根据code中集中处理错误,比如提示用户未登录、参数为空等

  • 直接返回业务内容

​ 从 response取出data,进行返回,而不是每次返回全部json内容

1 定义全部异常处理类

新建新的ts类,比如globalRequest.ts

该类处理两个情况

  • 所有请求拦截器(request.interceptors.request

    在请求后端API前,统一做处理,比如 改变url参数,附带统一参数等

  • 所有响应拦截器(request.interceptors.response

    接收来自后端返回结果后,统一处理地方,比如异常处理提示

更详细的 api 文档: https://github.com/umijs/umi-request

/*** request 网络请求工具* 更详细的 api 文档: https://github.com/umijs/umi-request*/
import {extend} from 'umi-request'; // 需集成类
import {message} from "antd"; // 提示框
import {history} from "@@/core/history";
import {stringify} from "querystring";/*** 配置request请求时的默认参数*/
const request = extend({credentials: 'include', // 默认请求是否带上cookie// requestType: 'form',
});/*** 所有请求拦截器*  1. 在请求后端API前,统一做处理,比如 改变url参数,附带统一参数等*/
request.interceptors.request.use((url, options) => {// 打印每次请求的APIconsole.log(`do request url = ${url}`);return {url,options: {...options,// headers: {},},};
});/*** 所有响应拦截器*  1. 接收来自后端返回结果后,统一处理地方,比如异常处理提示*/
request.interceptors.response.use(async response => {const res = await response.clone().json();if (res.code === 0) {// 成功,则取出 data内容 直接返回return res.data;}if (res.code === 40100) {       // 未登录错误码message.error('请先登录');// 跳转登录地址history.replace({pathname: '/user/login',search: stringify({redirect: location.pathname,}),});} else {message.error(res.description)}return res.data;}
);export default request;

2 替换request引用

将原来的request引用,替换成自己的request,在api.ts类中修改

原来

import {request} from 'umi';

替换成

import request from '@/plugins/globalRequest';

image-20230924131519443

3 代码优化

优点:

  • 省去每个业务异常处理
  • 直接返回 data 内容

image-20230924133057291

总结

加了全局异常处理类后,实际上是通过requestresponse拦截器实现的,少处理很多冗余代码,代码更加简洁和优雅了!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/145278.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日一博 - 闲聊 Java 中的中断

文章目录 概述常见的中断问题中断一个处于运行状态的线程中断一个正在 sleep 的线程中断一个由于获取 ReentrantLock 锁而被阻塞的线程 如何正确地使用线程的中断标识JDK 的线程池 ThreadPoolExecutor 内部是如何运用中断实现功能的小结 概述 在 Java 中,中断是一种…

应用在手机触摸屏中的电容式触摸芯片

触控屏(Touch panel)又称为触控面板,是个可接收触头等输入讯号的感应式液晶显示装置,当接触了屏幕上的图形按钮时,屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置,可用以取代机械式的按钮面板&…

ElementUI实现登录注册啊,axios全局配置,CORS跨域

一,项目搭建 认识ElementUI ElementUI是一个基于Vue.js 2.0的桌面端组件库,它提供了一套丰富的UI组件,包括表格、表单、弹框、按钮、菜单等常用组件,具备易用、美观、高效、灵活等优势,能够极大的提高Web应用的开发效…

Lua函数

--函数--无参无返回值 function F1()print("F1函数") end F1() print("*****************")--有参 function F2(a)print("F2函数"..a) end F2(2) --如果传入参数和函数数量不一致 --不会报错只是补空 F2(1,2) print("*****************&quo…

【夏虫语冰】测试服务器端口是否打开(命令行、Python)

文章目录 1、简介2、命令行2.1 telnet2.1.1 工具简介2.1.2 工具配置2.1.3 工具使用 2.2 curl2.2.1 工具简介2.2.1 工具下载2.2.1 工具使用 2.3 wget2.3.1 工具简介2.3.2 工具下载2.3.2 工具使用 2.4 nc2.4.1 工具简介2.4.2 工具安装2.4.3 工具使用 2.5 ssh2.5.1 工具简介2.5.2 …

数据链路层 MTU 对 IP 协议的影响

在介绍主要内容之前,我们先来了解一下数据链路层中的"以太网" 。 “以太网”不是一种具体的网络,而是一种技术标准;既包含了数据链路层的内容,也包含了一些物理层的内容。 下面我们再来了解一下以太网数据帧&#xff…

[Machine learning][Part3] numpy 矢量矩阵操作的基础知识

很久不接触数学了,machine learning需要用到一些数学知识,这里在重温一下相关的数学基础知识 矢量 矢量是有序的数字数组。在表示法中,矢量用小写粗体字母表示。矢量的元素都是相同的类型。例如,矢量不包含字符和数字。数组中元…

Android Jetpack组件架构:ViewModel的原理

Android Jetpack组件架构:ViewModel的原理 导言 本篇文章是关于介绍ViewModel的,由于ViewModel的使用还是挺简单的,这里就不再介绍其的基本应用,我们主要来分析ViewModel的原理。 ViewModel的生命周期 众所周知,一般…

字节一面:深拷贝浅拷贝的区别?如何实现一个深拷贝?

前言 最近博主在字节面试中遇到这样一个面试题,这个问题也是前端面试的高频问题,我们经常需要对后端返回的数据进行处理才能渲染到页面上,一般我们会讲数据进行拷贝,在副本对象里进行处理,以免玷污原始数据&#xff0c…

力扣 -- 10. 正则表达式匹配

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:bool isMatch(string s, string p) {int ms.size();int np.size();//处理后续映射关系s s;//处理后续映射关系p p;vector<vector<bool>> dp(m1,vector<bool>(n1));//初始化dp[0][0]true…

支付宝支付模块开发

生成二维码 使用Hutool工具类生成二维码 引入对应的依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.5</version> </dependency><dependency><groupId>com.go…

公司知识库搭建步骤,知识库建设与运营的四个步骤分享

在知识管理方面&#xff0c;团队中的每一员&#xff0c;都像是一名独行侠&#xff0c;自己的知识&#xff0c;满足自己的需要&#xff0c;这其中&#xff0c;就造成了很多无意义的精力消耗。 公司知识库搭建必要性 比如&#xff0c;一名员工撰写一QA文档&#xff0c;并没有将它…

国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄

国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄 国庆《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书行将售罄

【CUDA编程概念】一、什么是bank conflict?

前言 搜了不少答案&#xff0c;大多是在避免Bank Conflict&#xff0c;很难找到一个关于Bank Conflict的详细定义&#xff0c;这里找了些资料来尝试解释下&#xff1b; 一、基础概念 先简单复习下相关概念 GPU调度执行流程&#xff1a; SM调度单位为一个warp&#xff08;一…

Linux:修改mvn命令使用的maven路径

要在 Linux 上更改 Maven 的版本&#xff0c;需要调整 PATH 环境变量以指向所需版本的 Maven 安装目录。 打开终端或命令行界面。 使用文本编辑器打开 /etc/profile 文件&#xff1a; vi /etc/profile在文件的末尾添加以下行&#xff0c;将 PATH 环境变量指向新的 Maven 安装目…

4项简化IT服务台任务的ChatGPT功能

近几个月&#xff0c;随着人工智能聊天机器人 ChatGPT 风靡全球&#xff0c;用户可以通过它生成脚本、文章、运动计划表等。同时&#xff0c;这项技术在各行各业都能够进行无穷无尽的应用&#xff0c;在本文中&#xff0c;我们将探讨这项现代技术如何帮助ITSM团队提升服务交付和…

面试题六:Promise的使用,一文详细讲解

含义 Promise是异步编程的一种解决方案&#xff0c;比传统的解决方案&#xff08;回调函数和事件&#xff09;更合理更强大。 所谓Promise&#xff0c;简单说就是一个容器&#xff0c;里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说&#xff0c;P…

【JavaEE初阶】 计算机是如何工作的

文章目录 &#x1f332;计算机发展史&#x1f38b;冯诺依曼体系&#xff08;Von Neumann Architecture&#xff09;&#x1f38d;CPU 基本工作流程&#x1f4cc;逻辑门&#x1f388;电子开关 —— 机械继电器(Mechanical Relay)&#x1f388;门电路(Gate Circuit)NOT GATE&…

ElasticSearch深度分页解决方案

文章目录 概要ElasticSearch介绍es分页方法es分页性能对比表方案对比 From/Size参数深度分页问题Scroll#性能对比向前翻页 总结个人思考 概要 好久没更新文章了&#xff0c;最近研究了一下es的深分页解决方案。和大家分享一下&#xff0c;祝大家国庆节快乐。 ElasticSearch介…

windows下python开发环境的搭建 python入门系列 【环境搭建篇】

在正式学习Python之前要先搭建Python开发环境。由于Python是跨平台的&#xff0c;所以可以在多个操作系统上进行编程 一、python的下载安装与配置 1、Python解释器 1. 要进行Python开发&#xff0c;首先需要Python解释器&#xff0c;这里说的安装Python就是安装Python解释器…