axios结合ts使用,取消请求,全局统一获取数据,抛出错误信息

通常在开发时,后端向前端返回的数据可以如下:

  • 1 使用restful api充分利用http状态码,然后在data中追加code字段,请求成功返回200,请求失败返回404,401,500等状态码,并且在code字段中给出详细的字符串信息
  • 2 再包一层,所有请求不论失败还是成功状态返回均为200,然后在code中,返回实际的成功或失败的原因(可以是number,也可以是string)

以下以第二种为例:

type Content = Array<unknown> | Record<string, unknown> | null;interface CustomResponse<T extends Content = Content> {code: number;//具体的code,这里依然使用的400,401等200表示成功data: T;msg: string;
}export enum Method {/** Get请求 */Get = 'GET',/** Post请求 */Post = 'POST',/** Put请求 */Put = 'PUT',/** Delete请求 */Delete = 'DELETE',
}
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { localStorage } from '@/storage';
import { Method } from '@/enum';
import useStore from '@/store';
import qs from 'qs';//  白名单列表,用于直接显示前端定义的错误
const whiteList: string[] = [];const requests: any[] = [];
const cancelRequest = (config: any, cancelAll = false) => {for (const req in requests) {if (!cancelAll) {if (requests[req].url === `${config.method}-${config.url}`) {requests[req].controller.abort();requests.splice(Number(req), 1);}} else {requests[req].controller.abort();requests.splice(Number(req), 1);}}
};// 创建 axios 实例
const service = axios.create({baseURL: import.meta.env.DEV ? 'api-dev' : 'api-prod',timeout: 60000,
});// 请求拦截器
service.interceptors.request.use((config: AxiosRequestConfig) => {const { user } = useStore();// 请求自动添加tokenif (user.token) {config.headers!.Authorization = `${localStorage.get('token')}`;}// 请求队列,用于取消请求const controller = new AbortController();config.signal = controller.signal;requests.push({url: `${config.method}-${config.url}`,controller: controller,});return config;},error => {return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response: AxiosResponse) => {const { status } = response;if (status === 200) {switch (response.data.code) {case 200:return response.data;case 404:// 自定义的错误码,可以与http状态码一致,前后端约定即可// 同时根据错误码进行跳转,清空缓存等动作break;......default:break;}}return response.data;},error => {return Promise.reject(new Error(error.message || 'Error'));}
);function customRequest(method: Method
): <T extends Content>(url: string,data?: Record<string, any>,options?: AxiosRequestConfig
) => Promise<T> {return async function <T extends Content>(url: string,data?: Record<string, any>,options?: AxiosRequestConfig) {let restParams = {};if (method === Method.Get) {restParams = {params: { ...data?.params },paramsSerializer: function (params: any) {//arg: [1, 2]会被转换为不同形式: indices转换为'arg[0]=1&arg[1]=2'   brackets转换为'arg[]=1&arg[]=2'  repeat转换为'arg=1&arg=2'return qs.stringify(params, { arrayFormat: 'repeat' }); },};} else {restParams = {data,...options,};}const res = await service.request<T, CustomResponse<T>>({ url, method: method, ...restParams });// 为了不在每个请求后添加如下代码,所以在此统一处理if (res.code === 200 && res.data) {return res.data;}throw res.msg;};
}// axios 实例
export default service;// 自定义axios 实例
export const requestService = {get: customRequest(Method.Get),post: customRequest(Method.Post),put: customRequest(Method.Put),delete: customRequest(Method.Delete),
};
export { cancelRequest, requests };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/652290.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM基础知识汇总篇

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…

【力扣每日一题】力扣2865美丽塔I

题目来源 力扣2865美丽塔I 题目概述 给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i &#xff0c;高度为 heights[i] 。 如果以下条件满足&#xff0c;我们称这些塔是 美丽 的&#xff1a; 1 < heights…

翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一

随着 OpenAI 在多模态方面的最新进展&#xff0c;想象一下将这种能力与视觉理解相结合。 现在&#xff0c;您可以在 Streamlit 应用程序中使用 GPT-4 和 Vision&#xff0c;以&#xff1a; 从草图和静态图像构建 Streamlit 应用程序。帮助你优化应用的用户体验&#xff0c;包…

《合成孔径雷达成像算法与实现》Figure5.18

clc clear close all距离向参数 R_eta_c 20e3; % 景中心斜距 Tr 25e-6; % 发射脉冲时宽 Kr 0.25e12; % 距离向调频率 Fr 7.5e6; % 距离向采样率 Nrg 256; % 距离线采样点数 Bw abs(Kr*Tr); …

Redis面试题35

什么是大数据&#xff1f;它有哪些应用场景&#xff1f; 答&#xff1a;大数据&#xff08;Big Data&#xff09;是指规模庞大、复杂多样的数据集合&#xff0c;以及从这些数据中提取、分析和运用的技术和方法。 大数据的特点主要包括3V&#xff1a;Volume&#xff08;大量&…

.NET绿色开源一键自动化下载、安装、激活Office的利器

前言 今天分享一款.NET开源、绿色、安全、无毒的支持一键自动化下载、安装、激活Microsoft Office的利器&#xff1a;LKY_OfficeTools。 工具介绍 一键自动化下载、安装、激活 Microsoft Office 的利器。绿色、开源、安全、无毒。 目前包含的功能&#xff1a; 一键快速下载、…

【机器学习300问】16、逻辑回归模型实现分类的原理?

在上一篇文章中&#xff0c;我初步介绍了什么是逻辑回归模型&#xff0c;从它能解决什么问题开始介绍&#xff0c;并讲到了它长什么样子的。如果有需要的小伙伴可以回顾一下&#xff0c;链接我放在下面啦&#xff1a; 【机器学习300问】15、什么是…

C#,计算几何,二维贝塞尔拟合曲线(Bézier Curve)参数点的计算代码

Pierre Bzier Bzier 算法用于曲线的拟合与插值。 插值是一个或一组函数计算的数值完全经过给定的点。 拟合是一个或一组函数计算的数值尽量路过给定的点。 这里给出 二维 Bzier 曲线拟合的参数点计算代码。 区别于另外一种读音接近的贝塞耳插值算法&#xff08;Bessels int…

【CAD全套教程】第1阶段 CAD软件教程 002+003基础界面设置

002基础界面设置 1.切换界面至AutoCAD经典界面 方式一&#xff1a;任务栏点击后直接选择 方式二&#xff1a;右下角点击齿轮图标&#xff08;切换工作空间&#xff09;后直接选择 界面图 2.AutoCAD常用命令 工具栏右键单击&#xff0c;选择AutoCAD 3.命令提示行 最下方&#xf…

【Docker】实现JMeter分布式压测

一个JMeter实例可能无法产生足够的负载来对你的应用程序进行压力测试。如本网站所示&#xff0c;一个JMeter实例将能够控制许多其他的远程JMeter实例&#xff0c;并对你的应用程序产生更大的负载。JMeter使用Java RMI[远程方法调用]来与分布式网络中的对象进行交互。JMeter主站…

【前端web入门第二天】01 html语法实现列表与表格_合并单元格

html语法实现列表与表格 文章目录: 1.列表 1.1 无序列表1.2 有序列表1.3 定义列表 2.表格 2.1 表格基本结构2.2 表格结构标签2.3 合并单元格 写在最前,第二天学习目标: 列表 表格 表单 元素为嵌套关系 1.列表 作用:布局内容排列整齐的区域。 列表分类:无序列表、有序列表…

数字IC实践项目(8)—CNN加速器(ASIC_Flow;付费项目补充)

数字IC实践项目&#xff08;8&#xff09;—CNN加速器&#xff08;ASIC_Flow&#xff1b;付费项目补充&#xff09; 更新说明项目整体框图神经网络框图File tree 项目简介和学习目的软件环境要求 Area、QOR、Power&Timing报告Area & QORTiming & Power 总结 更新说…

数据结构和线程池

1.List List<String> list new ArrayList<>(); 并发读写时&#xff0c;会抛出异常&#xff08;Java.util.ConcurrentModificationException&#xff09; new vector<>(); 读写操作都加了锁&#xff0c;但性能不理想 new CopyOnWriteArrayList<>(); 并…

【C++】类与对象(一)

前言 类与对象&#xff08;一&#xff09; 文章目录 一、面向对象和面向过程的对比二、类的引入2.1 C中的结构体2.2 类2.3 类定义方法2.4 修饰限定符2.5 封装2.6 类的实例化2.7 类对象的大小 三、this指针3.1 this 指针的使用 一、面向对象和面向过程的对比 面向过程编程是将程…

代码随想录算法训练营第四十六天 | 139.单词拆分、多重背包

139.单词拆分 题目链接&#xff1a;139.单词拆分 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 文章讲解/视频讲解&#xff1a;https://programmercarl.com/0139.%E5%8D%95%E8%AF%8D%E6%8B%86%E5%88…

Codeforces Round 921 (Div. 2) (C贪心 D期望数学? E线段树)

A&#xff1a; 长度最小就是每k个小写字母形成一组&#xff0c;这样能保证最短的拥有全部子序列 #include<bits/stdc.h> using namespace std; const int N 1e610,M2*N,mod998244353; #define int long long typedef long long LL; typedef pair<int, int> PII;…

GoJS—交互式图表开发的神器(海量案例)

一、GoJS是什么&#xff1a; GoJS是一个用于创建交互式可视化图表和图形的JavaScript库。它提供了丰富的功能和工具&#xff0c;使开发人员能够轻松地构建各种类型的图表&#xff0c;包括流程图、组织结构图、网络拓扑图等。GoJS具有灵活的布局和样式设置&#xff0c;可以通过简…

新概念英语第二册(43)下

【Key structures】Can and Be able to 情态助动词 can/could 用于表示请求别人允许或答复时的情况: Can/Could I borrow you pen? can 有时可以表示可能性&#xff1a; I can have lunch with your tomorrow if you like. 在表示天生的或学到的能力时&#xff0c;can/could 可…

Python中Numba库装饰器

一、运行速度是Python天生的短板 1.1 编译型语言&#xff1a;C 对于编译型语言&#xff0c;开发完成以后需要将所有的源代码都转换成可执行程序&#xff0c;比如 Windows 下的.exe文件&#xff0c;可执行程序里面包含的就是机器码。只要我们拥有可执行程序&#xff0c;就可以随…

基于STM32的智能手环设计与实现

需要原理图工程&#xff0c;源码&#xff0c;PCB工程的朋友收藏&#xff0c;这篇文章关注我&#xff0c;私我吧&#xff01;&#xff01;&#xff01; 基于STM32的智能手环设计与实现 摘要一、研究背景及意义二、实现功能三、系统方案设计系统方案设计框图3.1 单片机芯片选择3…