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 };相关文章:
axios结合ts使用,取消请求,全局统一获取数据,抛出错误信息
通常在开发时,后端向前端返回的数据可以如下: 1 使用restful api充分利用http状态码,然后在data中追加code字段,请求成功返回200,请求失败返回404,401,500等状态码,并且在code字段中给出详细的字符串信息2 再包一层&a…...
MongoDB:从容器使用到 Mongosh、Python/Node.js 数据操作(结构清晰万字长文)
文章目录 1. 容器与应用之间的关系介绍2. 使用 Docker 容器安装 MongoDB3. Mongosh 操作3.1 Mongosh 连接到 MongoDB3.2 基础操作与 CRUD 4. Python 操作 MongoDB5. Nodejs 操作 MongoDB5.1 Mongodb 和 Mongoose5.2 推荐在项目中使用 Mongoose 参考文献 1. 容器与应用之间的关系…...
超越传统—Clean架构打造现代Android架构指南
超越传统—Clean架构打造现代Android架构指南 1. 引言 在过去几年里,Android应用开发经历了巨大的变革和发展。随着移动设备的普及和用户对应用的期望不断提高,开发人员面临着更多的挑战和需求。传统的Android架构在应对这些挑战和需求时显得有些力不从…...
WebGL开发项目的类型
WebGL(Web Graphics Library)是一种用于在Web浏览器中渲染交互式3D和2D图形的JavaScript API。使用WebGL,可以开发各种类型的项目,包括但不限于以下几种,希望对大家有所帮助。北京木奇移动技术有限公司,专业…...
CUDA编程- - GPU线程的理解 thread,block,grid - 学习记录
GPU线程的理解 thread,block,grid 一、从 cpu 多线程角度理解 gpu 多线程1、cpu 多线程并行加速2、gpu多线程并行加速2.1、cpu 线程与 gpu 线程的理解(核函数)2.1.1 、第一步:编写核函数2.1.2、第二步:调用核函数(使用…...
yum 报错 ZLIB_1.2.3.3 not defined in file libz.so.1
这篇记录工作中发现的,库文件被修改导致 yum 无法正常使用的问题排查过程 问题描述 1)执行yum 报错说python2.7.5 结构异常,发现/usr/bin/yum 的解释器被修改过,恢复成/usr/bin/python即可 2)恢复后,发现…...
数字孪生智慧能源电力Web3D可视化云平台合集
前言 能源电力的经济发展是中国式现代化的强大动力,是经济社会发展的必要生产要素,电力成本变化直接关系到工业生产、交通运输、农业生产、居民生活等各个方面,合理、经济的能源成本能够促进社会用能服务水平提升、支撑区域产业发展…...
DataTable.Load(reader)注意事项
对于在C#中操作数据库查询,这样的代码很常见: using var cmd ExecuteCommand(sql); using var reader cmd.ExecuteReader(); DataTable dt new DataTable(); dt.Load(reader); ...一般的查询是没问题的,但是如果涉及主键列的查询…...
DC-DNS(域名解析服务)(23国赛真题)
2023全国职业院校技能大赛网络系统管理赛项–模块B:服务部署(WindowServer2022) 文章目录 题目配置步骤安装及配置DNS服务。创建正向区域,添加必要的域名解析记录。配置TXT记录,配置域名反向PTR。无法解析的域名统一交由IspSrv进行解析验证配置chinaskills.com正向区域配置…...
日志之Loki详细讲解
文章目录 1 Loki1.1 引言1.2 Loki工作方式1.2.1 日志解析格式1.2.2 日志搜集架构模式1.2.3 Loki部署模式 1.3 服务端部署1.3.1 AllInOne部署模式1.3.1.1 k8s部署1.3.1.2 创建configmap1.3.1.3 创建持久化存储1.3.1.4 创建应用1.3.1.5 验证部署结果 1.3.2 裸机部署 1.4 Promtail…...
Mongodb投射中的$slice,正向反向跳过要搞清楚
在投射中,使用$操作符和$elemMatch返回数组中第一个符合查询条件的元素。而在投射中使用$slice, 能够返回指定数量的数组元素。 定义 投射中使用$slice命令,指定查询结果中返回数组元素的数量。 语法 db.collection.find(<query>,{<arrayFi…...
类和对象 第六部分 继承 第一部分:继承的语法
一.继承的概念 继承是面向对象的三大特性之一 有些类与类之间存在特殊的关系,例如下图: 我们可以发现,下级别的成员除了拥有上一级的共性,还有自己的特性,这个时候,我们可以讨论利用继承的技术,…...
githacker安装详细教程,linux添加环境变量详细教程(见标题三)
笔者是ctf小白,这两天也是遇到.git泄露的题目,需要工具来解决问题,在下载和使用的过程中也是遇到很多问题,写此篇记录经验,以供学习 在本篇标题三中有详细介绍了Linux系统添加环境变量的操作教程,以供学习 …...
2401Idea用GradleKotlin编译Java控制台中文出乱码解决
解决方法 解决方法1 在项目 build.gradle.kts 文件中加入 tasks.withType<JavaCompile> {options.encoding "UTF-8" } tasks.withType<JavaExec> {systemProperty("file.encoding", "utf-8") }经测试, 只加 tasks.withType<…...
Day39 62不同路径 63不同路径II 343整数拆分 96不同的二叉搜索树
62 不同路径 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。 问总共有多少条不同的路径&#…...
JavaScript 的 ~~ 运算和floor 的性能差异
在JavaScript中,~~(双波浪号)和Math.floor()都可以用于向下取整,但它们在行为和性能上有一些差异。要测试这两者之间的性能差异,你可以使用JavaScript的performance.now()方法来进行基准测试。 行为差异 Math.floor()…...
AtCoder Beginner Contest 338F - Negative Traveling Salesman【floyd+状态压缩dp】
原题链接:https://atcoder.jp/contests/abc338/tasks/abc338_f Time Limit: 6 sec / Memory Limit: 1024 MB Score: 500 points、 问题陈述 有一个有N个顶点和M条边的加权简单有向图。顶点的编号为 1 到 N,i/th 边的权重为 Wi,从顶点 U…...
UDP/TCP协议特点
1.前置知识 定义应用层协议 1.确定客户端和服务端要传递哪些信息 2.约定传输格式 网络上传输的一般是二进制数据/字符串 结构化数据转二进制/字符串 称为序列化 反之称之为反序列化 下面就是传输层了 在TCP/IP协议中,我们以 目的端口,目的IP 源端口 源IP 协议号这样一个五…...
编程笔记 html5cssjs 059 css多列
编程笔记 html5&css&js 059 css多列 一、CSS3 多列属性二、实例小结 CSS3 可以将文本内容设计成像报纸一样的多列布局. 一、CSS3 多列属性 下表列出了所有 CSS3 的多列属性: 属性 描述 column-count 指定元素应该被分割的列数。 column-fill 指定如何填充…...
Facebook的元宇宙探索:虚拟社交的新时代
近年来,科技的飞速发展推动着人类社交方式的翻天覆地的改变。在这场数字化革命的浪潮中,社交媒体巨头Facebook正积极探索并引领着一个被誉为“元宇宙”的全新领域,试图为用户打造更为真实、丰富的虚拟社交体验。 元宇宙的崛起 元宇宙这个概念…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)
LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中,合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式:工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数(接收函数) sendto函数(发送函数) 五、网络编程之 UDP 用…...
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下,音视频内容犹如璀璨繁星,点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频,到在线课堂中知识渊博的专家授课,再到影视平台上扣人心弦的高清大片,音…...
