[前端] axios网络请求二次封装
一、场景描述
为什么要对axios网络请求进行二次封装?
解决代码的复用,提高可维护性。 —这个有两个方案:一个是二次封装一个是实例化。(设置一些公共的参数,然后进行请求)
为什么可以解决代码的复用:
这是最简单格式的代码,需要定义url和请求方式。
axios({method: "get",url: "http://codercba.com:9002/banner",
}).then(function (response) {console.log(response);
}).catch(function (error) {console.log(error);
});
封装之后的请求方式,减少了点代码
hyRequest.get({ url: "/banner" }).then((res) => {console.log(res);setImg(res.banners);console.log(img);});
Axios实例化的输出
const instance = axios.create({baseURL: "http://codercba.com:9002",
});instance.get("banner").then((response) => {console.log("实例化请求输出");console.log(response);
});
二、二次封装的代码实现
type.ts //定义一些类型
import type {InternalAxiosRequestConfig,AxiosRequestConfig,AxiosResponse,AxiosRequestHeaders,
} from "axios";export interface HYInterceptors<T = AxiosResponse> { //定义拦截器类型requestSuccessFn?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig;requestFailureFn?: (err: any) => any;responseSuccessFn?: (res: T) => T;responseFailureFn?: (err: any) => any;
}export interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig { //定义请求体的配置 interceptors?: HYInterceptors<T>;headers?: AxiosRequestHeaders;
}
request.ts //封装axios
import axios, { InternalAxiosRequestConfig } from "axios";
import type { AxiosInstance } from "axios";
import type { HYRequestConfig } from "./type";class HYRequest {instance: AxiosInstance; //实例constructor(config: HYRequestConfig) { this.instance = axios.create(config); //实例化axiosthis.instance.interceptors.response.use((config) => {return config;},(err) => {return err;});this.instance.interceptors.response.use((res) => {return res.data;},(err) => {return err;});this.instance.interceptors.request.use(config.interceptors?.requestSuccessFn,config.interceptors?.requestFailureFn);this.instance.interceptors.response.use(config.interceptors?.responseSuccessFn,config.interceptors?.responseFailureFn);}request<T = any>(config: HYRequestConfig<T>) {if (config.interceptors?.requestSuccessFn) {config = config.interceptors.requestSuccessFn(config 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: HYRequestConfig<T>) {return this.request({ ...config, method: "GET" });}post<T = any>(config: HYRequestConfig<T>) {return this.request({ ...config, method: "POST" });}delete<T = any>(config: HYRequestConfig<T>) {return this.request({ ...config, method: "DELETE" });}patch<T = any>(config: HYRequestConfig<T>) {return this.request({ ...config, method: "PATCH" });}
}export default HYRequest;
index.ts //实例化
import { BASE_URL, TIME_OUT } from "./config";
import HYRequest from "./request";const hyRequest = new HYRequest({baseURL: BASE_URL,timeout: TIME_OUT,interceptors: {requestSuccessFn: (config) => {return config;},},
});export default hyRequest;
可以看到其实封装也是先实例化之后再进行封装。为什么要这么做,实例化的东西不太好维护。包括对拦截器的更新。

三、上述内容整体概述

四、axios相关内容


相关文章:
[前端] axios网络请求二次封装
一、场景描述 为什么要对axios网络请求进行二次封装? 解决代码的复用,提高可维护性。 —这个有两个方案:一个是二次封装一个是实例化。(设置一些公共的参数,然后进行请求) 为什么可以解决代码的复用: 这是…...
本地部署DeepSeek Nodejs版
目录 1.下载 Ollama 2.下载DeepSeek模型 3.下载 ollama.js 1.下载 Ollama https://ollama.com/ 下载之后点击安装,等待安装成功后,打开cmd窗口,输入以下指令: ollama -v 如果显示了版本号,则代表已经下载成功了。…...
【PL/SQL】常用操作复习20250212
目录标题 1.基本语法结构二级目录三级目录 1.基本语法结构2。变量声明和使用3. SELECT 查询4.插入 insert5.更新UPDATE6.删除(DELETE) 7游标 cursor例子1:基本游标使用例子2:使用FOR循环的简化写法实际应用例子:给高工资员工增加奖金 8 IF 条…...
vue3-02基础认识vue3中main.js入口文件,app.vue(不存在唯一根节点),扩展程序vue-devtools安装
1.main.js入口文件 main.js入口文件 // 引入的再是vue构造函数 // 引入的是createApp的工厂函数-直接进行引用 import { createApp } from vue import App from ./App.vue// vue3中 // createApp(App).mount(#app) // 创建应用实列对象-类似vue2中的vm,app比vm更轻 const app…...
如何下载Qt和运行第一个程序。
Ubuntu24.04 下载比较容易,基本都是无脑操作。途中汇出现有个别package下载不成功的情况,重新下载即可。 文章目录 下载qt运行qt第一个项目 下载qt 1.先找到官网,点击Download。 2.然后选择,community User 3.然后会跳转到这个…...
【MySQL例题】我在广州学Mysql 系列——有关数据备份与还原的示例
ℹ️大家好,我是练小杰,今天周二,明天就是元宵节了呀!!😆 俗话说“众里寻他千百度。蓦然回首,那人却在,灯火阑珊处。” 本文主要对数据库备份与还原的知识点例题学习~~ 前情回顾&…...
硬件学习笔记--40 电磁兼容试验-4 快速瞬变脉冲群试验介绍
目录 电磁兼容试验-快速瞬变脉冲群试验介绍 1.试验目的 2.试验方法 3.判定依据及意义 电磁兼容试验-快速瞬变脉冲群试验介绍 驻留时间是在规定频率下影响量施加的持续时间。被试设备(EUT)在经受扫频频带的电磁影响量或电磁干扰的情况下,在…...
国密算法SM1、SM2、SM3和SM4 具体的使用和区别
国密算法是中国自主研发的密码算法,包括SM1、SM2、SM3和SM4,分别用于不同场景。以下是它们的具体使用和区别: SM1 对称加密算法 类型: 对称加密 密钥长度: 128位 使用场景: 用于数据加密和解密,适用于金融、政务等领域。 特点: …...
在Ubuntu中安装Docker并配置国内镜像
官方下载安装链接 https://docs.docker.com/engine/install/ubuntu/ 1.查看系统版本,并与之与docker文档对应 OS requirements# 查看系统版本命令 lsb_release -a 2.卸载旧版本 Uninstall old versions 3.安装新版本 Installation methods Install using the…...
【大模型】阿里云百炼平台对接DeepSeek-R1大模型使用详解
目录 一、前言 二、DeepSeek简介 2.1 DeepSeek 是什么 2.2 DeepSeek R1特点 2.2.1 DeepSeek-R1创新点 2.3 DeepSeek R1应用场景 2.4 与其他大模型对比 三、阿里云百炼大平台介绍 3.1 阿里云百炼大平台是什么 3.2 阿里云百炼平台主要功能 3.2.1 应用场景 3.3 为什么选…...
DeepSeek本地部署详细指南
DeepSeek本地部署详细指南 随着人工智能技术的飞速发展,本地部署大模型的需求也日益增加。DeepSeek作为一款开源且性能强大的大语言模型,提供了灵活的本地部署方案,让用户能够在本地环境中高效运行模型,同时保护数据隐私。以下是…...
厘米和磅的转换关系
在排版和设计领域,厘米(cm)和磅(pt)都是常用的长度度量单位,它们之间的转换关系基于特定的换算标准,下面为你详细介绍: 基本换算关系 磅是印刷行业常用的长度单位,1英寸…...
Unity-Mirror网络框架-从入门到精通之LagCompensation示例
文章目录 前言什么是滞后补偿Lag Compensation示例延迟补偿原理ServerCubeClientCubeCapture2DSnapshot3D补充LagCompensation.cs 独立算法滞后补偿器组件注意:算法最小示例前言 在现代游戏开发中,网络功能日益成为提升游戏体验的关键组成部分。本系列文章将为读者提供对Mir…...
DeepSeek+3D视觉机器人应用场景、前景和简单设计思路
DeepSeek3D视觉机器人在多个领域具有广泛的应用场景和巨大的前景。以下是详细的分析: 应用场景 制造业 自动化装配:机器人可以精确地抓取和装配零件,提高生产效率和产品质量。 质量检测:通过3D视觉技术检测产品缺陷,确…...
STM32+Proteus+DS18B20数码管仿真实验
1. 实验准备 硬件方面: 了解 STM32 单片机的基本原理和使用方法,本实验可选用常见的 STM32F103 系列。熟悉 DS18B20 温度传感器的工作原理和通信协议(单总线协议)。数码管可选用共阴极或共阳极数码管,用于显示温度值。…...
Java自动生成api文档
在 Java 开发中,自动生成 API 文档是一项非常实用的功能,它能帮助开发者快速了解项目中的类、方法、参数等信息。以下为你介绍几种常见的 Java 自动生成 API 文档的方式: 1. 使用 Javadoc Javadoc 是 Java 自带的工具,它可以从 J…...
PHP的JIT编译器
【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 PHP是一种广泛使用的脚本语言,被用于构建…...
Golang学习历程【第七篇 闭包type defer panic recover了解time包】
Golang学习历程【第七篇 闭包&type defer panic recover了解】 1. 闭包1.1 闭包的定义1.2 闭包的特点1.3 闭包的示例 2. 类型(type)2.1 自定义类型2.2 类型示例 3. 延迟执行(Defer)3.1 defer 的用法3.2 defer 示例 4. 恐慌(Panic…...
oracle表分区--范围分区
文章目录 oracle表分区分区的原因分区的优势oracle表分区的作用oracle表分区类型一、范围分区二、 创建分区表和使用:1、按照数值范围划分2、按照时间范围3、MAXVALUE2. 向现有表添加新的分区3、 分区维护和重新组织(合并/删除) oracle表分区…...
使用亚马逊针对 PyTorch 和 MinIO 的 S3 连接器进行模型检查点处理
2023 年 11 月,Amazon 宣布推出适用于 PyTorch 的 S3 连接器。适用于 PyTorch 的 Amazon S3 连接器提供了专为 S3 对象存储构建的 PyTorch 数据集基元(数据集和数据加载器)的实现。它支持用于随机数据访问模式的地图样式数据集和用于流式处理…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
