@varlet/axle 0.10.1 → 0.10.2

package/README.md

@@ -57,7 +57,7 @@ axios.interceptors.request.use(
   (error) => {
     // Do something with request error
     return Promise.reject(error)
-  }
+  },
 )
 
 // Add a response interceptor
@@ -71,7 +71,7 @@ axios.interceptors.response.use(
     // Any status codes that falls outside the range of 2xx cause this function to trigger
     // Do something with response error
     return Promise.reject(error)
-  }
+  },
 )
 ```
 
@@ -218,21 +218,17 @@ const headersInterceptor = requestHeadersInterceptor({
   headers: () => ({
     token: localStorage.getItem('token'),
     'Axle-Custom-Header': 'Axle-Custom-Header',
-  })
+  }),
 })
 
 const retryInterceptor = responseRetryInterceptor({ count: 3 })
 
 axios.interceptors.request.use(
-  headersInterceptor.onFulfilled, 
-  headersInterceptor.onRejected, 
-  headersInterceptor.options
-)
-axios.interceptors.response.use(
-  retryInterceptor.onFulfilled,
-  retryInterceptor.onRejected, 
-  retryInterceptor.options
+  headersInterceptor.onFulfilled,
+  headersInterceptor.onRejected,
+  headersInterceptor.options,
 )
+axios.interceptors.response.use(retryInterceptor.onFulfilled, retryInterceptor.onRejected, retryInterceptor.options)
 ```
 
 ### axle
@@ -262,25 +258,25 @@ It is used to request filtering to determine what request should apply the inter
 
 ```ts
 axle.useResponseInterceptor(
-  responseRetryInterceptor({ 
+  responseRetryInterceptor({
     count: 3,
     include: ['method:put', 'method:post', 'status:500'],
-    exclude: ['/system/**', '/user/addUser', 'status:400']
+    exclude: ['/system/**', '/user/addUser', 'status:400'],
   }),
 )
 ```
 
 ### List of built-in interceptor
 
-| Name | Description |
-| --- | --- |
-| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestHeadersInterceptor.md) | Used to customize the request header |
-| [requestMockInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestMockInterceptor.md) | Used to mock data |
-| [requestMd5Interceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestMd5Interceptor.md) | Used for md encryption of parameters and headers |
-| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseRetryInterceptor.md) | Used to realize the request abnormal retry |
-| [responseStatusInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseStatusInterceptor.md) | Used to intercept status code |
-| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseBlobInterceptor.md) | Used to intercept blob type |
-| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseTimeoutInterceptor.md) | Used to abnormal timeout |
+| Name                                                                                                                                           | Description                                      |
+| ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestHeadersInterceptor.md)   | Used to customize the request header             |
+| [requestMockInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestMockInterceptor.md)         | Used to mock data                                |
+| [requestMd5Interceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestMd5Interceptor.md)           | Used for md encryption of parameters and headers |
+| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseRetryInterceptor.md)     | Used to realize the request abnormal retry       |
+| [responseStatusInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseStatusInterceptor.md)   | Used to intercept status code                    |
+| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseBlobInterceptor.md)       | Used to intercept blob type                      |
+| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseTimeoutInterceptor.md) | Used to abnormal timeout                         |
 
 ## Vue Composition API
 
@@ -288,64 +284,64 @@ Axle provides the usage of Vue Composition API style, which encapsulates the `lo
 
 ```html
 <script setup>
-import { createAxle } from '@varlet/axle'
-import { createUseAxle } from '@varlet/axle/use'
+  import { createAxle } from '@varlet/axle'
+  import { createUseAxle } from '@varlet/axle/use'
 
-const axle = createAxle(/** @see https://axios-http.com **/)
+  const axle = createAxle(/** @see https://axios-http.com **/)
 
-const useAxle = createUseAxle({
-  axle,
-  // Optional value: Default immediate of the useAxle, defaults true
-  immediate: false,
-  // Optional value: Default onTransform of the useAxle
-  onTransform: (response) => response,
-})
+  const useAxle = createUseAxle({
+    axle,
+    // Optional value: Default immediate of the useAxle, defaults true
+    immediate: false,
+    // Optional value: Default onTransform of the useAxle
+    onTransform: (response) => response,
+  })
 
-const [
-  users, 
-  // request runner/invoker
-  getUsers, 
-  // extra properties
-  { loading, error, uploadProgress, downloadProgress, abort, resetValue }
-] = useAxle({
-  // Request initial value
-  value: [],
-  // Request method
-  method: 'get',
-  // Request url can be a getter function
-  url: '/user',
-  // Whether to send the request immediately, defaults true
-  immediate: false,
-  // Whether the value needs to be reset before requesting, defaults false
-  resetValue: true,
-  // Whether to clone when resetting value, defaults false
-  // When set to true, use JSON.parse(JSON.stringify(value)) cloned
-  // When set to a function, the set function will be used as the clone function, such as v => _.cloneDeep(v)
-  cloneResetValue: true,
-  // Request params, defaults {}, can be a getter function
-  params: { current: 1, pageSize: 10 },
-  // Axios config, see https://axios-http.com can be a getter function
-  config: { headers: {} },
-  // lifecycle
-  onBefore(refs) {
-    const { data, loading, error, uploadProgress, downloadProgress } = refs
-    console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
-    // Do request before
-  },
-  onTransform(response, refs) {
-    // Handle data transform, The transformed data will be the value of users.
-    return response.data
-  },
-  onSuccess(response, refs) {
-    // Do request success
-  },
-  onError(error, refs) {
-    // Do request error
-  },
-  onAfter(refs) {
-    // Do request after
-  },
-})
+  const [
+    users,
+    // request runner/invoker
+    getUsers,
+    // extra properties
+    { loading, error, uploadProgress, downloadProgress, abort, resetValue },
+  ] = useAxle({
+    // Request initial value
+    value: [],
+    // Request method
+    method: 'get',
+    // Request url can be a getter function
+    url: '/user',
+    // Whether to send the request immediately, defaults true
+    immediate: false,
+    // Whether the value needs to be reset before requesting, defaults false
+    resetValue: true,
+    // Whether to clone when resetting value, defaults false
+    // When set to true, use JSON.parse(JSON.stringify(value)) cloned
+    // When set to a function, the set function will be used as the clone function, such as v => _.cloneDeep(v)
+    cloneResetValue: true,
+    // Request params, defaults {}, can be a getter function
+    params: { current: 1, pageSize: 10 },
+    // Axios config, see https://axios-http.com can be a getter function
+    config: { headers: {} },
+    // lifecycle
+    onBefore(refs) {
+      const { data, loading, error, uploadProgress, downloadProgress } = refs
+      console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
+      // Do request before
+    },
+    onTransform(response, refs) {
+      // Handle data transform, The transformed data will be the value of users.
+      return response.data
+    },
+    onSuccess(response, refs) {
+      // Do request success
+    },
+    onError(error, refs) {
+      // Do request error
+    },
+    onAfter(refs) {
+      // Do request after
+    },
+  })
 </script>
 
 <template>
@@ -365,42 +361,42 @@ Axle provides some parallel request processing tools, please refer to the follow
 
 ```html
 <script setup>
-import { createAxle } from '@varlet/axle'
-import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+  import { createAxle } from '@varlet/axle'
+  import { createUseAxle, useAverageProgress, useHasLoading, useValues } from '@varlet/axle/use'
 
-const axle = createAxle(/** @see https://axios-http.com **/)
+  const axle = createAxle(/** @see https://axios-http.com **/)
 
-const useAxle = createUseAxle({ axle })
+  const useAxle = createUseAxle({ axle })
 
-const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
-  method: 'get',
-  url: '/user',
-})
+  const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
+    method: 'get',
+    url: '/user',
+  })
 
-const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
-  method: 'get',
-  url: '/role',
-})
+  const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
+    method: 'get',
+    url: '/role',
+  })
 
-// At the end of all requests, loading is false
-const loading = useHasLoading(isUsersLoading, isRolesLoading)
-// At the end of all requests, downloadProgress is 1
-const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
-// Ref<[
-//   [{ name: 'foo' }, { name: 'bar' }],
-//   [{ role: 'admin' }, { role: 'user' }]
-// ]> <-
-// [
-//   Ref<[{ name: 'foo' }, { name: 'bar' }]>,
-//   Ref<[{ role: 'admin' }, { role: 'user' }]>
-// ]
-const usersRoles = useValues(users, roles)
-
-function sendAllRequest() {
-  // parallel
-  getUsers()
-  getRoles()
-}
+  // At the end of all requests, loading is false
+  const loading = useHasLoading(isUsersLoading, isRolesLoading)
+  // At the end of all requests, downloadProgress is 1
+  const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
+  // Ref<[
+  //   [{ name: 'foo' }, { name: 'bar' }],
+  //   [{ role: 'admin' }, { role: 'user' }]
+  // ]> <-
+  // [
+  //   Ref<[{ name: 'foo' }, { name: 'bar' }]>,
+  //   Ref<[{ role: 'admin' }, { role: 'user' }]>
+  // ]
+  const usersRoles = useValues(users, roles)
+
+  function sendAllRequest() {
+    // parallel
+    getUsers()
+    getRoles()
+  }
 </script>
 
 <template>
@@ -419,8 +415,8 @@ function sendAllRequest() {
 
 ```ts
 import { createAxle } from '@varlet/axle'
-import { createUseAxle } from '@varlet/axle/use'
 import { createApi } from '@varlet/axle/api'
+import { createUseAxle } from '@varlet/axle/use'
 
 const axle = createAxle({
   baseURL: '/api',
@@ -507,15 +503,15 @@ before:
 
 ```html
 <script setup>
-const [users, getUsers, { loading: isUsersLoading }] = useAxle({
-  method: 'get',
-  url: '/user',
-})
+  const [users, getUsers, { loading: isUsersLoading }] = useAxle({
+    method: 'get',
+    url: '/user',
+  })
 
-const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
-  method: 'get',
-  url: '/post',
-})
+  const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
+    method: 'get',
+    url: '/post',
+  })
 </script>
 
 <template>
@@ -530,15 +526,15 @@ after:
 
 ```html
 <script setup>
-const [users, getUsers] = useAxle({
-  method: 'get',
-  url: '/user',
-})
+  const [users, getUsers] = useAxle({
+    method: 'get',
+    url: '/user',
+  })
 
-const [posts, getPosts] = useAxle({
-  method: 'get',
-  url: '/post',
-})
+  const [posts, getPosts] = useAxle({
+    method: 'get',
+    url: '/post',
+  })
 </script>
 
 <template>

package/README.zh-CN.md

@@ -57,7 +57,7 @@ axios.interceptors.request.use(
   (error) => {
     // 请求错误处理
     return Promise.reject(error)
-  }
+  },
 )
 
 // 添加请求后返回拦截器
@@ -71,7 +71,7 @@ axios.interceptors.response.use(
     // 任何超出 2xx 范围的状态代码都会导致此函数触发
     // 对响应错误做一些事情
     return Promise.reject(error)
-  }
+  },
 )
 ```
 
@@ -218,21 +218,17 @@ const headersInterceptor = requestHeadersInterceptor({
   headers: () => ({
     token: localStorage.getItem('token'),
     'Axle-Custom-Header': 'Axle-Custom-Header',
-  })
+  }),
 })
 
 const retryInterceptor = responseRetryInterceptor({ count: 3 })
 
 axios.interceptors.request.use(
-  headersInterceptor.onFulfilled, 
-  headersInterceptor.onRejected, 
-  headersInterceptor.options
-)
-axios.interceptors.response.use(
-  retryInterceptor.onFulfilled,
-  retryInterceptor.onRejected, 
-  retryInterceptor.options
+  headersInterceptor.onFulfilled,
+  headersInterceptor.onRejected,
+  headersInterceptor.options,
 )
+axios.interceptors.response.use(retryInterceptor.onFulfilled, retryInterceptor.onRejected, retryInterceptor.options)
 ```
 
 ### axle
@@ -262,25 +258,25 @@ axle.useResponseInterceptor(responseRetryInterceptor({ count: 3 }))
 
 ```ts
 axle.useResponseInterceptor(
-  responseRetryInterceptor({ 
+  responseRetryInterceptor({
     count: 3,
     include: ['method:put', 'method:post', 'status:500'],
-    exclude: ['/system/**', '/user/addUser', 'status:400']
+    exclude: ['/system/**', '/user/addUser', 'status:400'],
   }),
 )
 ```
 
 ### 内置拦截器一览
 
-| 名称 | 描述 |
-| --- | --- |
-| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestHeadersInterceptor.md) | 用于自定义请求头 |
-| [requestMockInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestMockInterceptor.md) | 用于模拟数据 |
-| [requestMd5Interceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestMd5Interceptor.md) | 用于对请求参数进行 md5 处理  |
-| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseRetryInterceptor.md) | 用于实现请求异常重试 |
-| [responseStatusInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseStatusInterceptor.md) | 用于拦截状态码 |
-| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseBlobInterceptor.md) | 用于拦截 blob 类型 |
-| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseTimeoutInterceptor.md) | 用于归一化超时异常 |
+| 名称                                                                                                                                           | 描述                        |
+| ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| [requestHeadersInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestHeadersInterceptor.md)   | 用于自定义请求头            |
+| [requestMockInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestMockInterceptor.md)         | 用于模拟数据                |
+| [requestMd5Interceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/requestMd5Interceptor.md)           | 用于对请求参数进行 md5 处理 |
+| [responseRetryInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseRetryInterceptor.md)     | 用于实现请求异常重试        |
+| [responseStatusInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseStatusInterceptor.md)   | 用于拦截状态码              |
+| [responseBlobInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseBlobInterceptor.md)       | 用于拦截 blob 类型          |
+| [responseTimeoutInterceptor](https://github.com/varletjs/axle/blob/main/packages/axle/src/interceptors/examples/responseTimeoutInterceptor.md) | 用于归一化超时异常          |
 
 ## Vue 组合式 API
 
@@ -288,64 +284,64 @@ Axle 提供了 Vue Composition API 风格的用法，封装了请求的 `加载
 
 ```html
 <script setup>
-import { createAxle } from '@varlet/axle'
-import { createUseAxle } from '@varlet/axle/use'
+  import { createAxle } from '@varlet/axle'
+  import { createUseAxle } from '@varlet/axle/use'
 
-const axle = createAxle(/** @see https://axios-http.com **/)
+  const axle = createAxle(/** @see https://axios-http.com **/)
 
-const useAxle = createUseAxle({
-  axle,
-  // 可选项: useAxle 的默认 immediate, 默认值: true
-  immediate: false,
-  // 可选项: useAxle 的默认 onTransform
-  onTransform: (response) => response,
-})
+  const useAxle = createUseAxle({
+    axle,
+    // 可选项: useAxle 的默认 immediate, 默认值: true
+    immediate: false,
+    // 可选项: useAxle 的默认 onTransform
+    onTransform: (response) => response,
+  })
 
-const [
-  users, 
-  // 请求触发器
-  getUsers, 
-  // 附加属性
-  { loading, error, uploadProgress, downloadProgress, abort }
-] = useAxle({
-  // 请求初始化数据
-  value: [],
-  // 请求方法
-  method: 'get',
-  // 请求地址, 可以是 getter 函数
-  url: '/user',
-  // 是否立即发送请求, 默认值: true
-  immediate: false,
-  // 请求前是否需要重置 value, 默认值: false
-  resetValue: true,
-  // 重置 value 是否对 value 进行拷贝
-  // 设置为 true 时, 使用 JSON.parse(JSON.stringify(value)) 进行拷贝
-  // 设置为一个函数时, 该函数将作为拷贝函数对 value 进行拷贝， 如 v => _.cloneDeep(v)
-  cloneResetValue: true,
-  // 请求参数, 默认值: {}, 可以是 getter 函数
-  params: { current: 1, pageSize: 10 },
-  // Axios 配置, see https://axios-http.com, 可以是 getter 函数
-  config: { headers: {} },
-  // 生命周期
-  onBefore(refs) {
-    const { data, loading, error, uploadProgress, downloadProgress } = refs
-    console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
-    // 处理请求前逻辑
-  },
-  onTransform(response, refs) {
-    // 处理数据转换，转换后的数据将成为 users 的值。
-    return response.data
-  },
-  onSuccess(response, refs) {
-    // 处理请求成功逻辑
-  },
-  onError(error, refs) {
-    // 处理请求错误逻辑
-  },
-  onAfter(refs) {
-    // 处理请求结束逻辑，无论成功失败都会触发。
-  },
-})
+  const [
+    users,
+    // 请求触发器
+    getUsers,
+    // 附加属性
+    { loading, error, uploadProgress, downloadProgress, abort },
+  ] = useAxle({
+    // 请求初始化数据
+    value: [],
+    // 请求方法
+    method: 'get',
+    // 请求地址, 可以是 getter 函数
+    url: '/user',
+    // 是否立即发送请求, 默认值: true
+    immediate: false,
+    // 请求前是否需要重置 value, 默认值: false
+    resetValue: true,
+    // 重置 value 是否对 value 进行拷贝
+    // 设置为 true 时, 使用 JSON.parse(JSON.stringify(value)) 进行拷贝
+    // 设置为一个函数时, 该函数将作为拷贝函数对 value 进行拷贝， 如 v => _.cloneDeep(v)
+    cloneResetValue: true,
+    // 请求参数, 默认值: {}, 可以是 getter 函数
+    params: { current: 1, pageSize: 10 },
+    // Axios 配置, see https://axios-http.com, 可以是 getter 函数
+    config: { headers: {} },
+    // 生命周期
+    onBefore(refs) {
+      const { data, loading, error, uploadProgress, downloadProgress } = refs
+      console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
+      // 处理请求前逻辑
+    },
+    onTransform(response, refs) {
+      // 处理数据转换，转换后的数据将成为 users 的值。
+      return response.data
+    },
+    onSuccess(response, refs) {
+      // 处理请求成功逻辑
+    },
+    onError(error, refs) {
+      // 处理请求错误逻辑
+    },
+    onAfter(refs) {
+      // 处理请求结束逻辑，无论成功失败都会触发。
+    },
+  })
 </script>
 
 <template>
@@ -365,42 +361,42 @@ Axle 提供了一些并行请求处理工具，请参考以下示例。
 
 ```html
 <script setup>
-import { createAxle } from '@varlet/axle'
-import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+  import { createAxle } from '@varlet/axle'
+  import { createUseAxle, useAverageProgress, useHasLoading, useValues } from '@varlet/axle/use'
 
-const axle = createAxle(/** @see https://axios-http.com **/)
+  const axle = createAxle(/** @see https://axios-http.com **/)
 
-const useAxle = createUseAxle({ axle })
+  const useAxle = createUseAxle({ axle })
 
-const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
-  method: 'get',
-  url: '/user',
-})
+  const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
+    method: 'get',
+    url: '/user',
+  })
 
-const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
-  method: 'get',
-  url: '/role',
-})
+  const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
+    method: 'get',
+    url: '/role',
+  })
 
-// 所有请求结束时，loading 为 false
-const loading = useHasLoading(isUsersLoading, isRolesLoading)
-// 所有请求结束时，downloadProgress 为 1
-const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
-// Ref<[
-//   [{ name: 'foo' }, { name: 'bar' }],
-//   [{ role: 'admin' }, { role: 'user' }]
-// ]> <-
-// [
-//   Ref<[{ name: 'foo' }, { name: 'bar' }]>,
-//   Ref<[{ role: 'admin' }, { role: 'user' }]>
-// ]
-const usersRoles = useValues(users, roles)
-
-function sendAllRequest() {
-  // parallel
-  getUsers()
-  getRoles()
-}
+  // 所有请求结束时，loading 为 false
+  const loading = useHasLoading(isUsersLoading, isRolesLoading)
+  // 所有请求结束时，downloadProgress 为 1
+  const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
+  // Ref<[
+  //   [{ name: 'foo' }, { name: 'bar' }],
+  //   [{ role: 'admin' }, { role: 'user' }]
+  // ]> <-
+  // [
+  //   Ref<[{ name: 'foo' }, { name: 'bar' }]>,
+  //   Ref<[{ role: 'admin' }, { role: 'user' }]>
+  // ]
+  const usersRoles = useValues(users, roles)
+
+  function sendAllRequest() {
+    // parallel
+    getUsers()
+    getRoles()
+  }
 </script>
 
 <template>
@@ -419,8 +415,8 @@ function sendAllRequest() {
 
 ```ts
 import { createAxle } from '@varlet/axle'
-import { createUseAxle } from '@varlet/axle/use'
 import { createApi } from '@varlet/axle/api'
+import { createUseAxle } from '@varlet/axle/use'
 
 const axle = createAxle({
   baseURL: '/api',
@@ -507,15 +503,15 @@ async function handleDelete(id: string) {
 
 ```html
 <script setup>
-const [users, getUsers, { loading: isUsersLoading }] = useAxle({
-  method: 'get',
-  url: '/user',
-})
+  const [users, getUsers, { loading: isUsersLoading }] = useAxle({
+    method: 'get',
+    url: '/user',
+  })
 
-const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
-  method: 'get',
-  url: '/post',
-})
+  const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
+    method: 'get',
+    url: '/post',
+  })
 </script>
 
 <template>
@@ -530,15 +526,15 @@ const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
 
 ```html
 <script setup>
-const [users, getUsers] = useAxle({
-  method: 'get',
-  url: '/user',
-})
+  const [users, getUsers] = useAxle({
+    method: 'get',
+    url: '/user',
+  })
 
-const [posts, getPosts] = useAxle({
-  method: 'get',
-  url: '/post',
-})
+  const [posts, getPosts] = useAxle({
+    method: 'get',
+    url: '/post',
+  })
 </script>
 
 <template>

package/lib/api.d.cts

@@ -1,16 +1,16 @@
 import { UseAxleOptions, UseAxle, UseAxleInstance } from './use.cjs';
-import { e as AxleInstance, d as RunnerMethod, A as AxleRequestConfig } from './instance-6ab5bfe4.js';
+import { e as AxleInstance, d as RunnerMethod, A as AxleRequestConfig } from './instance-ab0b388e.js';
 import 'vue';
 import 'axios';
 
 type ApiPathParams = Record<string, any> | (() => Record<string, any>);
-type ApiUseOptions<V, R, P> = Partial<UseAxleOptions<V, R, P>> & {
+type ApiUseOptions<V, R, P, D> = Partial<UseAxleOptions<V, R, P, D>> & {
     pathParams?: ApiPathParams;
 };
-declare function createApi(axle: AxleInstance, useAxle: UseAxle): <R = any, P = Record<string, any>>(url: string, method: RunnerMethod) => {
+declare function createApi(axle: AxleInstance, useAxle: UseAxle): <R = any, P = Record<string, any>, D = Record<string, any>>(url: string, method: RunnerMethod) => {
     url: string;
-    load: (params?: P | undefined, pathParams?: ApiPathParams, config?: AxleRequestConfig) => Promise<R>;
-    use: <UV = any>(options?: ApiUseOptions<UV, R, P>) => UseAxleInstance<UV, R, P>;
+    load: (params?: P | undefined, pathParams?: ApiPathParams, config?: AxleRequestConfig<D> | undefined) => Promise<R>;
+    use: <V = any>(options?: ApiUseOptions<V, R, P, D>) => UseAxleInstance<V, R, P, D>;
     patchUrl: (url: string, pathParams: ApiPathParams) => string;
 };
 

package/lib/api.d.ts

@@ -1,16 +1,16 @@
 import { UseAxleOptions, UseAxle, UseAxleInstance } from './use.js';
-import { e as AxleInstance, d as RunnerMethod, A as AxleRequestConfig } from './instance-6ab5bfe4.js';
+import { e as AxleInstance, d as RunnerMethod, A as AxleRequestConfig } from './instance-ab0b388e.js';
 import 'vue';
 import 'axios';
 
 type ApiPathParams = Record<string, any> | (() => Record<string, any>);
-type ApiUseOptions<V, R, P> = Partial<UseAxleOptions<V, R, P>> & {
+type ApiUseOptions<V, R, P, D> = Partial<UseAxleOptions<V, R, P, D>> & {
     pathParams?: ApiPathParams;
 };
-declare function createApi(axle: AxleInstance, useAxle: UseAxle): <R = any, P = Record<string, any>>(url: string, method: RunnerMethod) => {
+declare function createApi(axle: AxleInstance, useAxle: UseAxle): <R = any, P = Record<string, any>, D = Record<string, any>>(url: string, method: RunnerMethod) => {
     url: string;
-    load: (params?: P | undefined, pathParams?: ApiPathParams, config?: AxleRequestConfig) => Promise<R>;
-    use: <UV = any>(options?: ApiUseOptions<UV, R, P>) => UseAxleInstance<UV, R, P>;
+    load: (params?: P | undefined, pathParams?: ApiPathParams, config?: AxleRequestConfig<D> | undefined) => Promise<R>;
+    use: <V = any>(options?: ApiUseOptions<V, R, P, D>) => UseAxleInstance<V, R, P, D>;
     patchUrl: (url: string, pathParams: ApiPathParams) => string;
 };
 

package/lib/index.cjs

@@ -209,8 +209,8 @@ function createMatcher(include, exclude) {
 }
 
 // src/helper.ts
-var import_rattail = require("rattail");
 var import_axios3 = require("axios");
+var import_rattail = require("rattail");
 function withResponse(promise) {
   return new Promise((resolve, reject) => {
     promise.then((response) => {
@@ -368,7 +368,7 @@ var import_axios5 = __toESM(require("axios"), 1);
 function responseRetryInterceptor(options) {
   return {
     onFulfilled: (response) => response,
-    async onRejected(error) {
+    onRejected(error) {
       var _a, _b, _c;
       const matcher = createMatcher(options.include, options.exclude);
       if (!matcher((_a = error.config.method) != null ? _a : "", (_b = error.config.url) != null ? _b : "", (_c = error == null ? void 0 : error.response) == null ? void 0 : _c.status) || (0, import_axios5.isCancel)(error)) {
@@ -427,11 +427,11 @@ function responseStatusInterceptor(options) {
 }
 
 // src/interceptors/requestMd5Interceptor.ts
-var import_qs2 = __toESM(require("qs"), 1);
 var import_md5 = __toESM(require("crypto-js/md5.js"), 1);
 var import_get = __toESM(require("lodash/get.js"), 1);
 var import_set = __toESM(require("lodash/set.js"), 1);
 var import_minimatch3 = require("minimatch");
+var import_qs2 = __toESM(require("qs"), 1);
 var import_rattail3 = require("rattail");
 function withCtxMd5(ctx, mapping) {
   mapping.path.forEach((path) => {

package/lib/index.d.cts

@@ -1,5 +1,5 @@
-import { R as RequestInterceptor, a as ResponseInterceptor } from './instance-6ab5bfe4.js';
-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, h as createAxle, f as createFetchRunner, g as createModifyRunner } from './instance-6ab5bfe4.js';
+import { R as RequestInterceptor, a as ResponseInterceptor } from './instance-ab0b388e.js';
+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, h as createAxle, f as createFetchRunner, g as createModifyRunner } from './instance-ab0b388e.js';
 import { AxiosResponse, AxiosInterceptorOptions, AxiosRequestConfig } from 'axios';
 export { AxiosError, AxiosInstance, AxiosInterceptorOptions, AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, HeadersDefaults, InternalAxiosRequestConfig, ResponseType, isAxiosError } from 'axios';
 

package/lib/index.d.ts

@@ -1,5 +1,5 @@
-import { R as RequestInterceptor, a as ResponseInterceptor } from './instance-6ab5bfe4.js';
-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, h as createAxle, f as createFetchRunner, g as createModifyRunner } from './instance-6ab5bfe4.js';
+import { R as RequestInterceptor, a as ResponseInterceptor } from './instance-ab0b388e.js';
+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, h as createAxle, f as createFetchRunner, g as createModifyRunner } from './instance-ab0b388e.js';
 import { AxiosResponse, AxiosInterceptorOptions, AxiosRequestConfig } from 'axios';
 export { AxiosError, AxiosInstance, AxiosInterceptorOptions, AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, HeadersDefaults, InternalAxiosRequestConfig, ResponseType, isAxiosError } from 'axios';
 

package/lib/index.js

@@ -146,8 +146,8 @@ function createMatcher(include, exclude) {
 }
 
 // src/helper.ts
-import { inBrowser } from "rattail";
 import { isAxiosError as isAxiosError2 } from "axios";
+import { inBrowser } from "rattail";
 function withResponse(promise) {
   return new Promise((resolve, reject) => {
     promise.then((response) => {
@@ -305,7 +305,7 @@ import axios2, { isCancel } from "axios";
 function responseRetryInterceptor(options) {
   return {
     onFulfilled: (response) => response,
-    async onRejected(error) {
+    onRejected(error) {
       var _a, _b, _c;
       const matcher = createMatcher(options.include, options.exclude);
       if (!matcher((_a = error.config.method) != null ? _a : "", (_b = error.config.url) != null ? _b : "", (_c = error == null ? void 0 : error.response) == null ? void 0 : _c.status) || isCancel(error)) {
@@ -364,11 +364,11 @@ function responseStatusInterceptor(options) {
 }
 
 // src/interceptors/requestMd5Interceptor.ts
-import qs2 from "qs";
 import md5 from "crypto-js/md5.js";
 import get from "lodash/get.js";
 import set from "lodash/set.js";
 import { minimatch as minimatch3 } from "minimatch";
+import qs2 from "qs";
 import { isString } from "rattail";
 function withCtxMd5(ctx, mapping) {
   mapping.path.forEach((path) => {

package/lib/{instance-6ab5bfe4.d.ts → instance-ab0b388e.d.ts}

@@ -1,10 +1,10 @@
 import { AxiosRequestConfig, AxiosResponse, AxiosInterceptorOptions, InternalAxiosRequestConfig, HeadersDefaults, AxiosInstance, ResponseType } from 'axios';
 
-interface AxleRequestConfig extends AxiosRequestConfig {
+interface AxleRequestConfig<D = any> extends AxiosRequestConfig<D> {
 }
 
-type FetchRunner = <R = AxiosResponse, P = Record<string, any>>(url: string, params?: P, config?: AxleRequestConfig) => Promise<R>;
-type ModifyRunner = <R = AxiosResponse, P = Record<string, any>>(url: string, params?: P, config?: AxleRequestConfig) => Promise<R>;
+type FetchRunner = <R = AxiosResponse, P = Record<string, any>, D = Record<string, any>>(url: string, params?: P, config?: AxleRequestConfig<D>) => Promise<R>;
+type ModifyRunner = <R = AxiosResponse, P = Record<string, any>, D = Record<string, any>>(url: string, params?: P, config?: AxleRequestConfig<D>) => Promise<R>;
 type FetchMethod = 'get' | 'delete' | 'options' | 'head';
 type ModifyMethod = 'post' | 'put' | 'patch';
 type RunnerMethod = keyof Omit<AxleInstance, 'axios' | 'getHeaders' | 'setHeader' | 'removeHeader' | 'useRequestInterceptor' | 'useResponseInterceptor'>;
@@ -56,8 +56,8 @@ type AxleInstance = {
     useResponseInterceptor(...interceptors: ResponseInterceptor[]): void;
     axios: AxiosInstance;
 };
-declare function createFetchRunner(service: AxiosInstance, method: FetchMethod, responseType: ResponseType): <R = AxiosResponse<any, any>, P = Record<string, any>>(url: string, params?: P | undefined, config?: AxleRequestConfig) => Promise<R>;
-declare function createModifyRunner(service: AxiosInstance, method: ModifyMethod, contentType: 'application/json' | 'multipart/form-data' | 'application/x-www-form-urlencoded'): <R = AxiosResponse<any, any>, P = Record<string, any>>(url: string, params?: P | undefined, config?: AxleRequestConfig) => Promise<R>;
+declare function createFetchRunner(service: AxiosInstance, method: FetchMethod, responseType: ResponseType): <R = AxiosResponse<any, any>, P = Record<string, any>, D = Record<string, any>>(url: string, params?: P | undefined, config?: AxleRequestConfig<D> | undefined) => Promise<R>;
+declare function createModifyRunner(service: AxiosInstance, method: ModifyMethod, contentType: 'application/json' | 'multipart/form-data' | 'application/x-www-form-urlencoded'): <R = AxiosResponse<any, any>, P = Record<string, any>, D = Record<string, any>>(url: string, params?: P | undefined, config?: AxleRequestConfig<D> | undefined) => Promise<R>;
 declare function createAxle(config?: AxleRequestConfig): AxleInstance;
 
 export { AxleRequestConfig as A, FetchRunner as F, Interceptor as I, ModifyRunner as M, RequestInterceptor as R, ResponseInterceptor as a, FetchMethod as b, ModifyMethod as c, RunnerMethod as d, AxleInstance as e, createFetchRunner as f, createModifyRunner as g, createAxle as h };

package/lib/use.d.cts

@@ -1,5 +1,5 @@
 import { Ref, WritableComputedRef } from 'vue';
-import { A as AxleRequestConfig, d as RunnerMethod, e as AxleInstance } from './instance-6ab5bfe4.js';
+import { A as AxleRequestConfig, d as RunnerMethod, e as AxleInstance } from './instance-ab0b388e.js';
 import 'axios';
 
 declare function useValues<T extends Ref<any>[]>(...valueCollection: T): WritableComputedRef<T[number]['value'][]>;
@@ -8,10 +8,10 @@ declare function useHasLoading(...loadings: Ref<boolean>[]): Ref<boolean>;
 
 declare function useAverageProgress(...progressCollection: Ref<number>[]): Ref<number>;
 
-interface RunOptions<V, P> {
+interface RunOptions<V, P, D> {
     url?: string;
     params?: P;
-    config?: AxleRequestConfig;
+    config?: AxleRequestConfig<D>;
     resetValue?: boolean;
     cloneResetValue?: boolean | ((value: V) => V);
 }
@@ -30,10 +30,10 @@ interface UseAxleRefs<V> {
     uploadProgress: Ref<number>;
     downloadProgress: Ref<number>;
 }
-type Run<V, R, P> = {
-    (options?: RunOptions<V, P>): Promise<R>;
+type Run<V, R, P, D> = {
+    (options?: RunOptions<V, P, D>): Promise<R>;
 } & UseAxleExtra<V>;
-interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
+interface UseAxleOptions<V = any, R = any, P = Record<string, any>, D = Record<string, any>> {
     url: string | (() => string);
     method: RunnerMethod;
     value?: V;
@@ -41,7 +41,7 @@ interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
     resetValue?: boolean;
     cloneResetValue?: boolean | ((value: V) => V);
     immediate?: boolean;
-    config?: AxleRequestConfig | (() => AxleRequestConfig);
+    config?: AxleRequestConfig<D> | (() => AxleRequestConfig<D>);
     onBefore?(refs: UseAxleRefs<V>): void;
     onAfter?(refs: UseAxleRefs<V>): void;
     onTransform?(response: R, refs: UseAxleRefs<V>): V | Promise<V>;
@@ -51,13 +51,13 @@ interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
 interface ResetValueOptions<V> {
     cloneResetValue?: boolean | ((value: V) => V);
 }
-type UseAxleInstance<V, R, P> = [value: Ref<V>, run: Run<V, R, P>, extra: UseAxleExtra<V>];
+type UseAxleInstance<V, R, P, D> = [value: Ref<V>, run: Run<V, R, P, D>, extra: UseAxleExtra<V>];
 interface CreateUseAxleOptions {
     axle: AxleInstance;
     immediate?: boolean;
     onTransform?(response: any, refs: any): any;
 }
-type UseAxle = <V = any, R = any, P = Record<string, any>>(options: UseAxleOptions<V, R, P>) => UseAxleInstance<V, R, P>;
+type UseAxle = <V = any, R = any, P = Record<string, any>, D = Record<string, any>>(options: UseAxleOptions<V, R, P, D>) => UseAxleInstance<V, R, P, D>;
 declare function normalizeValueGetter<T>(valueGetter: T | (() => T)): T;
 declare function createUseAxle(options: CreateUseAxleOptions): UseAxle;
 

package/lib/use.d.ts

@@ -1,5 +1,5 @@
 import { Ref, WritableComputedRef } from 'vue';
-import { A as AxleRequestConfig, d as RunnerMethod, e as AxleInstance } from './instance-6ab5bfe4.js';
+import { A as AxleRequestConfig, d as RunnerMethod, e as AxleInstance } from './instance-ab0b388e.js';
 import 'axios';
 
 declare function useValues<T extends Ref<any>[]>(...valueCollection: T): WritableComputedRef<T[number]['value'][]>;
@@ -8,10 +8,10 @@ declare function useHasLoading(...loadings: Ref<boolean>[]): Ref<boolean>;
 
 declare function useAverageProgress(...progressCollection: Ref<number>[]): Ref<number>;
 
-interface RunOptions<V, P> {
+interface RunOptions<V, P, D> {
     url?: string;
     params?: P;
-    config?: AxleRequestConfig;
+    config?: AxleRequestConfig<D>;
     resetValue?: boolean;
     cloneResetValue?: boolean | ((value: V) => V);
 }
@@ -30,10 +30,10 @@ interface UseAxleRefs<V> {
     uploadProgress: Ref<number>;
     downloadProgress: Ref<number>;
 }
-type Run<V, R, P> = {
-    (options?: RunOptions<V, P>): Promise<R>;
+type Run<V, R, P, D> = {
+    (options?: RunOptions<V, P, D>): Promise<R>;
 } & UseAxleExtra<V>;
-interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
+interface UseAxleOptions<V = any, R = any, P = Record<string, any>, D = Record<string, any>> {
     url: string | (() => string);
     method: RunnerMethod;
     value?: V;
@@ -41,7 +41,7 @@ interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
     resetValue?: boolean;
     cloneResetValue?: boolean | ((value: V) => V);
     immediate?: boolean;
-    config?: AxleRequestConfig | (() => AxleRequestConfig);
+    config?: AxleRequestConfig<D> | (() => AxleRequestConfig<D>);
     onBefore?(refs: UseAxleRefs<V>): void;
     onAfter?(refs: UseAxleRefs<V>): void;
     onTransform?(response: R, refs: UseAxleRefs<V>): V | Promise<V>;
@@ -51,13 +51,13 @@ interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
 interface ResetValueOptions<V> {
     cloneResetValue?: boolean | ((value: V) => V);
 }
-type UseAxleInstance<V, R, P> = [value: Ref<V>, run: Run<V, R, P>, extra: UseAxleExtra<V>];
+type UseAxleInstance<V, R, P, D> = [value: Ref<V>, run: Run<V, R, P, D>, extra: UseAxleExtra<V>];
 interface CreateUseAxleOptions {
     axle: AxleInstance;
     immediate?: boolean;
     onTransform?(response: any, refs: any): any;
 }
-type UseAxle = <V = any, R = any, P = Record<string, any>>(options: UseAxleOptions<V, R, P>) => UseAxleInstance<V, R, P>;
+type UseAxle = <V = any, R = any, P = Record<string, any>, D = Record<string, any>>(options: UseAxleOptions<V, R, P, D>) => UseAxleInstance<V, R, P, D>;
 declare function normalizeValueGetter<T>(valueGetter: T | (() => T)): T;
 declare function createUseAxle(options: CreateUseAxleOptions): UseAxle;
 

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@varlet/axle",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Progressive request tool based on axios",
-  "type": "module",
-  "main": "lib/index.cjs",
-  "module": "lib/index.js",
-  "types": "index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "./lib/*"
-      ]
-    }
+  "keywords": [
+    "axle",
+    "axios",
+    "helpers",
+    "vue3",
+    "composition api"
+  ],
+  "bugs": {
+    "url": "https://github.com/varletjs/axle/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/varletjs/axle.git"
   },
+  "license": "MIT",
+  "author": "haoziqaq <357229046@qq.com>",
   "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": {
       "import": "./lib/index.js",
@@ -32,28 +38,26 @@
     },
     "./*": "./*"
   },
+  "main": "lib/index.cjs",
+  "module": "lib/index.js",
+  "types": "index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./lib/*"
+      ]
+    }
+  },
   "files": [
     "lib"
   ],
-  "keywords": [
-    "axle",
-    "axios",
-    "helpers",
-    "vue3",
-    "composition api"
-  ],
-  "author": "haoziqaq <357229046@qq.com>",
-  "license": "MIT",
   "dependencies": {
-    "rattail": "1.0.0",
     "axios": "^1.7.3",
     "crypto-js": "^4.2.0",
     "lodash": "4.17.21",
     "minimatch": "^9.0.3",
-    "qs": "^6.11.0"
-  },
-  "peerDependencies": {
-    "vue": "^3.2.0"
+    "qs": "^6.11.0",
+    "rattail": "1.0.0"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.2.1",
@@ -64,15 +68,11 @@
     "typescript": "^5.1.5",
     "vue": "3.3.4"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/varletjs/axle.git"
-  },
-  "bugs": {
-    "url": "https://github.com/varletjs/axle/issues"
+  "peerDependencies": {
+    "vue": "^3.2.0"
   },
   "scripts": {
-    "dev": "tsup src/index.ts src/use.ts src/api.ts --format esm --out-dir=lib --watch --dts",
-    "build": "tsup src/index.ts src/use.ts src/api.ts --format esm,cjs --out-dir=lib --dts --clean"
+    "build": "tsup src/index.ts src/use.ts src/api.ts --format esm,cjs --out-dir=lib --dts --clean",
+    "dev": "tsup src/index.ts src/use.ts src/api.ts --format esm --out-dir=lib --watch --dts"
   }
 }