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

【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拦截器实现的,少处理很多冗余代码,代码更加简洁和优雅了!!!

相关文章:

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

[toc] 场景 本文前端用的是阿里的Ant-Design框架,其他框架也有全局拦截器,思路是相同,具体实现自行百度下吧 因为每次都需要调接口,都需要单独处理异常情况(code !0),因此前端需要对后端返回的…...

Visual Studio 代码显示空格等空白符

1.VS2010: 快捷键:CtrlR,W 2.VS2017、VS2019、VS2022: 工具 -> 选项 -> 文本编辑器 -> 显示 -> 勾选查看空白...

紫光同创FPGA图像视频采集系统,基于OV7725实现,提供工程源码和技术支持

目录 1、前言免责声明 2、设计思路框架视频源选择OV7725摄像头配置及采集动态彩条HDMA图像缓存输入输出视频HDMA缓冲FIFOHDMA控制模块HDMI输出 3、PDS工程详解4、上板调试验证并演示准备工作静态演示动态演示 5、福利:工程源码获取 紫光同创FPGA图像视频采集系统&am…...

京东大型API网关实践之路

概述 1、背景 京东作为电商平台,近几年用户、业务持续增长,访问量持续上升,随着这些业务的发展,API网关应运而生。 API网关,就是为了解放客户端与服务端而存在的。对于客户端,使开放给客户端的接口标准统…...

图像处理: 马赛克艺术

马赛克 第一章 马赛克的历史渊源 1.1 马赛克 艺术中的一种表面装饰,由紧密排列的、通常颜色各异的小块材料(如石头、矿物、玻璃、瓷砖或贝壳)组成。与镶嵌不同的是,镶嵌是将要应用的部件放置在已挖空以容纳设计的表面中&#xff0…...

postgresql-管理数据表

postgresql-管理数据表 创建表数据类型字段约束表级约束模式搜索路径 修改表添加字段删除字段添加约束删除约束修改字段默认值修改字段数据类型重命名字段重命名表 删除表 创建表 在 PostgreSQL 中,使用 CREATE TABLE 语句创建一个新表: CREATE TABLE …...

Llama2-Chinese项目:3.1-全量参数微调

提供LoRA微调和全量参数微调代码&#xff0c;训练数据为data/train_sft.csv&#xff0c;验证数据为data/dev_sft.csv&#xff0c;数据格式如下所示&#xff1a; "<s>Human: "问题"\n</s><s>Assistant: "答案举个例子&#xff0c;如下所…...

蓝桥等考Python组别十级001

第一部分:选择题 1、Python L10 (15分) 已知s = Hello!,下列说法正确的是( )。 s[1]对应的字符是Hs[2]对应的字符是ls[-1]对应的字符是os[3]对应的字符是o正确答案:B 2、Python L10 (15分) 运行下面程序,输入字符串“Banana”,输出的结果是&#x...

记录 Git 操作时遇到的问题及解决方案

目录 问题&#xff1a;git pull 时报错报错内容&#xff1a; ! [rejected] v1.0.3 -> v1.0.3 (would clobber existing tag)原因&#xff1a;本地 Git 仓库中已经存在名为 v1.0.3 和 v1.0.6 的标签了&#xff0c;而尝试从远程仓库&#xff08;GitHub&#xff09;拉取这些标签…...

第一届“龙信杯”电子数据取证竞赛Writeup

目录 移动终端取证 请分析涉案手机的设备标识是_______。&#xff08;标准格式&#xff1a;12345678&#xff09; 请确认嫌疑人首次安装目标APP的安装时间是______。&#xff08;标准格式&#xff1a;2023-09-13.11:32:23&#xff09; 此检材共连接过______个WiFi。&#x…...

Vue与React//双绑问题

Vue和React是两个目前最流行的前端框架&#xff0c;它们有一些区别主要区别如下&#xff1a; 响应式原理&#xff1a;Vue使用基于模板的方式进行双向绑定&#xff0c;其中使用了Vue自己实现的响应式系统。Vue能够通过追踪数据的依赖关系&#xff0c;自动更新DOM元素。而React采…...

信息安全第四周

社会工程学 社会工程学主要研究如何操纵人的心理和情感来获取机密信息或其他目标。它主要不是通过技术手段攻击计算机系统&#xff0c;而是通过心理学和人际交往技巧来欺骗人&#xff0c;使他们泄露密码、安全代码或其他敏感信息。社会工程学主要是一种安全风险&#xff0c;主要…...

机器学习基础概念与常见算法入门【机器学习、常见模型】

机器学习基础概念与算法 机器学习是计算机科学领域的一个分支&#xff0c;它致力于让计算机系统具备从数据中学习和改进的能力&#xff0c;而不需要显式地进行编程。与传统编程相比&#xff0c;机器学习有着根本性的不同之处。 机器学习与传统编程的不同 传统编程&#xff1…...

移动端 [Android iOS] 压缩 ECDSA PublicKey

移动端 [Android & iOS] 压缩 ECDSA PublicKey AndroidiOS 使用 Android KeyStore 和 iOS 的 Secure Enclave 提供的安全能力使用 P-256 来对 API 请求进行签名&#xff0c;服务器端再进行验证。 但是发现不论是 iOS 还是安卓都没有提供一个便捷的方式从 iOS 的SecKeyCopyE…...

Spring的配置Bean的方式

在Spring框架中&#xff0c;配置Bean有三种主要方式&#xff1a;自动装配、基于Java的显式配置和基于XML的显式配置。 1、自动装配&#xff1a; 自动装配是Spring容器根据Bean之间的依赖关系&#xff0c;自动将需要的Bean注入到目标Bean中。这是一种非常简便和快捷的配置方式&…...

安防监控/视频汇聚平台EasyCVR云端录像不展示是什么原因?该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…...

毛玻璃态登录表单

效果展示 页面结构组成 通过上述的效果展示可以看出如下几个效果 底部背景有三个色块并且效果是毛玻璃效果登录表单是毛玻璃效果登录表单的周围的小方块也是有毛玻璃效果并且与登录表单有层次效果 CSS3 知识点 filter 属性backdrop-filter 属性绝对定位属性动画属性 底部背…...

Java:使用 Graphics2D 类来绘制图像

目录 过程介绍创建一个 BufferedImage 对象创建一个 Graphics2D 对象绘制字符和干扰线将生成的图像保存到文件 示例代码 过程介绍 创建一个 BufferedImage 对象 首先创建一个 BufferedImage 对象来表示图像 创建一个 Graphics2D 对象 然后使用 createGraphics() 方法创建一…...

VUE2项目:尚品汇VUE-CLI脚手架初始化项目以及路由组件分析(一)

标题 环境VUE2目录publicassetscomponentsmain.jsbabel.config.jspackage.jsonvue.config.js 项目路由分析Header与Footer非路由组件完成Header示例 路由组件的搭建声明式导航编程式导航 Footer组件的显示与隐藏路由传递参数重写push和replace三级联动组件拆分附件 环境 前提要…...

输入网址input,提取标题和正文

https://m.51cmm.com/wz/WZnKubw1.html?share_token715beaff-33ef-466b-8b6c-092880b9a716&tt_fromcopy_link&utm_sourcecopy_link&utm_mediumtoutiao_android&utm_campaignclient_share - 【科学决策七步骤 - 希律心理】 - 今日头条 提取标题和正文input输…...

docker--redis容器部署及与SpringBoot整合

1. 容器化部署docker 拉取镜像创建数据目录data 及 配置目录conf创建配置文件redis.conf启动redis容器进入容器,进行Redis操作设置为自启动:docker update redis --restart=alwaysdocker pull redis:5.0.12docker run -d --rm --name my_redis -p 6379:6379 -v D:/docker/red…...

数据库:Hive转Presto(二)

继续上节代码&#xff0c;补充了replace_func函数&#xff0c; import re import os from tkinter import *class Hive2Presto:def __int__(self):self.t_funcs [substr, nvl, substring, unix_timestamp] \[to_date, concat, sum, avg, abs, year, month, ceiling, floor]s…...

docker安装apisix全教程包含windows和linux

docker安装apisix 一、Windows安装1、首先需要安装docker和docker compose&#xff0c;如果直接安装docker desktop&#xff0c;会自动安装docker compose。2、重新启动电脑3、访问 Docker 的下载&#xff08;[https://www.docker.com/products/docker-desktop](https://www.do…...

【C++进阶】:C++11

C11 一.统一列表的初始化1.{}初始化2.initializer_list 二.声明1.decltype2.nullptr 三.右值引用和移动语义1.左值和右值1.转义语句2.完美转发 四.可变参数模板1.基本概念2.STL里emplace类接口 五.lambda表达式六.新的类功能 一.统一列表的初始化 1.{}初始化 在C98中&#xf…...

9.30消息队列实现进程之间通信方式代码,现象

服务端 #include <myhead.h>#define ERR_MSG(msg) do{\fprintf(stderr,"__%d__:",__LINE__);\perror(msg);\ }while(0)typedef struct{ long msgtype; //消息类型char data[1024]; //消息正文 }Msg;#define SIZE sizeof(Msg)-sizeof(long)int main(int argc…...

【Oracle】Oracle系列之十三--游标

文章目录 往期回顾前言1. 游标的定义2. 游标的类型&#xff08;1&#xff09;显式游标&#xff08;2&#xff09;隐式游标 3. 游标的应用&#xff08;1&#xff09;基本用法&#xff08;2&#xff09;数据处理&#xff08;3&#xff09;更新数据&#xff08;4&#xff09;注意事…...

【Linux】——基操指令(二)

个人主页 代码仓库 C语言专栏 初阶数据结构专栏 Linux专栏 LeetCode刷题 算法专栏 目录 前言 man指令 cp 指令 mv指令 echo指令 cat指令 more指令 less指令 head和tail指令 head指令 tail指令 前言 上篇文章给大家讲解了Linux环境下的一点基操指令&#xf…...

如何用Angular和NativeScript开发IOS程序?

要使用Angular和NativeScript开发iOS应用程序&#xff0c;您可以按照以下步骤进行操作&#xff1a; 安装必要的工具&#xff1a; 确保您已经安装了Node.js和npm&#xff08;Node.js包管理器&#xff09;。 安装Angular CLI&#xff1a;如果尚未安装&#xff0c;请运行以下命令…...

python 使用 scapy 扫描内网IP或端口

地址信息在IP层, 可以利用 ICMP 或 ARP 协议数据包探测IP信息. ICMP协议可以利用ping工具发送数据包, 但是防火墙有可能禁止ICMP, 无法有效探测, 可以考虑使用ARP探测. 利用ICMP协议探测内网IP def ping_ip(ip_fex):# 扫描范围: 128~254for i in range(128, 255):ip f{ip_fe…...

14:00面试,14:08就出来了,问的问题有点变态

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%,…...

html做调查问卷网站/360网站推广客服电话

HTML(javascript)或其他静态html技术中是否有能够&#xff1a;停止页面加载(如果浏览器尚未下载)停止页面渲染(从放置代码的位置开始)停止执行javascript(从放置代码的位置开始)简单地说&#xff0c;是否有类似的代码window.StopWhateverBelow()让浏览器完全忽略代码下面的内容…...

国外设计网站怎么打开/bt磁力种子

希望你的 2019 也一样精彩。2019 年的第一个月已经过半&#xff0c;不知道你还会不会习惯性地写错日期。有人桌上已经摆着新日历&#xff0c;不过更多人当然还是用手机来看日期。新一年新征程&#xff0c;我们给大家挑选了几款有趣的日历应用&#xff0c;希望你的 2019 也一样精…...

预约营销型网站建设专家/成人短期就业培训班

敢在今年提裸辞的人&#xff0c;都是勇士。 这是最近笔者在就业话题下看到得最多的一句话。几年前&#xff0c;逃离北上广深的话题火了&#xff0c;也随之而来带起了一股裸辞的风潮。“世界这么大&#xff0c;我想去看看。”成为了年轻人追求自由的目标。 而今年&#xff0c;…...

京东云免费建wordpress/内蒙古seo

一、面向对象编程 ​ 面向过程编程&#xff1a;关注于解决问题的方法、步骤。 ​ 面向对象编程&#xff1a;关注于谁能解决问题(类)&#xff0c;以及解决问题需要的数据(成员变量)&#xff0c;以及解决问题需要的技能(成员函数)。 ​ 抽象&#xff1a;想象出一个能解决问题的…...

中国核工业第五建设公司网站/泉州关键词快速排名

https://wenku.baidu.com/view/7bdc4a446c85ec3a86c2c532.html https://wenku.baidu.com/view/c4195a202a160b4e767f5acfa1c7aa00b52a9de5.html?rec_flagdefault&sxts1587691004853...

摄像机怎么在自己家网站做直播/公司做网络推广怎么做

只需要在工程上右键&#xff0c;”Add Frameworks support...“&#xff0c;然后选择Maven即可转载于:https://www.cnblogs.com/qiang-cnblog/p/9802483.html...