单例模式实现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进行封装

TypeScript 复制代码
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;
相关推荐
晓杰'38 分钟前
从0到1实现 Balatro 游戏后端(2):NestJS框架搭建与项目结构设计
后端·websocket·typescript·node.js·游戏开发·项目实战·nestjs
谙弆悕博士2 小时前
快速学C语言——第16章:预处理
c语言·开发语言·chrome·笔记·创业创新·预处理·业界资讯
yuan199972 小时前
基于 C# 实现的 Omron HostLink (FINS) 协议 PLC 通讯
开发语言·c#
qq_422828623 小时前
android图形学之SurfaceControl和Surface的关系 五
android·开发语言·python
如竟没有火炬3 小时前
用队列实现栈
开发语言·数据结构·python·算法·leetcode·深度优先
折哥的程序人生 · 物流技术专研4 小时前
《Java 100 天进阶之路》第17篇:Java常用包装类与自动装箱拆箱深入
java·开发语言·后端·面试
C+++Python4 小时前
C 语言 动态内存分配:malloc /calloc/realloc /free
c语言·开发语言
水木流年追梦4 小时前
大模型入门-应用篇3-Agent智能体
开发语言·python·算法·leetcode·正则表达式
凯瑟琳.奥古斯特4 小时前
假脱机技术原理详解
开发语言·职场和发展
敲代码的瓦龙5 小时前
Java?枚举!!!
java·开发语言