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全局拦截器的资料请关注脚本之家其它相关文章!

相关文章

  • Mybatis调用SQL Server存储过程的实现示例

    Mybatis调用SQL Server存储过程的实现示例

    在软件开发过程中,经常会使用到存储过程,本文就来介绍一下Mybatis调用SQL Server存储过程的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • SpringMVC之DispatcherServlet配置文件应该放在哪里呢

    SpringMVC之DispatcherServlet配置文件应该放在哪里呢

    这篇文章主要介绍了SpringMVC之DispatcherServlet配置文件应该放在哪里的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Java数组(Array)最全汇总(下篇)

    Java数组(Array)最全汇总(下篇)

    这篇文章主要介绍了Java数组(Array)最全汇总(下篇),本文章内容详细,通过案例可以更好的理解数组的相关知识,本模块分为了三部分,本次为下篇,需要的朋友可以参考下
    2023-01-01
  • webuploader+springmvc实现图片上传功能

    webuploader+springmvc实现图片上传功能

    这篇文章主要为大家详细介绍了webuploader+springmvc实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • springboot动态注入配置与docker设置环境变量的方法

    springboot动态注入配置与docker设置环境变量的方法

    这篇文章主要介绍了springboot动态注入配置与docker设置环境变量的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • java数据结构与算法之插入排序详解

    java数据结构与算法之插入排序详解

    这篇文章主要介绍了java数据结构与算法之插入排序,结合实例形式分析了java插入排序的概念、分类、原理、实现方法与相关注意事项,需要的朋友可以参考下
    2017-05-05
  • Spring boot多线程配置方法

    Spring boot多线程配置方法

    这篇文章主要为大家详细介绍了Spring boot多线程配置方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • SpringBoot 如何使用RestTemplate来调用接口

    SpringBoot 如何使用RestTemplate来调用接口

    这篇文章主要介绍了SpringBoot 如何使用RestTemplate来调用接口方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-10-10
  • java实现的正则工具类

    java实现的正则工具类

    这篇文章主要介绍了java实现的正则工具类,可用于针对电话号码、邮箱、QQ号码、QQ密码、手机号的正则验证功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Java如何使用Optional与Stream取代if判空逻辑(JDK8以上)

    Java如何使用Optional与Stream取代if判空逻辑(JDK8以上)

    这篇文章主要给大家介绍了关于Java如何使用Optional与Stream取代if判空逻辑(JDK8以上)的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Java具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09

最新评论