【JavaScript】axios 二次封装拦截器(接口、实例、全局)
学习 coderwhy 老师结合 ts 二次封装 axios
目录结构

config
config\index.ts
// export const BASE_URL = "http://codercba.com:9002";
export const TIME_OUT = 10000;// 1. 根据环境变量区分接口地址
// let BASE_URL: string;
// if (process.env.NODE_ENV === "development") {
// BASE_URL = "http://codercba.com:9002"
// } else {
// BASE_URL = "http://codercba.com:9002"
// }// 2. 通过创建 .env 文件来自定义环境变量
const BASE_URL = process.env.REACT_APP_BASE_URLexport { BASE_URL }
request
request\index.ts
import axios, {AxiosInstance, InternalAxiosRequestConfig} from "axios";
import { RequestConfig } from "@/service/request/type";class MyRequest {instance: AxiosInstance;constructor(config: RequestConfig) {this.instance = axios.create(config);// 1. 全局拦截器和实例拦截器this.instance.interceptors.request.use(function (config) {console.log("全局请求成功的拦截");return config;},function (error) {console.log("全局请求失败的拦截");return Promise.reject(error);});this.instance.interceptors.response.use(function (response) {console.log("全局响应成功的拦截");return response.data;},function (error) {console.log("全局响应失败的拦截");return Promise.reject(error);});// 2. 配置针对特殊的接口的单次请求拦截this.instance.interceptors.request.use(config.interceptors?.requestSuccessFn,config.interceptors?.requestFailureFn);this.instance.interceptors.response.use(config.interceptors?.responseSuccessFn,config.interceptors?.responseFailureFn);}/** 我们希望对每次请求每个接口 request 和 response 都进行定制化的拦截* request({* url:'/xxx',* interceptors:{* requestSuccessFn:(config) => {* console.log("针对 /xxx 请求成功的拦截");* return config;* },* }* })** 某个接口的请求拦截 -> 全局请求拦截 -> 全局响应拦截 -> 某个接口的响应拦截* *//*** 封装请求方法* @param config*/request<T = any>(config: RequestConfig<T>) {if (config.interceptors?.requestSuccessFn) {// 返回拦截处理后新的 config // 如今新的源码里面需要使用 InternalAxiosRequestConfig 否则会报错config = config.interceptors.requestSuccessFn(config as InternalAxiosRequestConfig) as InternalAxiosRequestConfig;}return new Promise<T>((resolve, reject) => {this.instance.request<any, T>(config).then((res) => {if (config.interceptors?.responseSuccessFn) {res = config.interceptors.responseSuccessFn(res);}resolve(res);}).catch((err) => reject(err));});}get<T = any>(config: RequestConfig<T>) {return this.request({ ...config, method: "GET" });}post<T = any>(config: RequestConfig<T>) {return this.request<T>({ ...config, method: "POST" });}delete<T = any>(config: RequestConfig<T>) {return this.request<T>({ ...config, method: "DELETE" });}patch<T = any>(config: RequestConfig<T>) {return this.request<T>({ ...config, method: "PATCH" });}
}export default MyRequest;
request\type.ts
import {AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig} from "axios";/*** 自定义拦截器类型*/
export interface Interceptors<T = AxiosResponse> {requestSuccessFn?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;requestFailureFn?: (err: any) => any;responseSuccessFn?: (res: T) => T;responseFailureFn?: (err: any) => any;
}/*** 针对于原有 axios 的配置进行二次封装(扩展)*/
export interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {interceptors?: Interceptors<T>;
}
index
index.ts
import {BASE_URL, TIME_OUT} from "@/service/config";
import MyRequest from "@/service/request";export const request = new MyRequest({baseURL: BASE_URL,timeout: TIME_OUT
})
总结
- 配置的统一管理 .env 比如 timeout 和 baseUrl
- 拦截器二次封装(接口(通过 ts 类型约束和类的继承为每一个 request 方法添加自定义 interceptors 配置,配置上有请求和响应成功和失败的方法)、实例(类构造实例)、全局)
- 全局拦截(token 设置、loading 效果、message 弹窗提示)
整体下来最难的地方我感觉是 ts 类型的约束,不看一些源码真的理解不了。
相关文章:
【JavaScript】axios 二次封装拦截器(接口、实例、全局)
学习 coderwhy 老师结合 ts 二次封装 axios 目录结构 config config\index.ts // export const BASE_URL "http://codercba.com:9002"; export const TIME_OUT 10000;// 1. 根据环境变量区分接口地址 // let BASE_URL: string; // if (process.env.NODE_ENV &qu…...
Linux_02 Linux常用软件——vi、vim
vi编辑器有三种主要模式,每种模式的功能和用途不同: 一、命令模式 (Command Mode): - 启动 vi 时默认进入此模式。 - 你可以在此模式下移动光标,输入各种命令(如删除、复制、粘贴等)。 yy:…...
C++代码优化--要求或禁止在堆中产生对象
目录 1.引言 2.栈与堆区别 2.1. 栈(Stack) 2.2. 堆(Heap) 3.限制在堆上分配内存的好处 4.对象在栈上分配内存的方法 4.1. 使用RAII(资源获取即初始化) 4.2. 避免使用new和delete 4.3. 限制对象的生…...
MybatisPlus入门(六)MybatisPlus-空值处理
一、MybatisPlus-空值处理 1.1)问题引入: 在查询中遇到如下情况,有部分筛选条件没有值,如商品价格有最大值和最小值,商品价格部分时候没有值。 1.2)解决办法: 步骤一:新建查询实体…...
钉钉内集成第三方免密登录(Vue+.Net)
需要实现的效果就是在钉钉内点击应用能跳转到第三方网站并且免密登录 1.登录钉钉PC端管理后台 2.通过管理后台进去开发者后台 3.应用开发 创建H5微应用 4.应用创建成功后直接点权限管理全部授权 5.设置H5登录地址 6. 应用管理发布 至此需要配置的步骤全部已完成,…...
卷积神经网络实验三:模型优化(1)
作者有话说: 这篇文章写的还是比混乱的。因为本人也是第一次做这样的尝试,虽然接触深度学习有一年了,但是对于模型的优化仅仅是局限于理论上。通过这一次的实验,我对于模型的理解也更深了几分。我不期望这篇文章能帮你能解决多大问…...
STM32F103的CAN通讯接收测试
首先配置CUBEMX 1.打开CUBEMX 设置时钟,由于我没有外部时钟,所以我选择内部时钟,选择8倍频,1分频,APB1时钟频率为32MKHZ,也就是说每秒能够执行 3200 万个时钟周期,1M是每秒执行100万个时钟周期。 2.CAN收…...
【Rust中的智能指针】
Rust中的智能指针 什么是智能指针?什么是Rust中的智能指针?Rust中的智能指针BoxBox的使用场景 Rust中的智能指针Rc与Arcrust中的RefCellrefcell的缺点:rust中的weak先来看看C中的weak_ptr定义代码示例: Deref和Drop 总结 什么是智…...
基于深度学习的社交网络中的社区检测
在社交网络分析中,社区检测是一项核心任务,旨在将网络中的节点(用户)划分为具有高内部连接密度且相对独立的子群。基于深度学习的社区检测方法,通过捕获复杂的网络结构信息和节点特征,在传统方法基础上实现…...
【Python基础】
一、编程语言介绍 1、分类 机器语言 (直接用 0 1代码编写)汇编语言 (英文单词替代二进制指令)高级语言 2、总结 1、执行效率:机器语言>汇编语言>高级语言(编译型>解释型) 2、开发效率&…...
【玉米叶部病害识别】Python+深度学习+人工智能+图像识别+CNN卷积神经网络算法+TensorFlow
一、介绍 玉米病害识别系统,本系统使用Python作为主要开发语言,通过收集了8种常见的玉米叶部病害图片数据集(‘矮花叶病’, ‘健康’, ‘灰斑病一般’, ‘灰斑病严重’, ‘锈病一般’, ‘锈病严重’, ‘叶斑病一般’, ‘叶斑病严重’&#x…...
【设计模式】如何用C++实现依赖倒置
【设计模式】如何用C实现依赖倒置 一、什么是依赖倒置? 依赖倒置原则(Dependency Inversion Principle,DIP)是SOLID面向对象设计原则中的一项。它的核心思想是: 高层模块不应该依赖于低层模块,两者都应该…...
使用onnxruntime-web 运行yolov8-nano推理
ONNX(Open Neural Network Exchange)模型具有以下两个特点促成了我们可以使用onnxruntime-web 直接在web端上运行推理模型,为了让这个推理更直观,我选择了试验下yolov8 识别预览图片: 1. 跨平台兼容性 ONNX 是一种开…...
Gin框架html/vue前端使用hls.js播放/点播m3u8(hls)格式视频
说明 在web应用开发时遇到在线播放m3u8格式视频,由于m3u8是多分片视频,原生video标签无法直接播放,所以需要js对m3u8处理才能播放,网上有很多插件,这里我选择最近简单方法hls.js播放,引入一个js文件即可。…...
HarmonyOS 私仓搭建
1. HarmonyOS 私仓搭建 私仓搭建文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-ohpm-repo-quickstart-V5 发布共享包[https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-har-publish-0000001597973129-V5]…...
Mybatis学习笔记(二)
八、多表联合查询 (一) 多表联合查询概述 在开发过程中单表查询不能满足项目需求分析功能,对于复杂业务来讲,关联的表有几张,甚至几十张并且表与表之间的关系相当复杂。为了能够实业复杂功能业务,就必须进行多表查询,…...
Google“Big Sleep“人工智能项目发现真实软件漏洞
据Google研究人员称,该公司的一个人工智能项目足够聪明,能够自行发现现实世界中的软件漏洞;Google的人工智能项目最近在开源数据库引擎 SQLite 中发现了一个之前未知的可利用漏洞。 该公司随后在正式软件发布之前报告了这一漏洞,这…...
npm入门教程5:package.json
一、package.json 文件的作用 依赖管理:列出项目所依赖的包(库)及其版本,便于其他开发者或自动化工具快速安装和更新这些依赖。元数据描述:提供项目的描述、作者、许可证等元信息,有助于项目的管理和维护。…...
docker-高级(待补图)
文章目录 数据卷(Volume)介绍查看方法删除方法绑定方法匿名绑定具名绑定Bind Mount 数据卷管理 网络bridge(桥接模式 默认)HOST(主机模式)Nonecontainer(指定一个容器进行关联网络共享)自定义(推荐)docker network 命令创建网络docker network create 实例展示-自定义实例展示-…...
Qt 文件目录操作
Qt 文件目录操作 QDir 类提供访问系统目录结构 QDir 类提供对目录结构及其内容的访问。QDir 用于操作路径名、访问有关路径和文件的信息以及操作底层文件系统。它还可以用于访问 Qt 的资源系统。 Qt 使用“/”作为通用目录分隔符,与“/”在 URL 中用作路径分隔符…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
