单例模式实现axios的封装(TS版本)

        Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

        在日常前端开发过程中,我们一般是在main.ts(或main.js)中直接引入后挂载到vue上使用,没有单独分模块进行管理,不利于我们后期的代码维护,所以,在学习过面向对象设计原则后,我们要用ts的面向对象方法对其进行封装,而在一个项目中,一般axios是作为一个工具类被我们使用,也就是说可以只创建一个对象,所以这里可以模仿Java中springBoot的单例模式对其进行封装。

什么是单例模式?

        单例模式是一种设计模式,其目的是确保一个类仅有一个实例,并提供一个全局访问点来获取该实例。

        在单例模式中,类只能有一个实例,并提供一个静态方法或函数来获取该实例。当第一次调用该方法或函数时,会创建实例,并将其保存起来。之后的调用都会返回已存在的实例,而不是创建新的实例。

单例模式的主要特点包括:

  1. 一个类只有一个实例。
  2. 提供一个全局访问点来获取该实例。
  3. 通过私有的构造函数来限制实例的创建。

单例模式的好处包括:

  1. 提供了一个全局的访问点,方便其他代码对实例进行操作。
  2. 避免了重复创建实例的开销,提高了性能。

        在实际应用中,单例模式经常用于需要管理共享资源的场景,比如数据库连接池、线程池、缓存等。它可以确保资源的唯一性,并提供全局的访问方式,方便其他代码对资源进行操作。

用单例模式对Axios进行封装

import axios, { AxiosInstance } from "axios";interface Instance{baseURL: string;timeout: number;headers: object;
}const instance: Instance = {baseURL: 'http://localhost:3000',timeout: 1000 * 5,headers: {'Content-Type': 'application/json'}
}class Axios{private static axios: Axios = new Axios();private instance: AxiosInstance;private constructor(){this.instance = axios.create(instance);this.instance.interceptors.request.use(config => {if(sessionStorage.getItem("token")){config.headers.Authorization = sessionStorage.getItem("token")}return config;}, error => {console.log("错误", error)return Promise.reject(error)})this.instance.interceptors.response.use(response => {console.log("响应拦截=>", response);if(response.data.code >= 200 && response.data.code < 300){return response.data;}else{return Promise.reject(response.data)}})}public static getAxios(): Axios{return Axios.axios;}public getInstance(): AxiosInstance{return Axios.axios.instance;}
}export default Axios;

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

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

相关文章

Java刷题常见的集合类,各种函数的使用以及常见的类型转化等等

前言 相信大家在刷算法题的过程中&#xff0c;好不容易想出来大概的思路&#xff0c;也知道去用哪个集合类&#xff0c;但各个集合类的一些命令都长得太像&#xff0c;很容易将他们弄错&#xff0c;并且在各集合之间的转化也是特别烦人&#xff0c;还有很多实用的函数都知道可…

perf list PMU 缓存事件

事件标识事件解释PMU事件路径l1d_cacheL1数据缓存的访问次数&#xff0c;L1缓存是CPU内部最快的缓存&#xff0c;位于距离CPU核心非常近的位置。armv8_pmuv3/l1d_cache/l1d_cache_lmiss_rd表示从L1数据缓存读取数据时发生缓存未命中的次数。armv8_pmuv3/l1d_cache_lmiss_rd/l1d…

Linux CentOS

​阿里云开源镜像下载链接 https://mirrors.aliyun.com/centos/7/isos/x86_64/ VMware 安装 CentOS7 自定义 下一步 选择稍后安装操作系统 选择 输入 查看物理机CPU内核数量 CtrlShiftEsc 总数不超过物理机内核数量 推荐内存 自选 推荐 推荐 默认 拆分成多个 默认 自定义硬件…

大数据新视界 -- Hive 数据湖集成与数据治理(下)(26 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Debian 的更新原理

Debian 是一个遵循点版本&#xff08;point release&#xff09;模式的 Linux 发行版&#xff0c;更新原理是基于点版本发布模式&#xff0c;通过 APT 工具来管理和同步软件包&#xff0c;同时考虑到依赖性、安全性和稳定性。用户可以通过简单的命令来更新系统&#xff0c;而不…

数据结构 (26)图的遍历

前言 数据结构中的图遍历是指从图中的任一顶点出发&#xff0c;按照某种方法访问图中的所有顶点&#xff0c;且每个顶点只访问一次。 一、遍历方法 遍历主要有两种方法&#xff1a;深度优先搜索&#xff08;DFS&#xff09;和广度优先搜索&#xff08;BFS&#xff09;。 1.深度…

B站狂神说Mybatis+Spring+SpringMVC整合理解(ssm框架整合)

文章目录 0.写在前面(对mybatis,spring的理解)&#xff08;不看可跳过&#xff09;0.1 为什么需要mybatis0.2 为什么需要spring0.3为什么需要springmvc 1.新建ssmbuild数据库2.新建Maven项目3.初始化步骤3.1 配置下载maven依赖&#xff0c;构建资源导出3.2 连接数据库3.3建包&a…

txt地图格式处理

1、txt地图格式 [属性描述] 坐标系2000国家大地坐标系 几度分带3 投影类型高斯克吕格 计量单位米 带号38 精度0.001 转换参数,,,,,, [地块坐标] 5,475.888,1,测试地块1,面,J50G077061,公路用地,地下, J1,1,113.22222222222222,23.129111721551794 J2,1,113.2722314…

简化XPath表达式的方法与实践

XPath表达式用于在XML或HTML文档中定位元素。有时候&#xff0c;XPath表达式可能会变得非常冗长和复杂&#xff0c;这不仅难以阅读和维护&#xff0c;而且也可能影响性能。因此&#xff0c;学会如何简化XPath表达式是非常重要的。本文将介绍几种简化XPath表达式的方法&#xff…

el-cascader 使用笔记

1.效果 2.官网 https://element.eleme.cn/#/zh-CN/component/cascader 3.动态加载&#xff08;官网&#xff09; <el-cascader :props"props"></el-cascader><script>let id 0;export default {data() {return {props: {lazy: true,lazyLoad (…

MySQL事件

1、在数据库d_eams中创建一个名为E_enent的事件&#xff0c;用于每隔10s向数据表T_event 中插入一条数据 use d_eams; create event E_event on schedule every 10 second on completion preserve do insert into T_event(用户, 创建时间) values(Root, now()); 2、查看当前…

003-SpringBoot整合Pagehelper

SpringBoot整合Pagehelper 一、引入依赖二、配置 application.yml三、配置 MybatisPlusConfig四、Controller五、ServiceImpl一、引入依赖 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</art…

C语言(分支结构)

问题引出 我们在程序设计往往会遇到如下的问题&#xff0c;比如下的函数的计算。 也就是我们是必须要通过一个条件的结果来选择下一步的操作&#xff0c;算法上属于一个分支结构&#xff0c;C语言中实现分支结构主要使用if语句。 条件判断 根据某个条件成立与否&#xff0c…

SpringAop(1)

Spring中有两大重心&#xff1a;springIoc和springAop springioc将bean的控制权交给了spring管理&#xff0c;直接从spring中获取&#xff0c;通过五大注解来告诉spring帮我管理这个对象。通过Autowired和构造方法和set方法注入。 不仅仅是学习重点也是面试常考的难点。 spr…

GoReplay开源工具使用教程

目录 一、GoReplay环境搭建 1、Mac、Linux安装GoReplay环境 二、GoReplay录制与重播 1、搭建练习接口 2、录制命令 3、重播命令 三、GoReplay单个命令 1、常用命令 2、其他命令 3、命令示例 4、性能测试 5、正则表达式 四、gorepaly组合命令 1、组合命令实例 2、…

uniapp动态表单

使用了uniapp自带扩展组件和uv-ui组件库自行安装下载 <template><view class"assetEdit_container"><view class"type-box"><uv-formlabelPosition"left"labelWidth"140rpx":model"formData"ref"…

Nginx:ssl

目录 部署ssl前提 nginx部署ssl证书 部署ssl部署建议 部署ssl前提 网站有域名根据域名申请到ssl证书&#xff0c;并下载证书部署到nginx中 部署了ssl证书后&#xff0c;访问的流量是加密的。 nginx部署ssl证书 #80端口跳转到443 server {listen 80;return 302 https://1…

USB 声卡全解析:提升音频体验的得力助手

在当今数字化的时代&#xff0c;音频领域的追求愈发多元。无论是热衷聆听高品质音乐的爱好者&#xff0c;还是在专业音频工作中精雕细琢的人士&#xff0c;亦或是在游戏世界里渴望极致音效沉浸的玩家&#xff0c;都始终在寻觅能让音频体验更上一层楼的妙法。而 USB 声卡&#x…

[TPAMI 2024]Vision-Language Models for Vision Tasks: A Survey

论文网址&#xff1a;Vision-Language Models for Vision Tasks: A Survey | IEEE Journals & Magazine | IEEE Xplore 论文Github页面&#xff1a;GitHub - jingyi0000/VLM_survey: Collection of AWESOME vision-language models for vision tasks 英文是纯手打的&…

深度学习模型:门控循环单元(GRU)详解

本文深入探讨了门控循环单元&#xff08;GRU&#xff09;&#xff0c;它是一种简化版的长短期记忆网络&#xff08;LSTM&#xff09;&#xff0c;在处理序列数据方面表现出色。文章详细介绍了 GRU 的基本原理、与 LSTM 的对比、在不同领域的应用以及相关的代码实现&#xff0c;…