ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【AntDesign】封装全局异常处理-全局拦截器 [打印本页]
作者: tsx81428    时间: 2023-10-9 14:39
标题: 【AntDesign】封装全局异常处理-全局拦截器
目录

场景

本文前端用的是阿里的Ant-Design框架，其他框架也有全局拦截器，思路是相同，具体实现自行百度下吧
因为每次都需要调接口，都需要单独处理异常情况（code !=0），因此前端需要对后端返回的通用响应进行统一处理，比如
​                从 response取出data，进行返回，而不是每次返回全部json内容
1 定义全部异常处理类

新建新的ts类，比如globalRequest.ts
该类处理两个情况
更详细的 api 文档: https://github.com/umijs/umi-request
  1. /**
  2. * request 网络请求工具
  3. * 更详细的 api 文档: https://github.com/umijs/umi-request
  4. */
  5. import {extend} from 'umi-request'; // 需集成类
  6. import {message} from "antd"; // 提示框
  7. import {history} from "@@/core/history";
  8. import {stringify} from "querystring";
  10. /**
  11. * 配置request请求时的默认参数
  12. */
  13. const request = extend({
  14.     credentials: 'include', // 默认请求是否带上cookie
  15.     // requestType: 'form',
  16. });
  18. /**
  19. * 所有请求拦截器
  20. *  1. 在请求后端API前，统一做处理，比如 改变url参数，附带统一参数等
  21. */
  22. request.interceptors.request.use((url, options) => {
  23.     // 打印每次请求的API
  24.     console.log(`do request url = ${url}`);
  26.     return {
  27.         url,
  28.         options: {
  29.             ...options,
  30.             // headers: {},
  31.         },
  32.     };
  33. });
  35. /**
  36. * 所有响应拦截器
  37. *  1. 接收来自后端返回结果后，统一处理地方，比如异常处理提示
  38. */
  39. request.interceptors.response.use(async response => {
  40.         const res = await response.clone().json();
  41.         if (res.code === 0) {
  42.             // 成功，则取出 data内容 直接返回
  43.             return res.data;
  44.         }
  45.         if (res.code === 40100) {       // 未登录错误码
  46.             message.error('请先登录');
  47.             // 跳转登录地址
  48.             history.replace({
  49.                 pathname: '/user/login',
  50.                 search: stringify({
  51.                     redirect: location.pathname,
  52.                 }),
  53.             });
  54.         } else {
  55.             message.error(res.description)
  56.         }
  57.         return res.data;
  58.     }
  59. );
  61. export default request;
复制代码
2 替换request引用

将原来的request引用,替换成自己的request，在api.ts类中修改
原来
  1. import {request} from 'umi';
复制代码
替换成
  1. import request from '@/plugins/globalRequest';
复制代码

3 代码优化

优点：

总结

加了全局异常处理类后，实际上是通过request和response拦截器实现的，少处理很多冗余代码，代码更加简洁和优雅了！！！
本文由博客一文多发平台 OpenWrite 发布！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4