TypeScript 封装 Axios 1.7.7

随着Axios版本的不同，类型也在改变，以后怎么写类型？
在这里插入图片描述
在这里插入图片描述

yarn add axios

1. 封装Axios

将Axios封装成一个类，同时重新封装request方法

  • 重新封装request有几个好处：
    1. 所有的请求将从我们定义的requet请求中发送，这样以后更换Axios工具，只需要将request方法重写就可以。
    2. 便于对请求的请求体和返回数据做拦截
    3. 方便统一配置请求的config
  • 最基础版本
import axios from "axios";
import type { AxiosInstance } from "axios";class MyAxios {instance: AxiosInstance;constructor(config: AxiosRequestConfig) {this.instance = axios.create(config);}
// 重新封装axios的request方法async request(config: AxiosRequestConfig) {return await this.instance.reques(config)}
}
export default MyAxios;
  • 发送请求
import MyAxios from "./request";
import { BASE_URL, TIME_OUT} from "./config"; // 配置文件const myRequest1 = new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT,
});myRequest1.request({url: "/XXXXX",}).then((res) => {// res为成功后返回的结果});

2. 加入全局拦截器

  • 加入全局拦截器后封装的Axios，调用方法与上面保持一致
import axios from "axios";
import type { AxiosInstance } from "axios";class MyAxios {instance: AxiosInstance;constructor(config: AxiosRequestConfig) {// 创建axios的实例this.instance = axios.create(config);// 全局请求拦截器this.instance.interceptors.request.use((config) => {// "全局请求拦截器：请求成功");return config;},(error) => {// ("全局请求拦截器：请求失败");return error;});// 全局响应拦截器this.instance.interceptors.response.use((res) => {// ("全局响应拦截器：响应成功");// res中含有axios中的很多东西，res.data :服务器返回的结果，return res.data;},(error) => {// ("全局响应拦截器：响应失败");return error;});}async request(config: AxiosRequestConfig) {return await this.instance.request(config)}
}export default MyAxios;
  • 发送请求
import MyAxios from "./request";
import { BASE_URL, TIME_OUT} from "./config"; // 配置文件const myRequest1 = new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT,
});myRequest1.request({url: "/XXXXX",}).then((res) => {// res变成了服务器发送会的数据，全局响应拦截器把Axios带的一些数据去掉了});

3. 加入域拦截器

域拦截器是我自己想的名字，也可以说是实例拦截器
在实例中定义拦截方法

  1. 拦截的范围是一个baseURL，所以我称它为域拦截
  2. 因为定义在一个new MyAxios实例中，也可以说是实例拦截器
  • 给拦截器定义类型
import type { AxiosRequestConfig } from "axios";// 自定义拦截器中的方法的类型
interface interceptorsFunction {requestOnFulfilled?: (config: any) => any; // 请求成功requestOnRejected?: (error: any) => any; //  请求失败responseOnFulfilled?: (res: any) => any; //  响应成功responseOnRejected?: (error: any) => any; // 响应失败
}
// 自定义拦截器类型。这里扩展了AxiosRequestConfig类型
interface MyAxiosRequestConfig extends AxiosRequestConfig {MyInterceptors?: interceptorsFunction;
}export { MyAxiosRequestConfig };
  • 在实例中实现拦截器的方法
import MyAxios from "./request";
import { BASE_URL, TIME_OUT } from "./config";
import type { MyAxiosRequestConfig } from "./type";const myRequest2 = new MyAxios({baseURL: BASE_URL,	timeout: TIME_OUT,// 域拦截器。给axios发送的自定义拦截器需要执行的功能MyInterceptors: {requestOnFulfilled: (config) => {// ("自定义请求拦截器：请求成功");return config},requestOnRejected: (error) => {// ("自定义请求拦截器：请求失败");return error},responseOnFulfilled: (res) => {// ("自定义响应拦截器：响应成功");return res},responseOnRejected: (error) => {// ("自定义响应拦截器：响应失败");return error}}
})
// 发送请求
myRequest.myRequest2.request({url: "XXXXXX",}).then((res) => {// (res);});
  • 封装Axois
import axios from "axios";
import type { AxiosInstance } from "axios";
// 导入自定义拦截器的类型
import type { MyAxiosRequestConfig } from "./type";class MyAxios {instance: AxiosInstance;constructor(config: MyAxiosRequestConfig) {this.instance = axios.create(config);// 全局请求拦截器this.instance.interceptors.request.use((config) => {// ("全局请求拦截器：请求成功");return config;},(error) => {// ("全局请求拦截器：请求失败");return error;});// 全局响应拦截器this.instance.interceptors.response.use((res) => {// ("全局响应拦截器：响应成功");return res.data;},(error) => {// ("全局响应拦截器：响应失败");return error;});// 请求中自定义的拦截器：实例的拦截器// 判断config中是否有自定义的拦截器if (config.MyInterceptors) {// 把config中传过来的方法，绑定到实例上this.instance.interceptors.request.use(config.MyInterceptors.requestOnFulfilled,config.MyInterceptors.requestOnRejected);this.instance.interceptors.response.use(config.MyInterceptors.responseOnFulfilled,config.MyInterceptors.responseOnRejected);}}async request(config: AxiosRequestConfig<T>) {return await this.instance.request(config)}
}export default MyAxios;

4. 关于类型

  requestOnFulfilled?: (config: any) => any; // 请求成功

定义拦截器类型中requestOnFulfilled类型，看的教学视频中config的类型是AxiosRequestConfig，我设置后死活报错，看了一下axios的类型定义文件中这里是InternalAxiosRequestConfig，这里就涉及axios的版本问题了，所以我觉得还是any安全，万一明天更新版本又换了类型，这个代码就不通用了

在这里插入图片描述

5. 一次性拦截器

  • 这又是我自己起的名字，这个拦截器针对具体的一个请求

例如：域 http:// 10.1.2.3:8000下面有很多资源，比如有/api/img、/api/text，一次性拦截器就是针对域下面的资源的，可能/api/img需要拦截器工作，而/api/text不需要拦截器，所以每个资源对拦截器的需求和功能是不一样的

  • 封装Axios，主要是对request请求的改动，其他地方没有改动，省略代码，这个拦截器虽然是起到了拦截器的效果，其实就是引入了一段代码
import axios from "axios";
import type { AxiosInstance } from "axios";
// 导入自定义拦截器的类型
import type { MyAxiosRequestConfig } from "./type";class MyAxios {instance: AxiosInstance;constructor(config: MyAxiosRequestConfig) {this.instance = axios.create(config);// 全局请求拦截器// 全局响应拦截器// 请求中自定义的拦截器：实例的拦截器}async request(config: MyAxiosRequestConfig) {// config中是否定义了requestOnFulfilled这个方法if (config.MyInterceptors?.requestOnFulfilled) {// 如果有这个方法，把config对象处理一下config = config.MyInterceptors.requestOnFulfilled(config);}return await this.instance.request(config)	// request方法返回Promise.then((res) => {	// Promise是成功状态返回的res，如果需要处理就处理一下子if (config.MyInterceptors?.responseOnFulfilled) {res = config.MyInterceptors.responseOnFulfilled(res);}return res;}).catch((error) => {	// Promise是失败状态或者异常，处理一下子if (config.MyInterceptors?.responseOnRejected)error = config.MyInterceptors.responseOnRejected(error);return error;});}
}export default MyAxios;
  • 发送请求
const myRequest1 = new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT,
});
// 发送请求
myRequest1.request({url: "XXXXXX",// 定义一次性拦截器，只对 url: "XXXXX" 起效MyInterceptors: {requestOnFulfilled: (config) => {// ("一次性拦截器，请求成功拦截");return config;},responseOnFulfilled: (res) => {// ("一次性拦截器，响应成功拦截");return res;},responseOnRejected: (res) => {// ("一次性拦截器，响应失败拦截");return res;},},}).then((res) => {// (res);});
  • 拦截器的类型定义与域拦截器中的一样就不重复了

6. 总结

  • 全局拦截器：只要使用Axios发送请求就会执行
  • 域拦截器：对实例中的一个baseURL（http://10.1.2.3:8080）负责
  • 一次性拦截器：对单个request请求负责（/api/img、/api/text）

7. 以下是加上泛型定义和其他请求的Axios封装的完整版本

拦截器的类型定义

// /request/type.ts 文件
import type { AxiosRequestConfig } from "axios";// 自定义拦截器中的方法的类型
interface interceptorsFunction<T = any> {requestOnFulfilled?: (config: any) => any; // 请求成功requestOnRejected?: (error: any) => any; //  请求失败responseOnFulfilled?: (res: T) => T; //  响应成功responseOnRejected?: (error: any) => any; // 响应失败
}
// 自定义拦截器类型
interface MyAxiosRequestConfig<T = any> extends AxiosRequestConfig {MyInterceptors?: interceptorsFunction<T>;
}export type { MyAxiosRequestConfig };

常量的定义

- 这里的cLog是方便调试，不用的时候在这里设置为false就不打印了，打印的东西多了，看的眼花

// /config/index.ts
export const cLog = (message:any)=>{// if (process.env.NODE_ENV !== 'production') return// if (0) return console.log(message)
}export const BASE_URL = "http://XXXXXXXXXX"
export const TIME_OUT = 10000

封装后的Axios

// /request/index.ts
import axios from "axios";
import type { AxiosInstance } from "axios";
import { cLog } from "../config";
// 导入自定义拦截器的类型
import type { MyAxiosRequestConfig } from "./type";class MyAxios {instance: AxiosInstance;constructor(config: MyAxiosRequestConfig) {this.instance = axios.create(config);// 全局请求拦截器this.instance.interceptors.request.use((config) => {cLog("全局请求拦截器：请求成功");return config;},(error) => {cLog("全局请求拦截器：请求失败");return error;});// 全局响应拦截器this.instance.interceptors.response.use((res) => {cLog("全局响应拦截器：响应成功");return res.data;},(error) => {cLog("全局响应拦截器：响应失败");return error;});// 请求中自定义的拦截器：实例的拦截器if (config.MyInterceptors) {this.instance.interceptors.request.use(config.MyInterceptors.requestOnFulfilled,config.MyInterceptors.requestOnRejected);this.instance.interceptors.response.use(config.MyInterceptors.responseOnFulfilled,config.MyInterceptors.responseOnRejected);}}async request<T = any>(config: MyAxiosRequestConfig<T>) {if (config.MyInterceptors?.requestOnFulfilled) {config = config.MyInterceptors.requestOnFulfilled(config);}return await this.instance.request<any, T>(config).then((res) => {if (config.MyInterceptors?.responseOnFulfilled) {res = config.MyInterceptors.responseOnFulfilled(res);}return res;}).catch((error) => {if (config.MyInterceptors?.responseOnRejected)error = config.MyInterceptors.responseOnRejected(error);return error;});}get<T = any>(config: MyAxiosRequestConfig<T>) {return this.request({ ...config, method: "get" });}post<T = any>(config: MyAxiosRequestConfig<T>) {return this.request({ ...config, method: "post" });}delete<T = any>(config: MyAxiosRequestConfig<T>) {return this.request({ ...config, method: "delete" });}put<T = any>(config: MyAxiosRequestConfig<T>) {return this.request({ ...config, method: "put" });}patch<T = any>(config: MyAxiosRequestConfig<T>) {return this.request({ ...config, method: "patch" });}
}export default MyAxios;

实例Axios

- myRequest1：只有全局拦截器
- myRequest2：有全局拦截器和域拦截器

// index.ts
import MyAxios from "./request";
import { BASE_URL, TIME_OUT, cLog } from "./config";const myRequest1 = new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT,
});const myRequest2 = new MyAxios({baseURL: BASE_URL,timeout: TIME_OUT,// 给axios发送的自定义拦截器需要执行的功能MyInterceptors: {requestOnFulfilled: (config) => {cLog("自定义请求拦截器：请求成功");return config},requestOnRejected: (error) => {cLog("自定义请求拦截器：请求失败");return error},responseOnFulfilled: (res) => {cLog("自定义响应拦截器：响应成功");return res},responseOnRejected: (error) => {cLog("自定义响应拦截器：响应失败");return error}}
})
export default { myRequest1,myRequest2 };

实际发送请求

  • 以上都可以作为固定的使用，下面的部分就是我们每次要发送请求时编写的
// main.js
import myRequest from "../index";
import { cLog } from "../config";myRequest.myRequest1.request({url: "XXXXX",}).then((res) => {cLog(res);});myRequest.myRequest2.request({url: "XXXXX",}).then((res) => {cLog(res);});myRequest.myRequest2// 这里的类型是服务器返回数据的类型，感觉复杂这里用any// 为什么这里的类型是服务器返回的数据类型？在全局拦截器中返回的是res.data// 如果在其他拦截器中没有对res做出改变。这里应该是AxiosResponse类型.request<类型>({ url: "XXXXX",// 一次性拦截器MyInterceptors: {requestOnFulfilled: (config) => {cLog("一次性拦截器，请求成功拦截");return config;},responseOnFulfilled: (res) => {cLog("一次性拦截器，响应成功拦截");return res;},responseOnRejected: (res) => {cLog("一次性拦截器，响应失败拦截");return res;},},}).then((res) => {cLog(res);});

8. 拦截器的执行顺序

  • 只有全局拦截器
全局请求拦截器：请求成功
全局响应拦截器：响应成功
  • 有全局拦截器和域拦截器
自定义请求拦截器：请求成功
全局请求拦截器：请求成功
全局响应拦截器：响应成功
自定义响应拦截器：响应成功
  • 全局、域、一次性拦截器
一次性拦截器，请求成功拦截
自定义请求拦截器：请求成功
全局请求拦截器：请求成功
全局响应拦截器：响应成功
自定义响应拦截器：响应成功
一次性拦截器，响应成功拦截

9. 目录结构

在这里插入图片描述

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

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

相关文章

Vue3实现动态菜单功能

Vue3实现动态菜单功能

文章目录 0.效果演示1.搭建Vue3项目1.1 vite 脚手架创建 Vue3 项目1.2 设置文件别名1.3 安装配置 element-plus1.4 安装配置路由2.登录页面3.后台管理页面3.1 搭建后台框架3.2 左侧菜单栏3.3 header 用户信息3.4 主要内容3.5 footer4.配置静态路由5.记录激活菜单5.1 el-menu 绑…
阅读更多...
信号处理快速傅里叶变换(FFT)的学习

信号处理快速傅里叶变换(FFT)的学习

FFT是离散傅立叶变换的快速算法&#xff0c;可以将一个信号变换到频域。有些信号在时域上是很难看出什么特征的&#xff0c;但是如果变换到频域之后&#xff0c;就很容易看出特征了。这就是很多信号分析采用FFT变换的原因。另外&#xff0c;FFT可以将一个信号的频谱提取出来&am…
阅读更多...
webpack信息泄露

webpack信息泄露

先看看webpack中文网给出的解释 webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换、打包或包裹任何资源。 如果未正确配置&#xff0c;会生成一个.map文件&#xff0c;它包含了原始JavaScript代码的映…
阅读更多...
课设实验-数据结构-线性表-手机销售

课设实验-数据结构-线性表-手机销售

题目&#xff1a; 代码&#xff1a; #include<stdio.h> #include<string.h> #define MaxSize 10 //定义顺序表最大长度 //定义手机结构体类型 typedef struct {char PMod[10];//手机型号int PPri;//价格int PNum;//库存量 }PhoType; //手机类型 //记录手机的顺序…
阅读更多...
【HTTP（3）】（状态码，https）

【HTTP（3）】（状态码，https）

【认识状态码】 状态码最重要的目的&#xff0c;就是反馈给浏览器:这次请求是否成功&#xff0c;若失败&#xff0c;则出现失败原因 常见状态码: 200:OK&#xff0c;表示成功 404:Not Found&#xff0c;浏览器访问的资源在服务器上没有找到 403:Forbidden&#xff0c;访问被…
阅读更多...
springboot系列--web相关知识探索三

springboot系列--web相关知识探索三

一、前言 web相关知识探索二中研究了请求是如何映射到具体接口&#xff08;方法&#xff09;中的&#xff0c;本次文章主要研究请求中所带的参数是如何映射到接口参数中的&#xff0c;也即请求参数如何与接口参数绑定。主要有四种、分别是注解方式、Servlet API方式、复杂参数、…
阅读更多...
【案例】距离限制模型透明

【案例】距离限制模型透明

开发平台&#xff1a;Unity 2023 开发工具&#xff1a;Unity ShaderGraph   一、效果展示 二、路线图 三、案例分析 核心思路&#xff1a;计算算式&#xff1a;透明值 实际距离 / 最大距离 &#xff08;实际距离 ≤ 最大距离&#xff09;   3.1 说明 | 改变 Alpha 值 在 …
阅读更多...
stm32f103调试，程序与定时器同步设置

stm32f103调试，程序与定时器同步设置

在调试定时器相关代码时&#xff0c;注意到定时器的中断位总是置1&#xff0c;怀疑代码有问题&#xff0c;经过增大定时器的中断时间&#xff0c;发现定时器与代码调试并不同步&#xff0c;这一点对于调试涉及定时器的代码是非常不利的&#xff0c;这里给出keil调试stm32使定时…
阅读更多...
自用Proteus(8.15)常用元器件图示和功能介绍(持续更新...)

自用Proteus(8.15)常用元器件图示和功能介绍(持续更新...)

文章目录 一、 前言二、新建工程&#xff08;以51单片机流水灯为例&#xff09;2.1 打开软件2.2 建立新工程2.3 创建原理图2.4 不创建PCB布版设计2.5 创建成功2.6 添加元器件2.7 原理图放置完成2.8 编写程序&#xff0c;进行仿真2.9 仿真 三、常用元器件图示和功能介绍3.1 元件…
阅读更多...
【回眸】Tessy 单元测试软件使用指南（四）常见报错及解决方案与批量初始化的经验

【回眸】Tessy 单元测试软件使用指南（四）常见报错及解决方案与批量初始化的经验

前言 分析时Tessy的报错 1.fatal error: Tricore/Compilers/Compilers.h: No such file or directory 2.error: #error "Compiler unsupported" 3.warning: invalid suffix on literal;C11 requires a space between literal and string macro 4.error: unknown…
阅读更多...
螺蛳壳里做道场：老破机搭建的私人数据中心---Centos下Docker学习01(环境准备)

螺蛳壳里做道场：老破机搭建的私人数据中心---Centos下Docker学习01(环境准备)

1 准备工作 由于创建数据中心需要安装很多服务器&#xff0c;这些服务器要耗费很所物理物理计算资源、存储资源、网络资源和软件资源&#xff0c;作为穷学生只有几百块的n手笔记本&#xff0c;不可能买十几台服务器来搭建数据中心&#xff0c;也不愿意跑实验室&#xff0c;想躺…
阅读更多...
文件上传之%00截断（00截断）以及pikachu靶场

文件上传之%00截断（00截断）以及pikachu靶场

pikachu的文件上传和upload-lab的文件上传 目录 mime type类型 getimagesize 第12关%00截断&#xff0c; 第13关0x00截断 差不多了&#xff0c;今天先学文件上传白名单&#xff0c;在网上看了资料&#xff0c;差不多看懂了&#xff0c;但是还有几个地方需要实验一下&#…
阅读更多...
SpringBoot整合异步任务执行

SpringBoot整合异步任务执行

同步任务&#xff1a; 同步任务是在单线程中按顺序执行&#xff0c;每次只有一个任务在执行&#xff0c;不会引发线程安全和数据一致性等 并发问题 同步任务需要等待任务执行完成后才能执行下一个任务&#xff0c;无法同时处理多个任务&#xff0c;响应慢&#xff0c;影响…
阅读更多...
VirtualBox+Vagrant快速搭建Centos7系统【最新详细教程】

VirtualBox+Vagrant快速搭建Centos7系统【最新详细教程】

VirtualBoxVagrant快速搭建Centos7系统 &#x1f4d6;1.安装VirtualBox✅下载VirtualBox✅安装 &#x1f4d6;2.安装Vagrant✅下载Vagrant✅安装 &#x1f4d6;3.搭建Centos7系✅初始化Vagrantfile文件生成✅启动Vagrantfile文件✅解决 vagrant up下载太慢的问题✅配置网络ip地…
阅读更多...
咸鱼sign逆向分析与爬虫实现

咸鱼sign逆向分析与爬虫实现

目标&#xff1a;&#x1f41f;的搜索商品接口 这个站异步有点多&#xff0c;好在代码没什么混淆。加密的sign值我们可以通过搜索找到位置 sign值通过k赋值&#xff0c;k则是字符串拼接后传入i函数加密 除了开头的aff…&#xff0c;后面的都是明文没什么好说的&#xff0c;我…
阅读更多...
SysML案例-电磁轨道炮

SysML案例-电磁轨道炮

DDD领域驱动设计批评文集>> 《软件方法》强化自测题集>> 《软件方法》各章合集>> 图片示例摘自intercax.com&#xff0c;作者是Intercax公司总裁Dirk Zwemer博士。
阅读更多...
C题（六） 1到 100 的所有整数中出现多少个数字9

C题（六） 1到 100 的所有整数中出现多少个数字9

场景&#xff1a;编写程序数一下 1到 100 的所有整数中出现多少个数字9 控制循环的变量不可以随意改动&#xff01;&#xff01;&#xff01; 控制循环的变量不可以随意改动&#xff01;&#xff01;&#xff01; 控制循环的变量不可以随意改动&#xff01;&#xff01;&#x…
阅读更多...
看480p、720p、1080p、2k、4k、视频一般需要多大带宽呢？

看480p、720p、1080p、2k、4k、视频一般需要多大带宽呢？

看视频都喜欢看高清&#xff0c;那么一般来说看电影不卡顿需要多大带宽呢&#xff1f; 以4K为例&#xff0c;这里引用一位网友的回答&#xff1a;“视频分辨率4092*2160&#xff0c;每个像素用红蓝绿三个256色(8bit)的数据表示&#xff0c;视频帧数为60fps&#xff0c;那么一秒…
阅读更多...
数据结构--二叉树的顺序实现（堆实现）

数据结构--二叉树的顺序实现（堆实现）

引言 在计算机科学中&#xff0c;二叉树是一种重要的数据结构&#xff0c;广泛应用于各种算法和程序设计中。本文将探讨二叉树的顺序实现&#xff0c;特别是堆的实现方式。 一、树 1.1树的概念与结构 树是⼀种⾮线性的数据结构&#xff0c;它是由 n(n>0) 个有限结点组成…
阅读更多...
C#串口温度读取

C#串口温度读取

背景&#xff1a;每天学点&#xff0c;坚持 要安装好虚拟串口和modbus poll&#xff0c;方便调试&#xff08;相关资源在文末&#xff0c;也可以私信找我要&#xff09; 传感器部分使用的是达林科技的DL11B-MC-D1&#xff0c;当时42软妹币买的&#xff08;官网上面有这个传感…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023