@varlet/axle 0.2.7 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +156 -82
- package/README.zh-CN.md +156 -82
- package/es/{chunk-KLNSLHAC.js → chunk-ZSUG26OQ.js} +1 -5
- package/es/index.d.ts +15 -4
- package/es/index.js +41 -13
- package/es/use.d.ts +0 -2
- package/es/use.js +1 -8
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -197,61 +197,134 @@ axle.setHeader('TOKEN', TOKEN)
|
|
|
197
197
|
axle.removeHeader('TOKEN')
|
|
198
198
|
```
|
|
199
199
|
|
|
200
|
+
## Built-in interceptor
|
|
201
|
+
|
|
202
|
+
axle provides some practical requests/response interceptors, and is compatible with `axle` and `axios`.
|
|
203
|
+
|
|
204
|
+
### axios
|
|
205
|
+
|
|
206
|
+
```ts
|
|
207
|
+
import { requestHeadersInterceptor, responseTimeoutInterceptor } from '@varlet/axle'
|
|
208
|
+
|
|
209
|
+
const headersInterceptor = requestHeadersInterceptor({
|
|
210
|
+
headers: () => ({
|
|
211
|
+
token: localStorage.getItem('token'),
|
|
212
|
+
'Axle-Custom-Header': 'Axle-Custom-Header',
|
|
213
|
+
})
|
|
214
|
+
})
|
|
215
|
+
|
|
216
|
+
const retryInterceptor = responseRetryInterceptor({ count: 3 })
|
|
217
|
+
|
|
218
|
+
axios.interceptors.request.use(
|
|
219
|
+
headersInterceptor.onFulfilled,
|
|
220
|
+
headersInterceptor.onRejected,
|
|
221
|
+
headersInterceptor.options
|
|
222
|
+
)
|
|
223
|
+
axios.interceptors.response.use(
|
|
224
|
+
retryInterceptor.onFulfilled,
|
|
225
|
+
retryInterceptor.onRejected,
|
|
226
|
+
retryInterceptor.options
|
|
227
|
+
)
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
### axle
|
|
231
|
+
|
|
232
|
+
```ts
|
|
233
|
+
import { requestHeadersInterceptor, responseTimeoutInterceptor } from '@varlet/axle'
|
|
234
|
+
|
|
235
|
+
axle.useRequestInterceptor(
|
|
236
|
+
requestHeadersInterceptor({
|
|
237
|
+
headers: () => ({
|
|
238
|
+
token: localStorage.getItem('token'),
|
|
239
|
+
'Axle-Custom-Header': 'Axle-Custom-Header',
|
|
240
|
+
}),
|
|
241
|
+
}),
|
|
242
|
+
)
|
|
243
|
+
|
|
244
|
+
axle.useResponseInterceptor(responseRetryInterceptor({ count: 3 }))
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
### General parameter of the interceptor
|
|
248
|
+
|
|
249
|
+
Each built-in interceptor supports `include` `exclude` `axiosInterceptorOptions (same with Axios interceptor)`.
|
|
250
|
+
|
|
251
|
+
#### include & exclude
|
|
252
|
+
|
|
253
|
+
It is used to request filtering to determine what request should apply the interceptor and support specifying the `method` or `glob` syntax. The usage method is as follows.
|
|
254
|
+
|
|
255
|
+
```ts
|
|
256
|
+
axle.useResponseInterceptor(
|
|
257
|
+
responseRetryInterceptor({
|
|
258
|
+
count: 3,
|
|
259
|
+
include: ['method:put', 'method:post'],
|
|
260
|
+
exclude: ['/system/**', '/user/addUser']
|
|
261
|
+
}),
|
|
262
|
+
)
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
### List of built-in interceptor
|
|
266
|
+
|
|
267
|
+
| Name | Description |
|
|
268
|
+
| --- | --- |
|
|
269
|
+
| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/requestHeadersInterceptor.ts) | Used to customize the request header |
|
|
270
|
+
| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseRetryInterceptor.ts) | Used to realize the request abnormal retry |
|
|
271
|
+
| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseBlobInterceptor.ts) | Used to intercept blob type |
|
|
272
|
+
| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseTimeoutInterceptor.ts) | Used to abnormal timeout |
|
|
273
|
+
|
|
200
274
|
## Vue Composition API
|
|
201
275
|
|
|
202
|
-
Axle provides the usage of Vue Composition API style, which encapsulates the `loading status`, `error status`, `upload and download progress` of the request, `return data`, `
|
|
276
|
+
Axle provides the usage of Vue Composition API style, which encapsulates the `loading status`, `error status`, `upload and download progress` of the request, `return data`, `lifecycle`, etc., And inherit all the configuration of `axios`.
|
|
203
277
|
|
|
204
278
|
```html
|
|
205
279
|
<script setup>
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
const axle = createAxle(/** @see https://axios-http.com **/)
|
|
210
|
-
const useAxle = createUseAxle({
|
|
211
|
-
axle,
|
|
212
|
-
// Optional value: Default onTransform of the useAxle
|
|
213
|
-
onTransform: (response) => response,
|
|
214
|
-
})
|
|
280
|
+
import { createAxle } from '@varlet/axle'
|
|
281
|
+
import { createUseAxle } from '@varlet/axle/use'
|
|
215
282
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
283
|
+
const axle = createAxle(/** @see https://axios-http.com **/)
|
|
284
|
+
|
|
285
|
+
const useAxle = createUseAxle({
|
|
286
|
+
axle,
|
|
287
|
+
// Optional value: Default onTransform of the useAxle
|
|
288
|
+
onTransform: (response) => response,
|
|
289
|
+
})
|
|
290
|
+
|
|
291
|
+
const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
|
|
292
|
+
// Request initial value
|
|
293
|
+
value: [],
|
|
294
|
+
// Request method
|
|
295
|
+
method: 'get',
|
|
296
|
+
// Request url
|
|
297
|
+
url: '/user',
|
|
298
|
+
// Whether to send the request immediately, defaults false
|
|
299
|
+
immediate: true,
|
|
300
|
+
// Whether the value needs to be reset before requesting, defaults false
|
|
301
|
+
resetValue: true,
|
|
302
|
+
// Request params, defaults {}
|
|
303
|
+
// When params is an object, it will be carried when sending the first request (immediate)
|
|
304
|
+
// When params is a function, it will be carried every time a request is sent.
|
|
305
|
+
params: { current: 1, pageSize: 10 },
|
|
306
|
+
// Axios config, see https://axios-http.com
|
|
307
|
+
config: { headers: {} },
|
|
308
|
+
// lifecycle
|
|
309
|
+
onBefore(refs) {
|
|
310
|
+
const { data, loading, error, uploadProgress, downloadProgress } = refs
|
|
311
|
+
console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
|
|
312
|
+
// Do request before
|
|
313
|
+
},
|
|
314
|
+
onTransform(response, refs) {
|
|
315
|
+
// Handle data transform, The transformed data will be the value of users.
|
|
316
|
+
return response.data
|
|
317
|
+
},
|
|
318
|
+
onSuccess(response, refs) {
|
|
319
|
+
// Do request success
|
|
320
|
+
},
|
|
321
|
+
onError(error, refs) {
|
|
322
|
+
// Do request error
|
|
323
|
+
},
|
|
324
|
+
onAfter(refs) {
|
|
325
|
+
// Do request after
|
|
326
|
+
},
|
|
327
|
+
})
|
|
255
328
|
</script>
|
|
256
329
|
|
|
257
330
|
<template>
|
|
@@ -271,43 +344,44 @@ Axle provides some parallel request processing tools, please refer to the follow
|
|
|
271
344
|
|
|
272
345
|
```html
|
|
273
346
|
<script setup>
|
|
274
|
-
|
|
275
|
-
|
|
347
|
+
import { createAxle } from '@varlet/axle'
|
|
348
|
+
import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
|
|
349
|
+
|
|
350
|
+
const axle = createAxle(/** @see https://axios-http.com **/)
|
|
276
351
|
|
|
277
|
-
|
|
278
|
-
const useAxle = createUseAxle({ axle })
|
|
352
|
+
const useAxle = createUseAxle({ axle })
|
|
279
353
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
354
|
+
const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
|
|
355
|
+
value: [],
|
|
356
|
+
method: 'get',
|
|
357
|
+
url: '/user',
|
|
358
|
+
})
|
|
285
359
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
360
|
+
const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
|
|
361
|
+
value: [],
|
|
362
|
+
method: 'get',
|
|
363
|
+
url: '/role',
|
|
364
|
+
})
|
|
291
365
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
366
|
+
// At the end of all requests, loading is false
|
|
367
|
+
const loading = useHasLoading(isUsersLoading, isRolesLoading)
|
|
368
|
+
// At the end of all requests, downloadProgress is 1
|
|
369
|
+
const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
|
|
370
|
+
// Ref<[
|
|
371
|
+
// [{ name: 'foo' }, { name: 'bar' }],
|
|
372
|
+
// [{ role: 'admin' }, { role: 'user' }]
|
|
373
|
+
// ]> <-
|
|
374
|
+
// [
|
|
375
|
+
// Ref<[{ name: 'foo' }, { name: 'bar' }]>,
|
|
376
|
+
// Ref<[{ role: 'admin' }, { role: 'user' }]>
|
|
377
|
+
// ]
|
|
378
|
+
const usersRoles = useValues(users, roles)
|
|
379
|
+
|
|
380
|
+
function sendAllRequest() {
|
|
381
|
+
// parallel
|
|
382
|
+
getUsers()
|
|
383
|
+
getRoles()
|
|
384
|
+
}
|
|
311
385
|
</script>
|
|
312
386
|
|
|
313
387
|
<template>
|
package/README.zh-CN.md
CHANGED
|
@@ -197,61 +197,134 @@ axle.setHeader('TOKEN', TOKEN)
|
|
|
197
197
|
axle.removeHeader('TOKEN')
|
|
198
198
|
```
|
|
199
199
|
|
|
200
|
+
## 内置拦截器
|
|
201
|
+
|
|
202
|
+
Axle 提供了一些实用的请求/响应拦截器,并且兼容 axle 和 axios。
|
|
203
|
+
|
|
204
|
+
### axios
|
|
205
|
+
|
|
206
|
+
```ts
|
|
207
|
+
import { requestHeadersInterceptor, responseTimeoutInterceptor } from '@varlet/axle'
|
|
208
|
+
|
|
209
|
+
const headersInterceptor = requestHeadersInterceptor({
|
|
210
|
+
headers: () => ({
|
|
211
|
+
token: localStorage.getItem('token'),
|
|
212
|
+
'Axle-Custom-Header': 'Axle-Custom-Header',
|
|
213
|
+
})
|
|
214
|
+
})
|
|
215
|
+
|
|
216
|
+
const retryInterceptor = responseRetryInterceptor({ count: 3 })
|
|
217
|
+
|
|
218
|
+
axios.interceptors.request.use(
|
|
219
|
+
headersInterceptor.onFulfilled,
|
|
220
|
+
headersInterceptor.onRejected,
|
|
221
|
+
headersInterceptor.options
|
|
222
|
+
)
|
|
223
|
+
axios.interceptors.response.use(
|
|
224
|
+
retryInterceptor.onFulfilled,
|
|
225
|
+
retryInterceptor.onRejected,
|
|
226
|
+
retryInterceptor.options
|
|
227
|
+
)
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
### axle
|
|
231
|
+
|
|
232
|
+
```ts
|
|
233
|
+
import { requestHeadersInterceptor, responseTimeoutInterceptor } from '@varlet/axle'
|
|
234
|
+
|
|
235
|
+
axle.useRequestInterceptor(
|
|
236
|
+
requestHeadersInterceptor({
|
|
237
|
+
headers: () => ({
|
|
238
|
+
token: localStorage.getItem('token'),
|
|
239
|
+
'Axle-Custom-Header': 'Axle-Custom-Header',
|
|
240
|
+
}),
|
|
241
|
+
}),
|
|
242
|
+
)
|
|
243
|
+
|
|
244
|
+
axle.useResponseInterceptor(responseRetryInterceptor({ count: 3 }))
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
### 拦截器通用参数
|
|
248
|
+
|
|
249
|
+
每个内置拦截器都支持 `include` `exclude` `axiosInterceptorOptions (与 axios 拦截器一致)`。
|
|
250
|
+
|
|
251
|
+
#### include & exclude
|
|
252
|
+
|
|
253
|
+
用于请求过滤,以确定什么请求应该应用该拦截器,支持指定 method 或是 glob 语法,使用方式如下。
|
|
254
|
+
|
|
255
|
+
```ts
|
|
256
|
+
axle.useResponseInterceptor(
|
|
257
|
+
responseRetryInterceptor({
|
|
258
|
+
count: 3,
|
|
259
|
+
include: ['method:put', 'method:post'],
|
|
260
|
+
exclude: ['/system/**', '/user/addUser']
|
|
261
|
+
}),
|
|
262
|
+
)
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
### 内置拦截器一览
|
|
266
|
+
|
|
267
|
+
| 名称 | 描述 |
|
|
268
|
+
| --- | --- |
|
|
269
|
+
| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/requestHeadersInterceptor.ts) | 用于自定义请求头 |
|
|
270
|
+
| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseRetryInterceptor.ts) | 用于实现请求异常重试 |
|
|
271
|
+
| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseBlobInterceptor.ts) | 用于拦截 blob 类型 |
|
|
272
|
+
| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/src/interceptors/responseTimeoutInterceptor.ts) | 用于归一化超时异常 |
|
|
273
|
+
|
|
200
274
|
## Vue 组合式 API
|
|
201
275
|
|
|
202
|
-
Axle 提供了 Vue Composition API 风格的用法,封装了请求的 `加载状态`, `错误状态`,
|
|
276
|
+
Axle 提供了 Vue Composition API 风格的用法,封装了请求的 `加载状态`, `错误状态`, `请求的上下行进度`,`返回数据`,`生命周期` 等等,并继承了 `axios` 的所有配置。
|
|
203
277
|
|
|
204
278
|
```html
|
|
205
279
|
<script setup>
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
const axle = createAxle(/** @see https://axios-http.com **/)
|
|
210
|
-
const useAxle = createUseAxle({
|
|
211
|
-
axle,
|
|
212
|
-
// 可选项: useAxle 的默认 onTransform
|
|
213
|
-
onTransform: (response) => response,
|
|
214
|
-
})
|
|
280
|
+
import { createAxle } from '@varlet/axle'
|
|
281
|
+
import { createUseAxle } from '@varlet/axle/use'
|
|
215
282
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
283
|
+
const axle = createAxle(/** @see https://axios-http.com **/)
|
|
284
|
+
|
|
285
|
+
const useAxle = createUseAxle({
|
|
286
|
+
axle,
|
|
287
|
+
// 可选项: useAxle 的默认 onTransform
|
|
288
|
+
onTransform: (response) => response,
|
|
289
|
+
})
|
|
290
|
+
|
|
291
|
+
const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
|
|
292
|
+
// 请求初始化数据
|
|
293
|
+
value: [],
|
|
294
|
+
// 请求方法
|
|
295
|
+
method: 'get',
|
|
296
|
+
// 请求地址
|
|
297
|
+
url: '/user',
|
|
298
|
+
// 是否立即发送请求, 默认值: false
|
|
299
|
+
immediate: true,
|
|
300
|
+
// 请求前是否需要重置 value, 默认值: false
|
|
301
|
+
resetValue: true,
|
|
302
|
+
// 请求参数, 默认值: {}
|
|
303
|
+
// 当参数是一个对象时,发送第一个请求(immediate)时将携带它
|
|
304
|
+
// 当参数是一个函数时,每次发送请求时都会携带它。
|
|
305
|
+
params: { current: 1, pageSize: 10 },
|
|
306
|
+
// Axios 配置, see https://axios-http.com
|
|
307
|
+
config: { headers: {} },
|
|
308
|
+
// 生命周期
|
|
309
|
+
onBefore(refs) {
|
|
310
|
+
const { data, loading, error, uploadProgress, downloadProgress } = refs
|
|
311
|
+
console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
|
|
312
|
+
// 处理请求前逻辑
|
|
313
|
+
},
|
|
314
|
+
onTransform(response, refs) {
|
|
315
|
+
// 处理数据转换,转换后的数据将成为 users 的值。
|
|
316
|
+
return response.data
|
|
317
|
+
},
|
|
318
|
+
onSuccess(response, refs) {
|
|
319
|
+
// 处理请求成功逻辑
|
|
320
|
+
},
|
|
321
|
+
onError(error, refs) {
|
|
322
|
+
// 处理请求错误逻辑
|
|
323
|
+
},
|
|
324
|
+
onAfter(refs) {
|
|
325
|
+
// 处理请求结束逻辑,无论成功失败都会触发。
|
|
326
|
+
},
|
|
327
|
+
})
|
|
255
328
|
</script>
|
|
256
329
|
|
|
257
330
|
<template>
|
|
@@ -271,43 +344,44 @@ Axle 提供了一些并行请求处理工具,请参考以下示例。
|
|
|
271
344
|
|
|
272
345
|
```html
|
|
273
346
|
<script setup>
|
|
274
|
-
|
|
275
|
-
|
|
347
|
+
import { createAxle } from '@varlet/axle'
|
|
348
|
+
import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
|
|
349
|
+
|
|
350
|
+
const axle = createAxle(/** @see https://axios-http.com **/)
|
|
276
351
|
|
|
277
|
-
|
|
278
|
-
const useAxle = createUseAxle({ axle })
|
|
352
|
+
const useAxle = createUseAxle({ axle })
|
|
279
353
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
354
|
+
const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
|
|
355
|
+
value: [],
|
|
356
|
+
method: 'get',
|
|
357
|
+
url: '/user',
|
|
358
|
+
})
|
|
285
359
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
360
|
+
const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
|
|
361
|
+
value: [],
|
|
362
|
+
method: 'get',
|
|
363
|
+
url: '/role',
|
|
364
|
+
})
|
|
291
365
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
366
|
+
// 所有请求结束时,loading 为 false
|
|
367
|
+
const loading = useHasLoading(isUsersLoading, isRolesLoading)
|
|
368
|
+
// 所有请求结束时,downloadProgress 为 1
|
|
369
|
+
const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
|
|
370
|
+
// Ref<[
|
|
371
|
+
// [{ name: 'foo' }, { name: 'bar' }],
|
|
372
|
+
// [{ role: 'admin' }, { role: 'user' }]
|
|
373
|
+
// ]> <-
|
|
374
|
+
// [
|
|
375
|
+
// Ref<[{ name: 'foo' }, { name: 'bar' }]>,
|
|
376
|
+
// Ref<[{ role: 'admin' }, { role: 'user' }]>
|
|
377
|
+
// ]
|
|
378
|
+
const usersRoles = useValues(users, roles)
|
|
379
|
+
|
|
380
|
+
function sendAllRequest() {
|
|
381
|
+
// parallel
|
|
382
|
+
getUsers()
|
|
383
|
+
getRoles()
|
|
384
|
+
}
|
|
311
385
|
</script>
|
|
312
386
|
|
|
313
387
|
<template>
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
2
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
3
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
4
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -16,9 +14,7 @@ var __spreadValues = (a, b) => {
|
|
|
16
14
|
}
|
|
17
15
|
return a;
|
|
18
16
|
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
17
|
|
|
21
18
|
export {
|
|
22
|
-
__spreadValues
|
|
23
|
-
__spreadProps
|
|
19
|
+
__spreadValues
|
|
24
20
|
};
|
package/es/index.d.ts
CHANGED
|
@@ -2,28 +2,39 @@ import { R as RequestInterceptor, a as ResponseInterceptor } from './instance-8e
|
|
|
2
2
|
export { e as AxleInstance, A as AxleRequestConfig, b as FetchMethod, F as FetchRunner, I as Interceptor, c as ModifyMethod, M as ModifyRunner, d as RunnerMethod, i as createAxle, f as createFetchRunner, g as createModifyRunner, h as download } from './instance-8e68a761.js';
|
|
3
3
|
import { AxiosInterceptorOptions, AxiosResponse } from 'axios';
|
|
4
4
|
|
|
5
|
+
declare function matchPattern(pattern: string, method: string, url: string): boolean;
|
|
6
|
+
declare function createMatcher(include?: string[], exclude?: string[]): (method: string, url: string) => boolean;
|
|
7
|
+
|
|
5
8
|
interface RequestHeadersInterceptorOptions {
|
|
6
9
|
headers?: Record<string, string> | (() => Record<string, string>);
|
|
7
|
-
axiosInterceptorOptions?: AxiosInterceptorOptions;
|
|
8
10
|
include?: string[];
|
|
9
11
|
exclude?: string[];
|
|
12
|
+
axiosInterceptorOptions?: AxiosInterceptorOptions;
|
|
10
13
|
}
|
|
11
14
|
declare function requestHeadersInterceptor(options?: RequestHeadersInterceptorOptions): RequestInterceptor;
|
|
12
15
|
|
|
13
16
|
interface ResponseBlobInterceptorOptions {
|
|
14
17
|
onResponse?: (response: AxiosResponse<any, any>) => any;
|
|
15
|
-
axiosInterceptorOptions?: AxiosInterceptorOptions;
|
|
16
18
|
include?: string[];
|
|
17
19
|
exclude?: string[];
|
|
20
|
+
axiosInterceptorOptions?: AxiosInterceptorOptions;
|
|
18
21
|
}
|
|
19
22
|
declare function responseBlobInterceptor(options?: ResponseBlobInterceptorOptions): ResponseInterceptor;
|
|
20
23
|
|
|
21
24
|
interface ResponseTimeoutInterceptorOptions {
|
|
22
25
|
normalizeErrorCode?: string;
|
|
23
|
-
axiosInterceptorOptions?: AxiosInterceptorOptions;
|
|
24
26
|
include?: string[];
|
|
25
27
|
exclude?: string[];
|
|
28
|
+
axiosInterceptorOptions?: AxiosInterceptorOptions;
|
|
26
29
|
}
|
|
27
30
|
declare function responseTimeoutInterceptor(options?: ResponseTimeoutInterceptorOptions): ResponseInterceptor;
|
|
28
31
|
|
|
29
|
-
|
|
32
|
+
interface ResponseRetryInterceptorOptions {
|
|
33
|
+
count?: number;
|
|
34
|
+
include?: string[];
|
|
35
|
+
exclude?: string[];
|
|
36
|
+
axiosInterceptorOptions?: AxiosInterceptorOptions;
|
|
37
|
+
}
|
|
38
|
+
declare function responseRetryInterceptor(options: ResponseRetryInterceptorOptions): ResponseInterceptor;
|
|
39
|
+
|
|
40
|
+
export { RequestHeadersInterceptorOptions, RequestInterceptor, ResponseBlobInterceptorOptions, ResponseInterceptor, ResponseRetryInterceptorOptions, ResponseTimeoutInterceptorOptions, createMatcher, matchPattern, requestHeadersInterceptor, responseBlobInterceptor, responseRetryInterceptor, responseTimeoutInterceptor };
|
package/es/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
__spreadValues
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-ZSUG26OQ.js";
|
|
4
4
|
|
|
5
5
|
// src/instance.ts
|
|
6
6
|
import axios from "axios";
|
|
@@ -113,9 +113,6 @@ function createAxle(config = {}) {
|
|
|
113
113
|
};
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
// src/interceptors/requestHeadersInterceptor.ts
|
|
117
|
-
import { isFunction } from "@varlet/shared";
|
|
118
|
-
|
|
119
116
|
// src/matcher.ts
|
|
120
117
|
import { minimatch } from "minimatch";
|
|
121
118
|
function matchPattern(pattern, method, url) {
|
|
@@ -140,6 +137,7 @@ function createMatcher(include, exclude) {
|
|
|
140
137
|
}
|
|
141
138
|
|
|
142
139
|
// src/interceptors/requestHeadersInterceptor.ts
|
|
140
|
+
import { isFunction } from "@varlet/shared";
|
|
143
141
|
function requestHeadersInterceptor(options = {}) {
|
|
144
142
|
const { headers: headersOrGetter } = options;
|
|
145
143
|
return {
|
|
@@ -155,9 +153,7 @@ function requestHeadersInterceptor(options = {}) {
|
|
|
155
153
|
});
|
|
156
154
|
return config;
|
|
157
155
|
},
|
|
158
|
-
onRejected(error)
|
|
159
|
-
return Promise.reject(error);
|
|
160
|
-
},
|
|
156
|
+
onRejected: (error) => Promise.reject(error),
|
|
161
157
|
options: options.axiosInterceptorOptions
|
|
162
158
|
};
|
|
163
159
|
}
|
|
@@ -176,9 +172,7 @@ function responseBlobInterceptor(options = {}) {
|
|
|
176
172
|
}
|
|
177
173
|
return response;
|
|
178
174
|
},
|
|
179
|
-
onRejected(error)
|
|
180
|
-
return Promise.reject(error);
|
|
181
|
-
},
|
|
175
|
+
onRejected: (error) => Promise.reject(error),
|
|
182
176
|
options: options.axiosInterceptorOptions
|
|
183
177
|
};
|
|
184
178
|
}
|
|
@@ -186,9 +180,7 @@ function responseBlobInterceptor(options = {}) {
|
|
|
186
180
|
// src/interceptors/responseTimeoutInterceptor.ts
|
|
187
181
|
function responseTimeoutInterceptor(options = {}) {
|
|
188
182
|
return {
|
|
189
|
-
onFulfilled(response)
|
|
190
|
-
return response;
|
|
191
|
-
},
|
|
183
|
+
onFulfilled: (response) => response,
|
|
192
184
|
onRejected(error) {
|
|
193
185
|
var _a, _b, _c;
|
|
194
186
|
const matcher = createMatcher(options.include, options.exclude);
|
|
@@ -203,12 +195,48 @@ function responseTimeoutInterceptor(options = {}) {
|
|
|
203
195
|
options: options.axiosInterceptorOptions
|
|
204
196
|
};
|
|
205
197
|
}
|
|
198
|
+
|
|
199
|
+
// src/interceptors/responseRetryInterceptor.ts
|
|
200
|
+
import axios2, { isCancel } from "axios";
|
|
201
|
+
function responseRetryInterceptor(options) {
|
|
202
|
+
return {
|
|
203
|
+
onFulfilled: (response) => response,
|
|
204
|
+
async onRejected(error) {
|
|
205
|
+
var _a, _b;
|
|
206
|
+
const matcher = createMatcher(options.include, options.exclude);
|
|
207
|
+
if (!matcher((_a = error.config.method) != null ? _a : "", (_b = error.config.url) != null ? _b : "")) {
|
|
208
|
+
return Promise.reject(error);
|
|
209
|
+
}
|
|
210
|
+
const { count = 1 } = options;
|
|
211
|
+
let retryCount = 0;
|
|
212
|
+
if (isCancel(error)) {
|
|
213
|
+
return Promise.reject(error);
|
|
214
|
+
}
|
|
215
|
+
async function loop() {
|
|
216
|
+
try {
|
|
217
|
+
retryCount++;
|
|
218
|
+
return await axios2.create()(error.config);
|
|
219
|
+
} catch (error2) {
|
|
220
|
+
if (retryCount === count) {
|
|
221
|
+
return Promise.reject(error2);
|
|
222
|
+
}
|
|
223
|
+
return loop();
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
return loop();
|
|
227
|
+
},
|
|
228
|
+
options: options.axiosInterceptorOptions
|
|
229
|
+
};
|
|
230
|
+
}
|
|
206
231
|
export {
|
|
207
232
|
createAxle,
|
|
208
233
|
createFetchRunner,
|
|
234
|
+
createMatcher,
|
|
209
235
|
createModifyRunner,
|
|
210
236
|
download,
|
|
237
|
+
matchPattern,
|
|
211
238
|
requestHeadersInterceptor,
|
|
212
239
|
responseBlobInterceptor,
|
|
240
|
+
responseRetryInterceptor,
|
|
213
241
|
responseTimeoutInterceptor
|
|
214
242
|
};
|
package/es/use.d.ts
CHANGED
|
@@ -13,7 +13,6 @@ interface RunOptions<P> {
|
|
|
13
13
|
params?: P;
|
|
14
14
|
config?: AxleRequestConfig;
|
|
15
15
|
resetValue?: boolean;
|
|
16
|
-
_retryCount?: number;
|
|
17
16
|
}
|
|
18
17
|
type Run<R, P> = (options?: RunOptions<P>) => Promise<R>;
|
|
19
18
|
interface UseAxleRefs<V> {
|
|
@@ -28,7 +27,6 @@ interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
|
|
|
28
27
|
method: RunnerMethod;
|
|
29
28
|
value?: V;
|
|
30
29
|
params?: P | (() => P);
|
|
31
|
-
retry?: number;
|
|
32
30
|
resetValue?: boolean;
|
|
33
31
|
config?: AxleRequestConfig;
|
|
34
32
|
immediate?: boolean;
|
package/es/use.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
|
-
__spreadProps,
|
|
3
2
|
__spreadValues
|
|
4
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-ZSUG26OQ.js";
|
|
5
4
|
|
|
6
5
|
// src/use.ts
|
|
7
6
|
import { ref as ref3 } from "vue";
|
|
@@ -61,7 +60,6 @@ function createUseAxle(options) {
|
|
|
61
60
|
resetValue: initialResetValue,
|
|
62
61
|
params: initialParamsOrGetter,
|
|
63
62
|
config: initialConfig,
|
|
64
|
-
retry = 0,
|
|
65
63
|
onBefore = () => {
|
|
66
64
|
},
|
|
67
65
|
onAfter = () => {
|
|
@@ -78,7 +76,6 @@ function createUseAxle(options) {
|
|
|
78
76
|
const error = ref3();
|
|
79
77
|
const downloadProgress = ref3(0);
|
|
80
78
|
const uploadProgress = ref3(0);
|
|
81
|
-
const shouldRetry = retry > 0;
|
|
82
79
|
const refs = {
|
|
83
80
|
value,
|
|
84
81
|
loading,
|
|
@@ -125,10 +122,6 @@ function createUseAxle(options) {
|
|
|
125
122
|
onAfter(refs);
|
|
126
123
|
return response;
|
|
127
124
|
} catch (responseError) {
|
|
128
|
-
const currentRetryCount = options3._retryCount == null ? 0 : options3._retryCount;
|
|
129
|
-
if (shouldRetry && currentRetryCount < retry) {
|
|
130
|
-
return run(__spreadProps(__spreadValues({}, options3), { _retryCount: currentRetryCount + 1 }));
|
|
131
|
-
}
|
|
132
125
|
error.value = responseError;
|
|
133
126
|
onError(responseError, refs);
|
|
134
127
|
loading.value = false;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@varlet/axle",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.9",
|
|
4
4
|
"description": "Progressive request tool based on axios",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "es/index.js",
|
|
@@ -41,7 +41,6 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@varlet/shared": "^2.19.2",
|
|
43
43
|
"axios": "^1.4.0",
|
|
44
|
-
"micromatch": "^4.0.5",
|
|
45
44
|
"minimatch": "^9.0.3",
|
|
46
45
|
"qs": "^6.11.0"
|
|
47
46
|
},
|