Gathering detailed insights and metrics for @iel/axios-ext
Installations
npm install @iel/axios-extDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.14.2
NPM Version
7.24.2
Score
67.2
Supply Chain
98.1
Quality
75.1
Maintenance
100
Vulnerability
100
License
Releases
49
@iel/axios-ext-cache@1.0.6
@iel/axios-ext-cache@1.0.6
Published on 29 Apr 2022
@iel/axios-ext@1.0.5
@iel/axios-ext@1.0.5
Published on 28 Apr 2022
@iel/axios-ext-utils@1.0.5
@iel/axios-ext-utils@1.0.5
Published on 28 Apr 2022
@iel/axios-ext-preset@2.0.0
@iel/axios-ext-preset@2.0.0
Published on 28 Apr 2022
@iel/axios-ext-retry@1.0.5
@iel/axios-ext-retry@1.0.5
Published on 28 Apr 2022
@iel/axios-ext-cancel-repeat@1.1.0
@iel/axios-ext-cancel-repeat@1.1.0
Published on 28 Apr 2022
Contributors
1
Unable to fetch Contributors
Languages
6
TypeScript
Vue
JavaScript
Handlebars
HTML
Shell
TypeScript (84.55%)
Vue (6.37%)
JavaScript (5.27%)
Handlebars (3.15%)
HTML (0.46%)
Shell (0.2%)
Developer
iel-h
Download Statistics
Total Downloads
976
Last Day
2
Last Week
13
Last Month
24
Last Year
139
GitHub Statistics
14 Stars
51 Commits
1 Forks
1 Watching
3 Branches
1 Contributors
Bundle Size
6.50 kB
Minified
2.60 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.5
Package Id
@iel/axios-ext@1.0.5
Unpacked Size
23.09 kB
Size
7.15 kB
File Count
10
NPM Version
7.24.2
Node Version
16.14.2
Total Downloads
Cumulative downloads
Total Downloads
976
Last day
0%
2
Compared to previous day
Last week
0%
13
Compared to previous week
Last month
500%
24
Compared to previous month
Last year
-44.6%
139
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Versions
@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 实例销毁时执行回调函数，多次调用将依次执行 |
No vulnerabilities found.
No security vulnerabilities found.