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

相关文章

  • 理解Java中的内存泄露及解决方法示例

    理解Java中的内存泄露及解决方法示例

    这篇文章主要介绍了理解Java中的内存泄露及解决方法示例,本文讲解了Java内存管理机制、Java内存泄露、一般情况下内存泄漏的避免、复杂数据结构中的内存泄露问题等内容,需要的朋友可以参考下
    2015-03-03
  • 详解SpringBoot 统一后端返回格式的方法

    详解SpringBoot 统一后端返回格式的方法

    今天我们来聊一聊在基于SpringBoot前后端分离开发模式下,如何友好的返回统一的标准格式以及如何优雅的处理全局异常,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-05-05
  • Java字符串格式化Formatter和printf()的使用详解

    Java字符串格式化Formatter和printf()的使用详解

    这篇文章主要介绍了Java字符串格式化Formatter和printf()的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-05-05
  • JDK 7 新特性小结实例代码解析

    JDK 7 新特性小结实例代码解析

    这篇文章通过实例代码给大家介绍了JDK 7 新特性小结篇,感兴趣的朋友一起看看吧
    2018-03-03
  • 详细解读Java的Lambda表达式

    详细解读Java的Lambda表达式

    这篇文章主要介绍了详细解读Java的Lambda表达式,lambda 表达式 是Java 8新加入的新特性,它在Java中是引入了函数式编程这一概念,需要的朋友可以参考下
    2023-04-04
  • 通过图例了解IDEA引入JQuery实现步骤

    通过图例了解IDEA引入JQuery实现步骤

    这篇文章主要介绍了IDEA引入JQuery实现步骤图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 通过代码快速理解Java的三种代理模式

    通过代码快速理解Java的三种代理模式

    这篇文章主要介绍了通过代码快速理解Java的三种代理模式,代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式,即通过代理对象访问目标对象。,需要的朋友可以参考下
    2019-06-06
  • Java实现为PDF批量添加图片水印实用指南

    Java实现为PDF批量添加图片水印实用指南

    在数字化办公日益普及的今天,PDF文档作为信息传输和共享的重要载体,其安全性和版权保护变得尤为关键,本文将介绍如何使用Spire.PDF for Java轻松地在Java应用程序中为PDF文档添加图片水印,有需要的可以参考下
    2025-11-11
  • Java实现输出回环数(螺旋矩阵)的方法示例

    Java实现输出回环数(螺旋矩阵)的方法示例

    这篇文章主要介绍了Java实现输出回环数(螺旋矩阵)的方法,涉及java针对数组的遍历、判断、输出等相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • SpringBoot3如何集成Hazelcast

    SpringBoot3如何集成Hazelcast

    Hazelcast是一款优秀的开源内存数据网格平台,它能够提供分布式数据存储和缓存解决方案,通过与SpringBoot3的整合,开发者可以轻松实现分布式缓存、数据共享和会话管理等功能,Hazelcast的内存数据网格特性支持高性能的缓存系统,能够减少数据库访问次数,提升应用性能
    2024-10-10

最新评论