@varlet/axle 0.2.5 → 0.2.7-alpha.1701535975035

package/README.md

@@ -1,4 +1,4 @@
-<span>English</span> | 
+<span>English</span> |
 <a href="https://github.com/varletjs/axle/blob/main/README.zh-CN.md">中文</a>
 
 ### Intro
@@ -49,24 +49,30 @@ axios.defaults.headers.common['TOKEN'] = TOKEN
 axios.defaults.timeout = 2500
 
 // Add a request interceptor
-axios.interceptors.request.use((config) => {
-  // Do something before request is sent
-  return config
-}, (error) => {
-  // Do something with request error
-  return Promise.reject(error)
-})
+axios.interceptors.request.use(
+  (config) => {
+    // Do something before request is sent
+    return config
+  },
+  (error) => {
+    // Do something with request error
+    return Promise.reject(error)
+  }
+)
 
 // Add a response interceptor
-axios.interceptors.response.use((response) => {
-  // Any status code that lie within the range of 2xx cause this function to trigger
-  // Do something with response data
-  return response
-}, (error) => {
-  // Any status codes that falls outside the range of 2xx cause this function to trigger
-  // Do something with response error
-  return Promise.reject(error)
-})
+axios.interceptors.response.use(
+  (response) => {
+    // Any status code that lie within the range of 2xx cause this function to trigger
+    // Do something with response data
+    return response
+  },
+  (error) => {
+    // Any status codes that falls outside the range of 2xx cause this function to trigger
+    // Do something with response error
+    return Promise.reject(error)
+  }
+)
 ```
 
 ## Axle & Axios Request Functions
@@ -147,10 +153,10 @@ axle.post('/url', { name: 'foo' })
 
 ```js
 // axios
-axios.post('/url', qs.stringify({ name: 'foo' }), { 
-  headers: { 
-    'Content-Type': 'application/x-www-form-urlencoded'
-  }
+axios.post('/url', qs.stringify({ name: 'foo' }), {
+  headers: {
+    'Content-Type': 'application/x-www-form-urlencoded',
+  },
 })
 // axle
 axle.postUrlEncode('/url', { name: 'foo' })
@@ -164,10 +170,10 @@ const formData = new FormData()
 formData.append('name', 'foo')
 formData.append('file', new File())
 
-axios.post('/url', formData, { 
-  headers: { 
-    'Content-Type': 'multipart/form-data'
-  }
+axios.post('/url', formData, {
+  headers: {
+    'Content-Type': 'multipart/form-data',
+  },
 })
 // axle
 axle.postMultipart('/url', { name: 'foo', file: new File() })
@@ -197,61 +203,55 @@ 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'
-
-const axle = createAxle(/** @see https://axios-http.com **/)
-const useAxle = createUseAxle({
-  axle,
-  // Optional value: Default onTransform of the useAxle 
-  onTransform: response => response
-})
-
-const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
-  // Request initial value
-  value: [],
-  // Request method
-  method: 'get',
-  // Request url
-  url: '/user',
-  // Whether to send the request immediately, defaults false
-  immediate: true,
-  // The number of retries after a failed request, defaults 0
-  retry: 3,
-  // Whether the value needs to be reset before requesting, defaults false
-  resetValue: true,
-  // Request params, defaults {}
-  // When params is an object, it will be carried when sending the first request (immediate)
-  // When params is a function, it will be carried every time a request is sent.
-  params: { current: 1, pageSize: 10 },
-  // Axios config, see https://axios-http.com
-  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
-  }
-})
+  import { createAxle } from '@varlet/axle'
+  import { createUseAxle } from '@varlet/axle/use'
+
+  const axle = createAxle(/** @see https://axios-http.com **/)
+  const useAxle = createUseAxle({
+    axle,
+    // Optional value: Default onTransform of the useAxle
+    onTransform: (response) => response,
+  })
+
+  const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
+    // Request initial value
+    value: [],
+    // Request method
+    method: 'get',
+    // Request url
+    url: '/user',
+    // Whether to send the request immediately, defaults false
+    immediate: true,
+    // The number of retries after a failed request, defaults 0
+    retry: 3,
+    // Whether the value needs to be reset before requesting, defaults false
+    resetValue: true,
+    // Request params, defaults {}
+    // When params is an object, it will be carried when sending the first request (immediate)
+    // When params is a function, it will be carried every time a request is sent.
+    params: { current: 1, pageSize: 10 },
+    // Axios config, see https://axios-http.com
+    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>
@@ -271,43 +271,43 @@ 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'
-
-const axle = createAxle(/** @see https://axios-http.com **/)
-const useAxle = createUseAxle({ axle })
-
-const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
-  value: [],
-  method: 'get',
-  url: '/user',
-})
-
-const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
-  value: [],
-  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()
-}
+  import { createAxle } from '@varlet/axle'
+  import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+
+  const axle = createAxle(/** @see https://axios-http.com **/)
+  const useAxle = createUseAxle({ axle })
+
+  const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
+    value: [],
+    method: 'get',
+    url: '/user',
+  })
+
+  const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
+    value: [],
+    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()
+  }
 </script>
 
 <template>
@@ -317,7 +317,3 @@ function sendAllRequest() {
   <button @click="sendAllRequest">Send All Request</button>
 </template>
 ```
-
-
-
-

package/README.zh-CN.md

@@ -49,24 +49,30 @@ axios.defaults.headers.common['TOKEN'] = TOKEN
 axios.defaults.timeout = 2500
 
 // 添加请求前拦截器
-axios.interceptors.request.use((config) => {
-  // 请求前处理
-  return config
-}, (error) => {
-  // 请求错误处理
-  return Promise.reject(error)
-})
+axios.interceptors.request.use(
+  (config) => {
+    // 请求前处理
+    return config
+  },
+  (error) => {
+    // 请求错误处理
+    return Promise.reject(error)
+  }
+)
 
 // 添加请求后返回拦截器
-axios.interceptors.response.use((response) => {
-  // 任何位于 2xx 范围内的状态码都会导致该函数触发
-  // 对响应数据做一些事情
-  return response
-}, (error) => {
-  // 任何超出 2xx 范围的状态代码都会导致此函数触发
-  // 对响应错误做一些事情
-  return Promise.reject(error)
-})
+axios.interceptors.response.use(
+  (response) => {
+    // 任何位于 2xx 范围内的状态码都会导致该函数触发
+    // 对响应数据做一些事情
+    return response
+  },
+  (error) => {
+    // 任何超出 2xx 范围的状态代码都会导致此函数触发
+    // 对响应错误做一些事情
+    return Promise.reject(error)
+  }
+)
 ```
 
 ## Axle & Axios 请求函数
@@ -147,10 +153,10 @@ axle.post('/url', { name: 'foo' })
 
 ```js
 // axios
-axios.post('/url', qs.stringify({ name: 'foo' }), { 
-  headers: { 
-    'Content-Type': 'application/x-www-form-urlencoded'
-  }
+axios.post('/url', qs.stringify({ name: 'foo' }), {
+  headers: {
+    'Content-Type': 'application/x-www-form-urlencoded',
+  },
 })
 // axle
 axle.postUrlEncode('/url', { name: 'foo' })
@@ -164,10 +170,10 @@ const formData = new FormData()
 formData.append('name', 'foo')
 formData.append('file', new File())
 
-axios.post('/url', formData, { 
-  headers: { 
-    'Content-Type': 'multipart/form-data'
-  }
+axios.post('/url', formData, {
+  headers: {
+    'Content-Type': 'multipart/form-data',
+  },
 })
 // axle
 axle.postMultipart('/url', { name: 'foo', file: new File() })
@@ -197,61 +203,55 @@ Axle 提供了 Vue Composition API 风格的用法，封装了请求的 `加载
 
 ```html
 <script setup>
-import { createAxle } from '@varlet/axle'
-import { createUseAxle } from '@varlet/axle/use'
-
-const axle = createAxle(/** @see https://axios-http.com **/)
-const useAxle = createUseAxle({
-  axle,
-  // 可选项: useAxle 的默认 onTransform
-  onTransform: response => response
-})
-
-const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
-  // 请求初始化数据
-  value: [],
-  // 请求方法
-  method: 'get',
-  // 请求地址
-  url: '/user',
-  // 是否立即发送请求, 默认值: false
-  immediate: true,
-  // 错误重试次数, 默认值: 0
-  retry: 3,
-  // 请求前是否需要重置 value, 默认值: false
-  resetValue: true,
-  // 请求参数, 默认值: {}
-  // 当参数是一个对象时，发送第一个请求（immediate）时将携带它
-  // 当参数是一个函数时，每次发送请求时都会携带它。
-  params: { current: 1, pageSize: 10 },
-  // Axios 配置, see https://axios-http.com
-  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) {
-    // 处理请求结束逻辑，无论成功失败都会触发。
-  }
-})
+  import { createAxle } from '@varlet/axle'
+  import { createUseAxle } from '@varlet/axle/use'
+
+  const axle = createAxle(/** @see https://axios-http.com **/)
+  const useAxle = createUseAxle({
+    axle,
+    // 可选项: useAxle 的默认 onTransform
+    onTransform: (response) => response,
+  })
+
+  const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
+    // 请求初始化数据
+    value: [],
+    // 请求方法
+    method: 'get',
+    // 请求地址
+    url: '/user',
+    // 是否立即发送请求, 默认值: false
+    immediate: true,
+    // 错误重试次数, 默认值: 0
+    retry: 3,
+    // 请求前是否需要重置 value, 默认值: false
+    resetValue: true,
+    // 请求参数, 默认值: {}
+    // 当参数是一个对象时，发送第一个请求（immediate）时将携带它
+    // 当参数是一个函数时，每次发送请求时都会携带它。
+    params: { current: 1, pageSize: 10 },
+    // Axios 配置, see https://axios-http.com
+    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>
@@ -271,43 +271,43 @@ Axle 提供了一些并行请求处理工具，请参考以下示例。
 
 ```html
 <script setup>
-import { createAxle } from '@varlet/axle'
-import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
-
-const axle = createAxle(/** @see https://axios-http.com **/)
-const useAxle = createUseAxle({ axle })
-
-const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
-  value: [],
-  method: 'get',
-  url: '/user',
-})
-
-const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
-  value: [],
-  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()
-}
+  import { createAxle } from '@varlet/axle'
+  import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+
+  const axle = createAxle(/** @see https://axios-http.com **/)
+  const useAxle = createUseAxle({ axle })
+
+  const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
+    value: [],
+    method: 'get',
+    url: '/user',
+  })
+
+  const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
+    value: [],
+    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()
+  }
 </script>
 
 <template>
@@ -317,7 +317,3 @@ function sendAllRequest() {
   <button @click="sendAllRequest">发送全部请求</button>
 </template>
 ```
-
-
-
-

package/es/use.d.ts

@@ -1,21 +1,83 @@
-import { type Ref } from 'vue';
-import { type AxleRequestConfig, type RunnerMethod, type AxleInstance } from './instance.js';
-export interface RunOptions<P> {
+import { Ref, WritableComputedRef } from 'vue';
+import { AxiosRequestConfig, HeadersDefaults, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig, AxiosInterceptorOptions } from 'axios';
+
+type AxleRequestConfig = AxiosRequestConfig & {
+    exceptionMessage?: any;
+};
+type FetchRunner = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
+type ModifyRunner = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
+type RunnerMethod = keyof Omit<AxleInstance, 'axios' | 'getHeaders' | 'setHeader' | 'removeHeader' | 'useRequestInterceptor' | 'useResponseInterceptor'>;
+interface Interceptor<V> {
+    onFulfilled?: ((value: V) => any) | null;
+    onRejected?: ((error: any) => any) | null;
+    options?: AxiosInterceptorOptions;
+}
+type RequestInterceptor = Interceptor<InternalAxiosRequestConfig>;
+type ResponseInterceptor<V = AxiosResponse<any, any>> = Interceptor<V>;
+type AxleInstance = {
+    get: FetchRunner;
+    getBlob: FetchRunner;
+    getDocument: FetchRunner;
+    getText: FetchRunner;
+    getArrayBuffer: FetchRunner;
+    getStream: FetchRunner;
+    head: FetchRunner;
+    headBlob: FetchRunner;
+    headDocument: FetchRunner;
+    headText: FetchRunner;
+    headArrayBuffer: FetchRunner;
+    headStream: FetchRunner;
+    options: FetchRunner;
+    optionsBlob: FetchRunner;
+    optionsDocument: FetchRunner;
+    optionsText: FetchRunner;
+    optionsArrayBuffer: FetchRunner;
+    optionsStream: FetchRunner;
+    delete: FetchRunner;
+    deleteBlob: FetchRunner;
+    deleteDocument: FetchRunner;
+    deleteText: FetchRunner;
+    deleteArrayBuffer: FetchRunner;
+    deleteStream: FetchRunner;
+    post: ModifyRunner;
+    postUrlEncode: ModifyRunner;
+    postMultipart: ModifyRunner;
+    put: ModifyRunner;
+    putUrlEncode: ModifyRunner;
+    putMultipart: ModifyRunner;
+    patch: ModifyRunner;
+    patchUrlEncode: ModifyRunner;
+    patchMultipart: ModifyRunner;
+    getHeaders(): HeadersDefaults['common'];
+    setHeader(key: string, value: string): void;
+    removeHeader(key: string | string[]): void;
+    useRequestInterceptor(...interceptors: RequestInterceptor[]): void;
+    useResponseInterceptor(...interceptors: ResponseInterceptor[]): void;
+    axios: AxiosInstance;
+};
+
+declare function useValues<T extends Ref<any>[]>(...valueCollection: T): WritableComputedRef<T[number]['value'][]>;
+
+declare function useHasLoading(...loadings: Ref<boolean>[]): Ref<boolean>;
+
+declare function useAverageProgress(...progressCollection: Ref<number>[]): Ref<number>;
+
+interface RunOptions<P> {
     url?: string;
     params?: P;
     config?: AxleRequestConfig;
     resetValue?: boolean;
     _retryCount?: number;
 }
-export type Run<R, P> = (options?: RunOptions<P>) => Promise<R>;
-export interface UseAxleRefs<V> {
+type Run<R, P> = (options?: RunOptions<P>) => Promise<R>;
+interface UseAxleRefs<V> {
     value: Ref<V>;
     loading: Ref<boolean>;
     error: Ref<Error | undefined>;
     uploadProgress: Ref<number>;
     downloadProgress: Ref<number>;
 }
-export interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
+interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
     url: string;
     method: RunnerMethod;
     value?: V;
@@ -30,7 +92,7 @@ export interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
     onSuccess?(response: R, refs: UseAxleRefs<V>): void;
     onError?(error: Error, refs: UseAxleRefs<V>): void;
 }
-export type UseAxleInstance<V, R, P> = [
+type UseAxleInstance<V, R, P> = [
     value: Ref<V>,
     run: Run<R, P>,
     extra: {
@@ -41,11 +103,10 @@ export type UseAxleInstance<V, R, P> = [
         abort(): void;
     }
 ];
-export interface CreateUseAxleOptions {
+interface CreateUseAxleOptions {
     axle: AxleInstance;
     onTransform?(response: any, refs: any): any;
 }
-export declare function createUseAxle(options: CreateUseAxleOptions): <V = any, R = any, P = Record<string, any>>(options: UseAxleOptions<V, R, P>) => UseAxleInstance<V, R, P>;
-export * from './useValues.js';
-export * from './useHasLoading.js';
-export * from './useAverageProgress.js';
+declare function createUseAxle(options: CreateUseAxleOptions): <V = any, R = any, P = Record<string, any>>(options: UseAxleOptions<V, R, P>) => UseAxleInstance<V, R, P>;
+
+export { CreateUseAxleOptions, Run, RunOptions, UseAxleInstance, UseAxleOptions, UseAxleRefs, createUseAxle, useAverageProgress, useHasLoading, useValues };