ts 简易封装 axios，统一 API

文章目录

    • 为什么要封装
    • 目标
    • 文件结构
    • 封装通用请求方法
    • 获得类型提示
    • http 方法
    • 文件上传
    • 使用示例
      • 实例化
      • post 请求
      • 类型提示
      • 文件上传
    • 总结
    • 完整代码：

为什么要封装

axios 本身已经很好用了，看似多次一举的封装则是为了让 axios 与项目解耦。
比如想要将网络请求换成 fetch，那么只需按之前暴露的 api 重新封装一下 fetch 即可，并不需要改动项目代码。

目标

  1. 统一请求API
  2. 使用接口数据时能有代码提示

文件结构

│  index.ts					# 实例化封装类实例
│
├─http
│      request.ts  			# 封装axios
│
└─modules
       login.ts				# 业务模块
       upload.ts

封装通用请求方法

先封装一个通用的方法 request，然后在此基础上封装出 http 方法：

class HttpRequest {
    private readonly instance: AxiosInstance;

    constructor(config: AxiosRequestConfig) {
        this.instance = axios.create(config);
    }

    request<TReqBodyData, TResData, TResStructure = ResStructure<TResData>>(
        config: AxiosRequestConfig<TReqBodyData>
    ): Promise<TResStructure> {
        return new Promise<TResStructure>((resolve, reject) => {
            this.instance
                .request<any, AxiosResponse<TResStructure>>(config)
                .then(res => {
                    // 返回接口数据
                    resolve(res?.data);
                })
                .catch(err => reject(err));
        });
    }
}

获得类型提示

我希望在使用请求方法时，可以得到后端接口请求参数的提示，并且希望在使用响应结果时，也能得到类型提示。

因此设计了三个泛型：

  1. TReqBodyData：请求体类型
  2. TResStructure：接口响应结构类型
    1. TResData：接口响应 data 字段数据类型

并提供了一个默认的响应结构。使用时可以根据需要改成项目中通用的接口规则。当然在具体方法上也支持自定义响应接口结构，以适应一些不符合通用接口规则的接口。

/** 默认接口返回结构 */
export interface ResStructure<TResData = any> {
    code: number;
    data: TResData;
    msg?: string;
}

http 方法

由 request 方法封装出 http 方法同名的 api。

get<TReqBodyData, TResData, TResStructure = ResStructure<TResData>>(
    config?: AxiosRequestConfig<TReqBodyData>
): Promise<TResStructure> {
    return this.request({ ...config, method: "GET" });
}

post<TReqBodyData, TResData, TResStructure = ResStructure<TResData>>(
    config: AxiosRequestConfig<TReqBodyData>
): Promise<TResStructure> {
    return this.request({ ...config, method: "POST" });
}
...

文件上传

文件上传一般使用 formdata，我们也可以简易封装一下。

uploadFile 方法接收 4 个参数：

  1. axios config 对象
  2. 表单内容
    1. 文件对象
    2. 文件对象的表单字段名
    3. hash
    4. 文件名
    5. 更多的表单数据（可通过泛型 TOtherFormData 指定类型）
  3. 上传进度回调
  4. 取消上传的 signal
export interface UploadFileParams<TOtherFormData = Record<string, any>>  {
    file: File | Blob;  // 文件对象
    fileHash?: string;  // hash
    filename?: string;  // 文件名
    filed?: string;     // formdata 中文件对象的字段
    formData?: TOtherFormData; // 文件其他的参数(对象 key-value 将作为表单数据)
}

    /**
     * 文件上传
     * @param {AxiosRequestConfig} config axios 请求配置对象
     * @param {UploadFileParams} params 待上传文件及其一些参数
     * @param {(event: AxiosProgressEvent) => void} uploadProgress 上传进度的回调函数
     * @param {AbortSignal}cancelSignal 取消axios请求的 signal
     * @returns
     */
    uploadFile<TOtherFormData>(
        config: AxiosRequestConfig,
        params: UploadFileParams<TOtherFormData>,
        uploadProgress?: (event: AxiosProgressEvent) => void,
        cancelSignal?: AbortSignal
    ) {
        const formData = new window.FormData();

        // 设置默认文件表单字段为 file
        const customFilename = params.filed ?? "file";

        // 是否指定文件名，没有就用文件本来的名字
        if (params.filename) {
            formData.append(customFilename, params.file, params.filename);
            formData.append("filename", params.filename);
        } else {
            formData.append(customFilename, params.file);
        }
        // 添加文件 hash
        if (params.fileHash) {
            formData.append("fileHash", params.fileHash);
        }

        // 是否有文件的额外信息补充进表单
        if (params.formData) {
            Object.keys(params.formData).forEach(key => {
                const value = params.formData![key as keyof TOtherFormData];
                if (Array.isArray(value)) {
                    value.forEach(item => {
                        formData.append(`${key}[]`, item);
                    });
                    return;
                }
                formData.append(key, value as any);
            });
        }

        return this.instance.request({
            ...config,
            method: "POST",
            timeout: 60 * 60 * 1000, // 60分钟
            data: formData,
            onUploadProgress: uploadProgress,
            signal: cancelSignal,
            headers: {
                "Content-type": "multipart/form-data;charset=UTF-8"
            }
        });
    }

使用示例

实例化

import HttpRequest from "./request";

/** 实例化 */
const httpRequest = new HttpRequest({
    baseURL: "http://localhost:8080",
    timeout: 10000
});

post 请求

/** post 请求 */

// 定义请求体类型
interface ReqBodyData {
    user: string;
    age: number;
}

// 定义接口响应中 data 字段的类型
interface ResDataPost {
    token: string;
}

export function postReq(data: ReqBodyData) {
    return httpRequest.post<ReqBodyData, ResDataPost>({
        url: "/__api/mock/post_test",
        data: data
    });
}


/** 发起请求 */
async function handleClickPost() {
    const res = await postReq({ user: "ikun", age: 18 });
    console.log(res);
}

类型提示

获得使用请求方法时的请求接口参数类型提示：

获得请求接口时的参数类型提示

获得接口默认响应结构的提示：

获得接口默认响应结构的提示

  • 如果个别方法响应结构特殊，则可传入第三个泛型，自定义当前方法的响应结构
// 响应结构
interface ResStructure {
    code: number;
    list: string[];
    type: string;
    time: number;
}
function postReq(data: ReqBodyData) {
    return httpRequest.post<ReqBodyData, any, ResStructure>({
        url: "/__api/mock/post_test",
        data: data
    });
}

当前方法自定义接口响应结构：

自定义响应结构

获得接口响应中 data 字段的提示：

获得接口响应中 data 字段的提示

文件上传

/**
 * 文件上传
 */

interface OtherFormData {
    fileSize: number;
}

function uploadFileReq(
    fileInfo: UploadFileParams<OtherFormData>,
    onUploadProgress?: (event: AxiosProgressEvent) => void,
    signal?: AbortSignal
) {
    return httpRequest.uploadFile<OtherFormData>(
        {
            baseURL: import.meta.env.VITE_APP_UPLOAD_BASE_URL,
            url: "/upload"
        },
        fileInfo,
        onUploadProgress,
        signal
    );
}


// 发起请求

const controller = new AbortController();

async function handleClickUploadFile() {
    const file = new File(["hello"], "hello.txt", { type: "text/plain" });

    const res = await uploadFileReq(
        { file, fileHash: "xxxx", filename: "hello.txt", formData: { fileSize: 1024 } },
        event => console.log(event.loaded),
        controller.signal
    );
  
    console.log(res);
}

总结

  1. 在通用请求方法 request 基础上封装了同名的 http 方法
  2. 使用泛型可获得请求参数和请求结果的类型提示
  3. 额外封装了文件上传的方法

完整代码：

import axios, { AxiosInstance, AxiosProgressEvent, AxiosRequestConfig, AxiosResponse } from "axios";

export interface UploadFileParams<TOtherFormData = Record<string, any>> {
    file: File | Blob;
    fileHash?: string;
    filename?: string;
    filed?: string;
    formData?: TOtherFormData; // 文件其他的参数(对象 key-value 将作为表单数据)
}

/** 默认接口返回结构 */
export interface ResStructure<TResData = any> {
    code: number;
    data: TResData;
    msg?: string;
}

/**
 * A wrapper class for making HTTP requests using Axios.
 * @class HttpRequest
 * @example
 * // Usage example:
 * const httpRequest = new HttpRequest({baseURL: 'http://localhost:8888'});
 * httpRequest.get<TReqBodyData, TResData, TResStructure>({ url: '/users/1' })
 *   .then(response => {
 *     console.log(response.name); // logs the name of the user
 *   })
 *   .catch(error => {
 *     console.error(error);
 *   });
 *
 * @property {AxiosInstance} instance - The Axios instance used for making requests.
 */
class HttpRequest {
    private readonly instance: AxiosInstance;

    constructor(config: AxiosRequestConfig) {
        this.instance = axios.create(config);
    }

    /**
     * Sends a request and returns a Promise that resolves with the response data.
     * @template TReqBodyData - The type of the request body.
     * @template TResData - The type of the `data` field in the `{code, data}` response structure.
     * @template TResStructure - The type of the response structure. The default is `{code, data, msg}`.
     * @param {AxiosRequestConfig} [config] - The custom configuration for the request.
     * @returns {Promise<TResStructure>} - A Promise that resolves with the response data.
     * @throws {Error} - If the request fails.
     *
     * @example
     * // Sends a GET request and expects a response with a JSON object.
     * const response = await request<any, {name: string}>({
     *   method: 'GET',
     *   url: '/users/1',
     * });
     * console.log(response.name); // logs the name of the user
     */
    request<TReqBodyData, TResData, TResStructure = ResStructure<TResData>>(
        config: AxiosRequestConfig<TReqBodyData>
    ): Promise<TResStructure> {
        return new Promise<TResStructure>((resolve, reject) => {
            this.instance
                .request<any, AxiosResponse<TResStructure>>(config)
                .then(res => {
                    // 返回接口数据
                    resolve(res?.data);
                })
                .catch(err => reject(err));
        });
    }

    /**
     * 发送 GET 请求
     * @template TReqBodyData 请求体数据类型
     * @template TResData 接口响应 data 字段数据类型
     * @template TResStructure 接口响应结构，默认为 {code, data, msg}
     * @param {AxiosRequestConfig} config 请求配置
     * @returns {Promise} 接口响应结果
     */
    get<TReqBodyData, TResData, TResStructure = ResStructure<TResData>>(
        config?: AxiosRequestConfig<TReqBodyData>
    ): Promise<TResStructure> {
        return this.request({ ...config, method: "GET" });
    }

    /**
     * 发送 post 请求
     * @template TReqBodyData 请求体数据类型
     * @template TResData 接口响应 data 字段数据类型
     * @template TResStructure 接口响应结构，默认为 {code, data, msg}
     * @param {AxiosRequestConfig} config 请求配置
     * @returns {Promise} 接口响应结果
     */
    post<TReqBodyData, TResData, TResStructure = ResStructure<TResData>>(
        config: AxiosRequestConfig<TReqBodyData>
    ): Promise<TResStructure> {
        return this.request({ ...config, method: "POST" });
    }

    patch<TReqBodyData, TResData, TResStructure = ResStructure<TResData>>(
        config: AxiosRequestConfig<TReqBodyData>
    ): Promise<TResStructure> {
        return this.request({ ...config, method: "PATCH" });
    }

    delete<TReqBodyData, TResData, TResStructure = ResStructure<TResData>>(
        config?: AxiosRequestConfig<TReqBodyData>
    ): Promise<TResStructure> {
        return this.request({ ...config, method: "DELETE" });
    }

    /**
     * 获取当前 axios 实例
     */
    getInstance(): AxiosInstance {
        return this.instance;
    }

    /**
     * 文件上传
     * @param {AxiosRequestConfig} config axios 请求配置对象
     * @param {UploadFileParams} params 待上传文件及其一些参数
     * @param {(event: AxiosProgressEvent) => void} uploadProgress 上传进度的回调函数
     * @param {AbortSignal}cancelSignal 取消axios请求的 signal
     * @returns
     */
    uploadFile<TOtherFormData = any>(
        config: AxiosRequestConfig,
        params: UploadFileParams<TOtherFormData>,
        uploadProgress?: (event: AxiosProgressEvent) => void,
        cancelSignal?: AbortSignal
    ) {
        const formData = new window.FormData();

        // 设置默认文件表单字段为 file
        const customFilename = params.filed || "file";

        // 是否指定文件名，没有就用文件本来的名字
        if (params.filename) {
            formData.append(customFilename, params.file, params.filename);
            formData.append("filename", params.filename);
        } else {
            formData.append(customFilename, params.file);
        }
        // 添加文件 hash
        if (params.fileHash) {
            formData.append("fileHash", params.fileHash);
        }

        // 是否有文件的额外信息补充进表单
        if (params.formData) {
            Object.keys(params.formData).forEach(key => {
                const value = params.formData![key as keyof TOtherFormData];
                if (Array.isArray(value)) {
                    value.forEach(item => {
                        // 对象属性值为数组时，表单字段加一个[]
                        formData.append(`${key}[]`, item);
                    });
                    return;
                }
                formData.append(key, value as any);
            });
        }

        return this.instance.request({
            ...config,
            method: "POST",
            timeout: 60 * 60 * 1000, // 60分钟
            data: formData,
            onUploadProgress: uploadProgress,
            signal: cancelSignal,
            headers: {
                "Content-type": "multipart/form-data;charset=UTF-8"
            }
        });
    }
}

export default HttpRequest;

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

JVM堆内存解析

JVM堆内存解析

一、JVM堆内存介绍 Java大多数对象都是存放在堆中&#xff0c;堆内存是完全自动化管理&#xff0c;根据垃圾回收机制不同&#xff0c;Java堆有不同的结构&#xff0c;下面是我们一台生产环境服务器JVM堆内存空间分配情况&#xff0c;JVM只设置了-Xms2048M -Xmx2048M。 1、JVM堆…
阅读更多...
软件开发项目文档系列之八数据库设计说明书

软件开发项目文档系列之八数据库设计说明书

数据库设计说明书是一个关键文档&#xff0c;它提供了有关数据库的详细信息&#xff0c;包括设计、结构、运行环境、数据安全、管理和维护等方面的内容。 1 引言 引言部分&#xff0c;简要介绍数据库设计说明书的目的和内容。这部分通常包括以下内容&#xff1a; 引言的目的…
阅读更多...
基于通道的数据增强方法_使用随机量化的方式

基于通道的数据增强方法_使用随机量化的方式

前言本文提出了一种适用于任意数据模态的自监督学习数据增强技术 来源&#xff1a;机器之心 仅用于学术分享&#xff0c;若侵权请联系删除 自监督学习算法在自然语言处理、计算机视觉等领域取得了重大进展。这些自监督学习算法尽管在概念上是通用的&#xff0c;但是在具体操作…
阅读更多...
免费小程序商城搭建之b2b2c o2o 多商家入驻商城 直播带货商城 电子商务b2b2c o2o 多商家入驻商城 直播带货商城 电子商务

免费小程序商城搭建之b2b2c o2o 多商家入驻商城 直播带货商城 电子商务b2b2c o2o 多商家入驻商城 直播带货商城 电子商务

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…
阅读更多...
MyBatis实验（四）——关联查询

MyBatis实验（四）——关联查询

前言 多表关联查询是软件开发中最常见的应用场景&#xff0c;多表查询需要将数据实体之间的一对多、多对多、一对一的关系的转换为复杂的数据对象。mybaits提供的association和collection元素&#xff0c;通过映射文件构造复杂实体对象&#xff0c;在构造实体过程中&#xff0…
阅读更多...
leetcode 155. 最小栈

leetcode 155. 最小栈

2023.10.31 本题关键在于要求在能在常数时间内检索出最小元素。 其他四个方法都可以用普通的栈进行实现&#xff0c;最后一个方法“获取堆栈中最小元素” 可以借助一个新栈&#xff0c;专门用于存储栈中最小值的。具体细节看java代码&#xff1a; class MinStack {private De…
阅读更多...
一百九十八、Java——IDEA项目中有参构造、无参构造等快捷键（持续梳理中）

一百九十八、Java——IDEA项目中有参构造、无参构造等快捷键（持续梳理中）

一、目的 由于IDEA项目中有很多快捷键&#xff0c;可以很好的提高开发效率&#xff0c;因此整理一下 二、快捷键 &#xff08;一&#xff09;快捷键生成public static void main(String[] args) {} 快捷键&#xff1a;psvm &#xff08;二&#xff09;快捷键在test中创建cn…
阅读更多...
Linux服务器使用GPU技巧

Linux服务器使用GPU技巧

进行深度学习实验的时候用pytorch-gpu&#xff0c;经常要与GPU打交道&#xff1b; 所以经常遇到奇奇怪怪的问题&#xff1b; 查看GPU占用情况 watch -n 10 nvidia-smi 使用技巧 torch.nn.DataParallel() CLASStorch.nn.DataParallel(module, device_idsNone, output_devic…
阅读更多...
AntDB数据库荣获 “2023年信创物联网优秀服务商”

AntDB数据库荣获 “2023年信创物联网优秀服务商”

日前&#xff0c;在2023世界数字经济大会暨第十三届智博会 2023京甬信创物联网产融对接会上&#xff0c;AntDB数据库再获殊荣&#xff0c;获评“2023年信创物联网优秀服务商”。 图1&#xff1a;2023年信创物联网优秀服务商颁奖现场 信创物联网是信息技术应用创新与物联网的结…
阅读更多...
mac录屏快捷键指南，轻松录制屏幕内容！

mac录屏快捷键指南，轻松录制屏幕内容！

“大家知道mac电脑有录屏快捷键吗&#xff0c;现在录屏不太方便&#xff0c;每次都花很多时间&#xff0c;要是有录屏快捷键&#xff0c;应该会快速很多&#xff0c;可是哪里都找不到&#xff0c;有人知道吗&#xff1f;帮帮我&#xff01;” 苹果的mac电脑以其精美的设计和卓…
阅读更多...
java商城免费搭建 VR全景商城 saas商城 b2b2c商城 o2o商城 积分商城 秒杀商城 拼团商城 分销商城 短视频商城

java商城免费搭建 VR全景商城 saas商城 b2b2c商城 o2o商城 积分商城 秒杀商城 拼团商城 分销商城 短视频商城

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…
阅读更多...
波浪理论第3波anzo capital昂首资本3个方法3秒确认

波浪理论第3波anzo capital昂首资本3个方法3秒确认

要想通过波浪理论在交易中赚取最大利润&#xff0c;确认第三波必不可少&#xff0c;因为第三波通常是趋势中最大和最强的一波&#xff0c;今天anzo capital昂首资本3个方法3秒确认。 首先&#xff0c;第一个确认方法—斜率。 通常&#xff0c;第三波的斜率会比第一波更陡峭&a…
阅读更多...
钡铼技术助力ARM工控机在智慧交通中的创新应用

钡铼技术助力ARM工控机在智慧交通中的创新应用

在交通运输领域&#xff0c;钡铼技术ARM工控机可以实现以下功能&#xff1a; 实时监控和管理&#xff1a;利用钡铼技术ARM工控机&#xff0c;可以对交通运输中的车辆、船只、飞机等进行实时监测和管理&#xff0c;帮助调度员提高车辆调度和路线规划的准确性和效率。 安全保障&…
阅读更多...
查看局域网内另外一个电脑屏幕

查看局域网内另外一个电脑屏幕

查看局域网内另外一个电脑屏幕是一个相对简单但实用的技术。在局域网中&#xff0c;我们可以使用远程桌面、网络发现和共享、软件等技术来实现这一目标。 今天重点讲解一下&#xff0c;如何通过域之盾软件来查看另一个电脑屏幕&#xff1a; 1、部署软件&#xff0c;安装提示一…
阅读更多...
软件测试优秀的测试工具，会用三款工作效率能提升一半

软件测试优秀的测试工具，会用三款工作效率能提升一半

我们将常用的测试工具分为10类。 1. 测试管理工具 2. 接口测试工具 3. 性能测试工具 4. C/S自动化工具 5.白盒测试工具 6.代码扫描工具 7.持续集成工具 8.网络测试工具 9.app自动化工具 10.web安全测试工具 注&#xff1a;工具排名没有任何意义。 大多数初学者&…
阅读更多...
众和策略：微软大动作

众和策略：微软大动作

当地时间周二&#xff0c;美股首要指数全线收涨。但从月度数据来看&#xff0c;美股首要指数录得“三连跌”&#xff0c;10月份&#xff0c;道指跌1.36%&#xff0c;标普500指数跌2.2%&#xff0c;纳指跌2.78%。其间&#xff0c;标普和道指均为2020年3月以来初次呈现三个月连跌…
阅读更多...
Unity 粒子特效-第四集-光球闪烁特效

Unity 粒子特效-第四集-光球闪烁特效

一、特效预览 二、制作原理 光球素材资源 链接&#xff1a;https://pan.baidu.com/s/1XzWpQU2zX_wupMXSW7RxwA?pwdvu5r 提取码&#xff1a;vu5r 1.素材介绍 仔细看&#xff0c;我们的粒子贴图是&#xff08;如下&#xff09;&#xff0c;一颗球球 2.步骤介绍 1.光球动画的…
阅读更多...
Zynq UltraScale+ XCZU5EV 纯VHDL解码 IMX214 MIPI 视频，2路视频拼接输出，提供vivado工程源码和技术支持

Zynq UltraScale+ XCZU5EV 纯VHDL解码 IMX214 MIPI 视频，2路视频拼接输出，提供vivado工程源码和技术支持

目录 1、前言免责声明 2、我这里已有的 MIPI 编解码方案3、本 MIPI CSI2 模块性能及其优越性4、详细设计方案设计原理框图IMX214 摄像头及其配置D-PHY 模块CSI-2-RX 模块Bayer转RGB模块伽马矫正模块VDMA图像缓存Video Scaler 图像缓存DP 输出 5、vivado工程详解PL端FPGA硬件设计…
阅读更多...
【设计模式】第25节：行为型模式之“访问者模式”

【设计模式】第25节：行为型模式之“访问者模式”

一、简介 访问者模式允许一个或者多个操作应用到一组对象上&#xff0c;设计意图是解耦操作和对象本身&#xff0c;保持类职责单一、满足开闭原则以及应对代码的复杂性。 二、优点 分离操作和数据结构增加新操作更容易集中化操作 三、适用场景 数据结构稳定&#xff0c;操…
阅读更多...
职场好物：乐歌M9S升降办公电脑台，告别久坐办公，升职加薪就选它

职场好物：乐歌M9S升降办公电脑台，告别久坐办公，升职加薪就选它

办公是现代生活不可避免的组成部分&#xff0c;科技的快速发展&#xff0c;给了我们更多新的生活方式&#xff0c;促使我们更加关注自己的身体状况&#xff0c;我们挨过了饭都吃不饱的年代&#xff0c;随着办公人群的不断扩张&#xff0c;不知道你有没有发现身边人或多或少都有…
阅读更多...
最新文章

Copyright @ 2022~2023