前言
✨ 相信各位道友对前端工具里的
axios
都不陌生了,本文给大家分享如何能够快速实现对axios
功能的扩展!
创建示例项目
vite
+ vue3
那么火当然是主选了😁。
# 使用 pnpm 创建 vue-ts 项目
pnpm create vite test-app -- --template vue-ts
安装依赖
注意:需进入项目根目录再安装依赖!
pnpm i # 安装项目依赖
pnpm add axios @iel/axios-ext @iel/axios-ext-preset # 安装 axios 相关工具
扩展 axios
// src/services/http.ts
import { createAxios } from '@iel/axios-ext'
import TupleWrapper, { AxiosResponseTuple } from '@iel/axios-ext-response-wrap/dist/wrappers/tuple'
import { ErrorAdaptor, SuccessAdaptor } from '@iel/axios-ext-response-wrap/dist/adaptors'
import usePresetForAxiosExt from '@iel/axios-ext-preset'
declare module 'axios' {
// 修改响应结果为元祖
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface AxiosResponse<T = any, D = any> extends AxiosResponseTuple<T, D> {}
}
// 创建 axios 实例
export const http = createAxios({
baseURL: '/api',
timeout: 5000
})
// 手动取消类型
const MANUAL_CANCEL = 'manualCancel'
// 可用于判断接口是否为主动取消,从而中断后续操作
export const isManualCancel = (value: string) => value === MANUAL_CANCEL
function initExt() {
// 元祖响应格式包装器
// adaptor 为数据适配器,处理后端返回数据格式,多个时将一一匹配
const tupleWrapper = TupleWrapper([ErrorAdaptor, SuccessAdaptor])
// 为 axiosExt 预设插件,将会对 axios 实例进行功能扩展
usePresetForAxiosExt(http.$axiosExt, {
// 配置缓存功能
Cache: {
// 当缓存有效时需要返回的数据
transformData: (response, config) => tupleWrapper.transformResponseData(response, config),
// 当响应成功时判断是否需要缓存数据
// 通过元祖包装器转换成元祖后判断接口是否成功
allowCache: (response, config) => !tupleWrapper.transformResponseData(response, config)[0]
},
// 配置取消重复请求
CancelRepeat: {
// 手动取消时需要返回的消息
manualCancelMessage: MANUAL_CANCEL,
// 当请求重复时需要返回的数据,这里返回元祖,与响应包装结果相对应
onRepeat: () => [true, MANUAL_CANCEL]
},
// 配置响应包装
ResponseWrap: {
// 设置数据包装器
wrapper: tupleWrapper
}
})
}
initExt()
通过以上代码我们就完成了对 axios
的功能扩展,其中包括:数据缓存、重复取消、插件日志、响应包装、失败重连。
自动携带 token 插件
上面是我们使用预设插件对 axios
进行扩展,虽然很快,但若需要其他功能又该怎么办呢?
这里教给大家如何自己实现一个插件的封装和使用!
// src/services/plugins/auto-add-token.ts
import { onRequest } from '@iel/axios-ext'
// 插件初始化时会传入 axiosExt 实例以及插件所需的配置项
export default function autoAddToken(axiosExt, opts = {}) {
// 在请求阶段时修改 config 配置项为其添加 token
onRequest(({ config }) => {
config.headers ??= {}
config.headers.Authorization = localStorage.token || ''
})
}
注册我们开发的插件!
// src/services/http.ts
import AutoAddTokenPlugin from './plugins/auto-add-token'
// ...
http.$axiosExt.use(AutoAddTokenPlugin)
之后我们使用 http
请求时就可以看到会自动携带上 token
了!
结束
以上就是项目中对 axios
快速扩展的实现方式,在公司内部也可自行封装相关插件发布私服上,后续就可以便于使用和维护了!
相关链接
-
@iel/axios-ext
扩展插件主体 -
@iel/axios-ext-cache
扩展缓存功能 -
@iel/axios-ext-cancel-repeat
扩展取消重复请求功能 -
@iel/axios-ext-log
扩展插件日志 -
@iel/axios-ext-response-wrap
扩展响应包装功能 -
@iel/axios-ext-retry
扩展失败重连功能
今天的文章一分钟完成 axios 各种功能实现(取消重复请求、缓存数据、响应包装等)分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/16253.html