【axios】TypeScript实战，结合源码，从0到1教你封装一个axios - 基础封装篇

目录

  • 前言
  • 版本
  • 环境变量配置
    • 引入的类型
      • 1、AxiosIntance: axios实例类型
      • 2、InternalAxiosRequestConfig: 高版本下AxiosRequestConfig的拓展类型
      • 3、AxiosRequestConfig: 请求体配置参数类型
      • 4、AxiosError: 错误对象类型
      • 5、AxiosResponse: 完整原始响应体类型
  • 目标效果
  • 开始封装
    • 骨架
    • 在拦截器封装之前
    • 全局请求拦截器
    • 全局响应拦截器
    • requst封装
    • CRUD
    • upload
  • 完整代码:
    • 类型文件
    • code配置
    • 封装的axios
  • 使用
  • 源码地址

前言

axios 是一个流行的网络请求库，简单易用。但实际上，我们开发时候经常会出于不同的需求对它进行各种程度的封装。

最近在制作自己的脚手架时，写了一个Vue3+ts+Vite项目模板，其中使用TypeScript对axios的基础请求功能进行了简单的封装，在这里梳理一下思路，也留作一个记录，为后续其他功能封装做准备。

希望这篇文章能够帮助到刚学习axios和ts的小伙伴们。同时，若文中存在一些错误或者设计不合理的地方，也欢迎大家指正。

版本

  • axios ： 1.6.2
  • TypeScript ： 5.3.2

环境变量配置

一般我们会使用环境变量来统一管理一些数据，比如网络请求的 baseURL 。这个项目模板中，我将文件上传的接口地址、token的key也配置在了环境变量里。

.env.development

# .env.production 和这个一样
# the APP baseURL
VITE_APP_BASE_URL = 'your_base_url'# the token key
VITE_APP_TOKEN_KEY = 'your_token_key'# the upload url
VITE_UPLOAD_URL = 'your_upload_url'# app title
VITE_APP_TITLE = 'liushi_template'

环境变量类型声明文件 env.d.ts：

/// <reference types="vite/client" />export interface ImportMetaEnv {readonly VITE_APP_TITLE: stringreadonly VITE_APP_BASE_URL: stringreadonly VITE_APP_TOKEN_KEY?: stringreadonly VITE_UPLOAD_URL?: string
}interface ImportMeta {readonly env: ImportMetaEnv
}

然后，我们使用 类 来封装 axios

先引入 axios， 以及必要的类型

import axios, { AxiosInstance,InternalAxiosRequestConfig, AxiosRequestConfig, AxiosError, AxiosResponse,} from 'axios';

在这里，我们引入了 axios，以及一些本次封装中会使用到的类型，

使用ts进行二次封装时，最好 ctrl+左键 看一下源码中对应的类型声明，这对我们有很大的帮助和指导作用。

引入的类型

1、AxiosIntance: axios实例类型

image.png

2、InternalAxiosRequestConfig: 高版本下AxiosRequestConfig的拓展类型

image.png

注意: 以前的版本下，请求拦截器的 use方法 第一个参数类型是 AxiosRequestConfig，但在高版本下，更改为了 InternalAxiosRequestConfig，如果发现使用 AxiosRequestConfig时报错, 请看一下自己版本下的相关类型声明。这里提供我的:

image.png

image.png

3、AxiosRequestConfig: 请求体配置参数类型

image.png

4、AxiosError: 错误对象类型

image.png

5、AxiosResponse: 完整原始响应体类型

image.png

从源码提供的类型可以很清晰地看到各参数或者类、方法中对应的参数、方法类型定义，这可以非常直观地为我们指明路线

目标效果

通过这次基础封装，我们想要的实现的效果是：

  • API的参数只填写接口和其他配置项、可以规定后端返回数据中 data 的类型
  • API直接返回后端返回的数据
  • 错误码由响应拦截器统一处理
  • 预留 扩展其他进阶功能的空间
  • nice的代码提示

开始封装

骨架

axios 和其中的类型在前面已经引入, 这里就先写一个骨架

class HttpRequest {service: AxiosInstanceconstructor(){// 设置一些默认配置项this.service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_URL,timeout: 5 * 1000});}
}const httpRequest = new HttpRequest()
export default httpRequest;

在拦截器封装之前

为了封装出更加合理的拦截器，为以及进阶封装时为 axios 配置更加强大的功能，你需要首先了解一下 axios 从发送一个请求到接收响应并处理，最后呈现给用户的流程。这样，对各部分的封装会有一个更加合理的设计。

image.png

axios请求流程 - chatGPT绘制

全局请求拦截器

class HttpRequest {// ...constructor() {// ...this.service.interceptors.request.use(// ...);}
}

在 axios v1.6.2 中，根据上面的接口请求拦截器的 use方法 接受三个参数, 均是可传项

image.png

  • onFulfilled: 在请求发送前执行, 接受一个 config 对象并返回处理后的新 config对象，一般在里面配置token等

    这里要注意一点, 高版本 axios 将它的参数类型修改为了 InternalAxiosRequestConfig

  • onRejected: onFulfilled 执行发生错误后执行，接收错误对象，一般我们请求没发送出去出现报错时，执行的就是这一步

  • options：其他配置参数，接收两个参数, 均是可传项，以后的进阶功能封装里可能会使用到

    • synchronous: 是否同步
    • runWhen: 接收一个类型为InternalAxiosRequestConfig的 config 参数，返回一个 boolean。触发时机为每次请求触发拦截器之前，当 runWhen返回 true, 则执行作用在本次请求上的拦截器方法, 否则不执行

了解了三个参数之后，思路就清晰了，然后我们可以根据需求进行全局请求拦截器的封装

class HttpRequest {// ...constructor() {// ...this.service.interceptors.request.use((config: InternalAxiosRequestConfig) => {/*** set your config*/if (import.meta.env.VITE_APP_TOKEN_KEY && getToken()) {// carry tokenconfig.headers[import.meta.env.VITE_APP_TOKEN_KEY] = getToken()}return config},(error: AxiosError) => {console.log('requestError: ', error)return Promise.reject(error);},{synchronous: false,runWhen: ((config: InternalAxiosRequestConfig) => {// do something// if return true, axios will execution interceptor methodreturn true})});}
}

全局响应拦截器

同样是三个参数，后两个和请求拦截器差不多，说第一个就行。

类型定义如下:

image.png

第一个参数同样是 onFulfilled，在返回响应结果之前执行，我们需要在这里面取出后端返回的数据，同时还要进行状态码处理。

从类型定义上可以看到，参数类型是一个泛型接口， 第一个泛型 T 用来定义后端返回数据的类型

先定义一下和后端约定好的返回数据格式:

我一般做项目时候约定的是这种，可以根据实际情况进行修改

./types/index.ts

export interface ResponseModel<T = any> {success: boolean;message: string | null;code: number | string;data: T;
}

因为里面定义了 code，所以还需要配置一份和后端约定好的 code 表，来对返回的 code 进行分类处理

./codeConfig.ts

// set code cofig
export enum CodeConfig {success = 200,notFound = 404,noPermission = 403
}

其实axios本身也提供了一份 HttpStatusCode

image.png
但最好根据项目组实际情况维护一份和后端约定好的 code

然后就可以开始封装响应拦截器了。要注意返回的类型

import { CodeConfig } from './codeConfig.ts'
import { ResponseModel } from './types/index.ts'
class HttpRequest {// ...constructor() {// ...this.service.interceptors.response.use((response: AxiosResponse<ResponseModel>): AxiosResponse['data'] => {const { data } = responseconst { code } = dataif (code) {if (code != HttpCodeConfig.success) {switch (code) {case HttpCodeConfig.notFound:// the method to handle this codebreak;case HttpCodeConfig.noPermission:// the method to handle this codebreak;default:break;}return Promise.reject(data.message)} else {return data}} else {return Promise.reject('Error! code missing!')}},(error: AxiosError) => {return Promise.reject(error);});}
}

在这个响应拦截器里，我们先通过解构赋值拿出了后端返回的响应数据 data, 然后提取出了里面约定好的 code，如果 code 是约定的表示一切成功的值，那么把响应数据返回, 否则根据 code 的不同值进行相应的处理。比如 把message里信息用 MessageBox 显示、登录过期清空token强制登出、无权限警告、重新请求等等

requst封装

重新封装 axios.request() 方法，传入一个config, 以后的进阶版本中，可能会修改传参，并在这个封装的 request() 中添加更多高级功能。但是在基础版本里，这一步看上去似乎有些冗余。

import { ResponseModel } from './types/index.ts'
class HttpRequest {// ...constructor(){/**/}request<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {/*** TODO: execute other methods according to config*/return new Promise((resolve, reject) => {try {this.service.request<ResponseModel<T>>(config).then((res: AxiosResponse['data']) => {resolve(res as ResponseModel<T>);}).catch((err) => {reject(err)})} catch (err) {return Promise.reject(err)}})}
}

CRUD

调用我们已经封装好的 request() 来封装 crud 请求，而不是直接调用 axios 自带的, 原因上面已经说了

import { ResponseModel } from './types/index.ts'
class HttpRequest {// ...get<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {return this.request({ method: 'GET', ...config })}post<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {return this.request({ method: 'POST', ...config })}put<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {return this.request({ method: 'PUT', ...config })}delete<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {return this.request({ method: 'DELETE', ...config })}
}

upload

文件上传封装，一般是表单形式上传，它有特定的 Content-Type 和数据格式，需要单独拿出来封装

先定义需要传入的数据类型 —— 和后端约定好的 name, 以及上传的文件数据 —— 本地临时路径或者Blob。在这里我是设置的上传文件的接口唯一，所以希望把接口url配置在环境变量里，在文件上传接口中不允许用户在接口的配置项参数里修改url，于是新定义了一个 UploadFileItemModel 类型, 不允许用户在 options 里再传入 url 和 data

若有多个文件上传接口url, 可以根据实际情况进行修改

./types/index.ts

export interface UploadFileItemModel {name: string,value: string | Blob
}export type UploadRequestConfig = Omit<AxiosRequestConfig, 'url' | 'data'>

一般来说，文件上传完成后，后端返回的响应数据中的data是被上传文件的访问url，所以这里泛型 T 设置的默认值是 string

import { UploadFileItemModel } from './types/index.ts'
class HttpRequest {// ...upload<T = string>(fileItem: UploadFileItemModel, config?: UploadRequestConfig): Promise<ResponseModel<T>> | null {if (!import.meta.env.VITE_UPLOAD_URL) return nulllet fd = new FormData()fd.append(fileItem.name, fileItem.value)let configCopy: UploadRequestConfigif (!config) {configCopy = {headers: {'Content-Type': 'multipart/form-data'}}} else {config.headers!['Content-Type'] = 'multipart/form-data'configCopy = config}return this.request({ url: import.meta.env.VITE_UPLOAD_URL, data: fd, ...configCopy })}

完整代码:

类型文件

./types/index.ts

import { AxiosRequestConfig } from 'axios'
export interface ResponseModel<T = any> {success: boolean;message: string | null;code: number | string;data: T;
}export interface UploadFileItemModel {name: string,value: string | Blob
}/*** customize your uploadRequestConfig*/
export type UploadRequestConfig = Omit<AxiosRequestConfig, 'url' | 'data'>

code配置

./codeConfig.ts

// set code cofig
export enum CodeConfig {success = 200,notFound = 404,noPermission = 403
}

封装的axios

./axios.ts

import axios, { AxiosInstance,InternalAxiosRequestConfig, AxiosRequestConfig, AxiosError, AxiosResponse,} from 'axios';
import { CodeConfig } from './CodeConfig';
import { ResponseModel, UploadFileItemModel, UploadRequestConfig } from './types/index'
import { getToken } from '../token/index'class HttpRequest {service: AxiosInstanceconstructor() {this.service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_URL,timeout: 5 * 1000});this.service.interceptors.request.use((config: InternalAxiosRequestConfig) => {/*** set your config*/if (import.meta.env.VITE_APP_TOKEN_KEY && getToken()) {config.headers[import.meta.env.VITE_APP_TOKEN_KEY] = getToken()}return config},(error: AxiosError) => {console.log('requestError: ', error)return Promise.reject(error);},{synchronous: falserunWhen: ((config: InternalAxiosRequestConfig) => {// do something// if return true, axios will execution interceptor methodreturn true})});this.service.interceptors.response.use((response: AxiosResponse<ResponseModel>): AxiosResponse['data'] => {const { data } = responseconst { code } = dataif (code) {if (code != HttpCodeConfig.success) {switch (code) {case HttpCodeConfig.notFound:// the method to handle this codebreak;case HttpCodeConfig.noPermission:// the method to handle this codebreak;default:break;}return Promise.reject(data.message)} else {return data}} else {return Promise.reject('Error! code missing!')}},(error: any) => {return Promise.reject(error);});}request<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {/*** TODO: execute other methods according to config*/return new Promise((resolve, reject) => {try {this.service.request<ResponseModel<T>>(config).then((res: AxiosResponse['data']) => {resolve(res as ResponseModel<T>);}).catch((err) => {reject(err)})} catch (err) {return Promise.reject(err)}})}get<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {return this.request({ method: 'GET', ...config })}post<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {return this.request({ method: 'POST', ...config })}put<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {return this.request({ method: 'PUT', ...config })}delete<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {return this.request({ method: 'DELETE', ...config })}upload<T = string>(fileItem: UploadFileItemModel, config?: UploadRequestConfig): Promise<ResponseModel<T>> | null {if (!import.meta.env.VITE_UPLOAD_URL) return nulllet fd = new FormData()fd.append(fileItem.name, fileItem.value)let configCopy: UploadRequestConfigif (!config) {configCopy = {headers: {'Content-Type': 'multipart/form-data'}}} else {config.headers!['Content-Type'] = 'multipart/form-data'configCopy = config}return this.request({ url: import.meta.env.VITE_UPLOAD_URL, data: fd, ...configCopy })}
}const httpRequest = new HttpRequest()
export default httpRequest;

使用

拿历史上的今天开放API做个测试: https://api.vvhan.com/api/hotlist?type=history

拆分一下:

  • baseURL: ‘https://api.vvhan.com/api’
  • 接口url: ‘/hotlist?type=history’

把baseURL配置到环境变量里:

VITE_APP_BASE_URL = 'https://api.vvhan.com/api'

根据接口文档修改 ResponseModel, 因为这个接口的响应数据里没有code那些, 所以封装里的code相关逻辑就先注释了, 直接返回原始响应体中的 data

export interface ResponseModel<T> {data: Tsubtitle: stringsuccess: booleantitle: stringupdate_time: string
}

/src/api/types/hello.ts：定义后端返回给这个接口的数据中, data 的类型

export interface exampleModel {index: numbertitle: stringdesc: stringurl: stringmobilUrl: string
}

/src/api/example/index.ts：封装请求接口，使用 enum 枚举类型统一管理接口地址

import request from '@/utils/axios/axios'
import { exampleModel } from '../types/hello'enum API {example = '/hotlist?type=history'
}export const exampleAPI = () => {return request.get<exampleModel[]>({ url: API.example })
}

试一试:

<script setup lang="ts">
import HelloWorld from "../../components/HelloWorld.vue";
import { exampleAPI } from "@/api/hello";
exampleAPI().then((res) => {console.log('getData: ', res)const title = res.titleconst { data } = resconsole.log('list: ', data)
});
</script><template><div><HelloWorld msg="Vite + Vue + Tailwindcss + TypeScript" /></div>
</template>

提示很舒服

image.png

image.png

控制台打印的数据:

image.png

源码地址

v3-ts-tailwind-template中的axios封装文件

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

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

相关文章

Python爬虫404错误：解决方案总结

Python爬虫404错误：解决方案总结

在进行网络爬虫开发的过程中&#xff0c;经常会遇到HTTP 404错误&#xff0c;即“Not Found”错误。这种错误通常表示所请求的资源不存在。对于爬虫开发者来说&#xff0c;处理这类错误是至关重要的&#xff0c;因为它们可能会导致爬虫无法正常工作。本文将探讨Python爬虫遇到4…
阅读更多...
年终好价节有什么必买的数码好物？值得入手的数码好物推荐

年终好价节有什么必买的数码好物？值得入手的数码好物推荐

大家是不是都没听说过好价节&#xff1f;直白点说就是原来的双十二购物狂欢节&#xff0c;只不过换一个说法&#xff0c;不过今年毕竟是第一年换个说法&#xff0c;所以淘宝年终好价节优惠还是值得我们期待的&#xff01;作为年前的最后一波大促&#xff0c;一起来看看有哪些好…
阅读更多...
《opencv实用探索·四》Mat图像数据类型转换和归一化显示

《opencv实用探索·四》Mat图像数据类型转换和归一化显示

一种数据类型转为另一种数据类型&#xff0c;不改变图像大小&#xff0c;但每个像素值可能会变 src.convertTo(dst, type, scale, shift);Scale和shitf默认为0&#xff08;这两个参数也相当于对比度和亮度&#xff09; 现在有个8位图像&#xff0c;把8位转成32位 可以看到像素…
阅读更多...
Kafka 分布式消息系统

Kafka 分布式消息系统

文章目录 消息中间件对比Kafka概述kafka安装和配置kafka入门生产者发送消息消费者接收消息 Kafka高可用设计集群备份机制(Replication&#xff09;备份机制(Replication)-同步方式 kafka生产者详解同步发送异步发送参数详解(ack)参数详解(retries)参数详解-消息压缩 kafka消费者…
阅读更多...
数字时代的表演艺术：TikTok如何重新定义舞台

数字时代的表演艺术：TikTok如何重新定义舞台

在数字时代的潮流中&#xff0c;TikTok崭露头角&#xff0c;重新定义了表演艺术的舞台。这款短视频应用不仅改变了用户与内容的互动方式&#xff0c;也为艺术家和创作者提供了全新的表达平台。本文将深入探讨TikTok如何在数字时代重新定义舞台&#xff0c;以及它对表演艺术的深…
阅读更多...
c++_继承

c++_继承

&#x1f3f7;如被何实现一个不能被继承的类&#xff08;或是继承无意义的类&#xff09; 将构造函数定义成私有的就行了&#xff0c;即&#xff1a;私有化父类的构造函数 c 11 新增关键字final 修饰父类直接不能被继承 class A final {........ }&#x1f3f7;继承与有元 有…
阅读更多...
【springboot】idea项目启动端口被占用

【springboot】idea项目启动端口被占用

问题 idea本地启动springboot项目端口老是被占用 解决 关闭被占用的端口进程 步骤: 1. winR打开程序框 2. 查出被占用端口的进程id netstat -ano | finderstr 端口号 例如 netstat -ano | finderstr 81013.杀死进程 taskkill /pid 进程id -t -f 例如 taskkill /pid 2…
阅读更多...
vue+jsonp编写可导出html的模版，可通过外部改json动态更新页面内容

vue+jsonp编写可导出html的模版，可通过外部改json动态更新页面内容

效果 导出后文件结果如图所示&#xff0c;点击Index.html即可查看页面&#xff0c;页面所有数据由report.json控制&#xff0c;修改report.json内容即可改变index.html展示内容 具体实现 1. 编写数据存储的json文件 在index.html所在的public页面新建report.json文件&#xff…
阅读更多...
LabVIEW通过编程将图形类控件的X轴显示为时间戳

LabVIEW通过编程将图形类控件的X轴显示为时间戳

LabVIEW通过编程将图形类控件的X轴显示为时间戳 每个版本的LabVIEW中都有属性节点&#xff0c;可以以编程方式调整X轴和Y轴格式。对于不同版本的LabVIEW&#xff0c;这些属性节点无法在同一个位置找到。请参阅以下部分&#xff0c;了解特定版本LabVIEW的相关属性节点的位置。 …
阅读更多...
GraphCast：基于机器学习的全球中期天气预测模型

GraphCast：基于机器学习的全球中期天气预测模型

文章信息 文章题为”GraphCast: Learning skillful medium-range global weather forecasting”&#xff0c;该文章于2023年发表至Science&#xff0c;文章内容主要关于利用机器学习模型&#xff0c;实现高效、准确的全球中期天气预测。由于文章内容较多&#xff0c;本文仅对研…
阅读更多...
Typora .MD笔记中本地图片批量上传到csdn （.PNG格式）(无需其他任何图床软件)

Typora .MD笔记中本地图片批量上传到csdn （.PNG格式）(无需其他任何图床软件)

Typora .MD笔记中本地图片批量上传到csdn &#xff08;.PNG格式&#xff09;(无需其他任何图床软件) 截图软件推荐 qq 截图 快捷键 ctrlshiftA. 步骤一 设置Typora 的图片 点击文件. 点击偏好设置 ->图像 我们可以选择将图片复制到我们的文件夹中。 建议刚写好文件标题就…
阅读更多...
强基固本，红海云数字化重塑提升国企干部管理能力

强基固本，红海云数字化重塑提升国企干部管理能力

国有企业的干部管理体系建设具有重要的战略意义&#xff0c;对于构建高素质专业化的干部队伍&#xff0c;推动企业高质量发展至关重要。特别是在党的二十大以后&#xff0c;建设中国特色现代企业制度&#xff0c;在完善公司治理中加强党的领导&#xff0c;加强党管干部党管人才…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023