AntDesign封装全局异常处理全局拦截器
场景
本文前端用的是阿里的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) => { // 打印每次请求的API console.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';
3 代码优化
优点:
- 省去每个业务异常处理
- 直接返回 data 内容
总结
加了全局异常处理类后,实际上是通过request
和response
拦截器实现的,少处理很多冗余代码,代码更加简洁和优雅了!!!
以上就是AntDesign封装全局异常处理全局拦截器的详细内容,更多关于AntDesign全局拦截器的资料请关注脚本之家其它相关文章!
相关文章
IDEA2020.2.3 "reading maven projects"卡住的问题
这篇文章主要介绍了IDEA2020.2.3 "reading maven projects"卡住的问题及问题原因探究,通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-10-10使用Spring的ApplicationEvent实现本地事件驱动的实现方法
本文介绍了如何使用Spring的ApplicationEvent实现本地事件驱动,通过自定义事件和监听器,实现模块之间的松耦合,提升代码的可维护性和扩展性。同时还介绍了异步事件和事件传递的相关知识2023-04-04Spring IoC学习之ApplicationContext中refresh过程详解
这篇文章主要给大家介绍了关于Spring IoC学习之ApplicationContext中refresh过程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论