当前位置: 首页 > news >正文

单例模式实现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.mrgr.cn/news/79093.html

相关文章:

  • VScode+Latex (Recipe terminated with fatal error: spawn xelatex ENOENT)
  • GA-CNN-LSTM-Attention、CNN-LSTM-Attention、GA-CNN-LSTM、CNN-LSTM四模型多变量时序预测一键对比
  • 宝塔php7.4安装报错,无法安装,php8以上可以安装,以下的不行,gd库什么的都正常
  • 【云计算】OpenStack云计算平台
  • Mac——Cpolar内网穿透实战
  • 【leetcode 13】哈希表 242.有效的字母异位词
  • 代码随想录算法训练营第51期第8天 | 344. 反转字符串、541.反转字符串 II、卡码网:54.替换数字
  • 【计算机网络】实验11:边界网关协议BGP
  • 计算机毕业设计hadoop+spark民宿推荐系统 民宿数据分析可视化大屏 民宿爬虫 民宿大数据 知识图谱 机器学习 大数据毕业设计
  • Dataset用load_dataset读图片和对应的caption的一个坑
  • Jupyter Notebook认识、安装和启动以及使用
  • 【大数据技术基础】 课程 第1章 大数据技术概述 大数据基础编程、实验和案例教程(第2版)
  • SpringBoot如何使用EasyExcel实现表格导出(简洁快速入门版本)
  • MotorCAD:定子绕组中的趋肤效应和邻近效应损耗
  • linux常用指令 | 适合初学者
  • 力扣第89题 格雷编码
  • 【AI工具】强大的AI编辑器Cursor详细使用教程
  • Spring 容器 详解
  • 【5G】技术组件 Technology Components
  • 电子应用设计方案-38:智能语音系统方案设计
  • 游戏引擎学习第33天
  • 力扣第90题:带重复元素的子集
  • 【ArcGIS微课1000例】0134:ArcGIS Earth实现二维建筑物的三维完美显示
  • 探索 Webpack:前端工程化的核心驱动力与应用场景全解析
  • Android EventBus最全面试题及参考答案
  • Git 详解