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

 更新时间:2023年10月07日 17:22:45   作者:Leovany  
这篇文章主要为大家介绍了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 内容

总结

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

以上就是AntDesign封装全局异常处理全局拦截器的详细内容,更多关于AntDesign全局拦截器的资料请关注脚本之家其它相关文章!

相关文章

  • Springboot实现多线程及线程池监控

    Springboot实现多线程及线程池监控

    线程池的监控很重要,本文就来介绍一下Springboot实现多线程及线程池监控,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • IDEA2020.2.3

    IDEA2020.2.3 "reading maven projects"卡住的问题

    这篇文章主要介绍了IDEA2020.2.3 "reading maven projects"卡住的问题及问题原因探究,通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-10-10
  • java之向linux文件夹下写文件无权限的问题

    java之向linux文件夹下写文件无权限的问题

    这篇文章主要介绍了java之向linux文件夹下写文件无权限的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • javaCV开发详解之收流器实现

    javaCV开发详解之收流器实现

    这篇文章主要介绍了javaCV开发详解之收流器实现,对javaCV有研究的同学,可以参考下
    2021-04-04
  • 使用Spring的ApplicationEvent实现本地事件驱动的实现方法

    使用Spring的ApplicationEvent实现本地事件驱动的实现方法

    本文介绍了如何使用Spring的ApplicationEvent实现本地事件驱动,通过自定义事件和监听器,实现模块之间的松耦合,提升代码的可维护性和扩展性。同时还介绍了异步事件和事件传递的相关知识
    2023-04-04
  • Java实现单词倒序输出

    Java实现单词倒序输出

    这篇文章主要介绍了Java实现单词倒序输出,帮助大家更好的理解和学习Java,感兴趣的朋友可以了解下
    2020-08-08
  • Spring IoC学习之ApplicationContext中refresh过程详解

    Spring IoC学习之ApplicationContext中refresh过程详解

    这篇文章主要给大家介绍了关于Spring IoC学习之ApplicationContext中refresh过程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Java如何导出zip压缩文件

    Java如何导出zip压缩文件

    这篇文章主要介绍了Java如何导出zip压缩文件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • SpringBoot+阿里云OSS实现在线视频播放的示例

    SpringBoot+阿里云OSS实现在线视频播放的示例

    这篇文章主要介绍了SpringBoot+阿里云OSS实现在线视频播放的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • mybatis-plus配置日志两种实现方式

    mybatis-plus配置日志两种实现方式

    这篇文章主要给大家介绍了关于mybatis-plus配置日志两种实现方式的相关资料,Mybatis-plus集成了日志框架,可以将程序运行时产生的日志进行记录,方便开发人员进行问题排查,需要的朋友可以参考下
    2023-09-09

最新评论