@iel/axios-ext

为 Axios 扩展辅助功能。

安装

1npm i axios @iel/axios-ext -S

用法

由于 axios 内部使用闭包保护自调用 request ，所以需使用插件提供的 createAxios 方法获取 axios 实例，否则由插件扩展的功能无法在实例自调用时使用！

1import { createAxios, onRequest } from '@iel/axios-ext'
2import axios from 'axios'
3
4// 可以接收 axios 配置项或实例对象
5// 返回包装后的 axios 实例
6// http.$axiosExt 为 AxiosExt 实例
7const http = createAxios(http)
8
9// 定义一个 AxiosExt 插件，接收默认配置项
10const Plugin = (axiosExt, options) => {
11  // 注册请求时的回调函数
12  onRequest(() => {
13    // on request hook
14  })
15}
16
17// 注册该插件，默认会执行插件方法体内部函数
18// 返回该实例，已注册插件不会被重复注册
19http.$axiosExt.use(Plugin, {}).use(Plugin, {})
20
21// 销毁实例，在插件销毁时处理一些任务并清理所有插件信息
22http.$axiosExt.destroy()

示例

1import axios from 'axios'
2import { createAxiosExt, createAxios } from '@iel/axios-ext'
3import AxiosExtLog from '@iel/axios-ext-log'
4
5//============普通创建============
6const http = axios.create({
7  baseURL: '/api'
8})
9
10// 注册日志插件
11const axiosExt = createAxiosExt(http).use(AxiosExtLog, { globalOnResponse: true })
12
13// ✔️ 会正常打印信息
14http.get('/demo/list').then((response) => {
15  // do somethings
16})
17
18// ✔️ 会正常打印信息
19http
20  .withLog({ onRequest: true })
21  .get('/demo/list')
22  .then((response) => {
23    // do somethings
24  })
25
26// ❌ 扩展功能不起作用
27http().then((response) => {
28  // do somethings
29})
30
31// ✔️ 会正常打印信息
32http
33  .withLog({ onRequest: true })({ method: 'get', url: '/demo/list' })
34  .then((response) => {
35    // do somethings
36  })
37
38//============通过插件提供方法创建============
39const http2 = createAxios(http)
40
41// 注册日志插件
42http2.$axiosExt.use(AxiosExtLog, { globalOnResponse: true })
43
44// ✔️ 会正常打印信息
45http2().then((response) => {
46  // do somethings
47})

开发插件包

插件内部提供了对请求流阶段的辅助工具，可以通过在不同阶段对相关数据操作进而完成对应功能的实现。

示例

这里演示开发一个在请求时自动携带 token 的插件。

1// auto-add-token.js
2import { onRequest } from '@iel/axios-ext'
3
4// 插件初始化时会传入 axiosExt 实例以及插件所需的配置项
5export default function autoAddToken(axiosExt, opts = {}) {
6  // 在请求阶段时修改 config 配置项为其添加 token
7  onRequest(({ config }) => {
8    config.headers.Authorization = localStorage.token || ''
9  })
10}

接下来为 axiosExt 注册我们的插件。

1import { createAxios, createAxiosExt } from '@iel/axios-ext'
2import axios from 'axios'
3import AutoAddToken from './auto-add-token'
4
5const http = createAxios(axios)
6const axiosExt = createAxiosExt(http) // ==> http.$axiosExt
7
8// 为 http 注册插件
9axiosExt.use(AutoAddToken)
10
11// 当请求时就会为我们的请求自动带上 token
12http.get('/api/list').then(() => {
13  // do somethings
14})

API 说明

名称	描述
createAxiosExt	创建 AxiosExt 实例
SHALLOW_INSTANCE_KEY	浅层拷贝 axios 实例标识
EVENT_STORE_KEY	请求事件数据仓储
isAxiosInstance	判断是否为 axios 实例
createAxios	创建 axios 实例，支持传入配置项和 axios 实例
createShallowAxiosInstance	创建浅层拷贝 axios 实例
getFullPath	获取请求接口完整地址
getKeyByConfig	根据常用请求配置项序列化生成接口标识
pickConfig	提取常用请求配置项（method、url、data、params）

Hook 说明

名称	描述
onRequest	当请求时执行回调函数，多次调用将依次执行
onResponse	当响应成功时执行回调函数，多次调用将依次执行
onResponseError	当响应失败时执行回调函数，多次调用将依次执行
onFinally	当请求流结束时执行回调函数，多次调用将依次执行
onDestroy	当 axiosExt 实例销毁时执行回调函数，多次调用将依次执行