[前端] 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 数据集基元(数据集和数据加载器)的实现。它支持用于随机数据访问模式的地图样式数据集和用于流式处理…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
CppCon 2015 学习:Time Programming Fundamentals
Civil Time 公历时间 特点: 共 6 个字段: Year(年)Month(月)Day(日)Hour(小时)Minute(分钟)Second(秒) 表示…...
