@varlet/axle 0.0.26 → 0.1.0

package/README.md

@@ -1,7 +1,5 @@
 <span>English</span> | 
-<a href="https://github.com/varletjs/axle/blob/dev/README.zh-CN.md">中文</a>
-
----
+<a href="https://github.com/varletjs/axle/blob/main/README.zh-CN.md">中文</a>
 
 ### Intro
 
@@ -37,71 +35,6 @@ axle.get('/url', { current: 1, pageSize: 10 }, { headers: {} })
 axle.post('/url', { name: 'Axle' }, { headers: {} })
 ```
 
-#### Vue Composition API
-
-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`, `error retry`, `lifecycle`, etc., And inherit all the configuration of `axios`.
-
-```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(/** Unstable **/)
-
-const [users, getUsers, { loading, error, uploadProgress, downloadProgress }] = useAxle({
-  // Request initial data
-  data: [],
-  // Request runner
-  runner: axle.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,
-  // Request params, defaults {}
-  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
-    return response.data
-  },
-  onSuccess(response, refs) {
-    // Do request success
-  },
-  onError(error, refs) {
-    // Do request error
-  },
-  onAfter(refs) {
-    // Do request after
-  }
-})
-</script>
-
-<template>
-  <span>{{ users }}</span>
-  <span>{{ loading }}</span>
-  <span>{{ error }}</span>
-  <span>{{ uploadProgress }}</span>
-  <span>{{ downloadProgress }}</span>
-  <button @click="getUsers">Send Request</button>
-</template>
-```
-
 ### Config
 
 Axle fully supports all configuration abilities of axios.
@@ -240,12 +173,14 @@ axios.post('/url', formData, {
 axle.postMultipart('/url', { name: 'foo', file: new File() })
 ```
 
-### Utils
+## Utils
 
 #### Notify the browser to download the file
 
 ```js
-axle.download(await axle.getBlob('/url', { id: 1 }), 'filename')
+import { download } from '@varlet/axle'
+
+download(await axle.getBlob('/url', { id: 1 }), 'filename')
 ```
 
 #### Common Header Operate
@@ -256,6 +191,125 @@ axle.setHeader('TOKEN', TOKEN)
 axle.removeHeader('TOKEN')
 ```
 
+## Vue Composition API
+
+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`, `error retry`, `lifecycle`, etc., And inherit all the configuration of `axios`.
+
+```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()
+
+const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
+  // Request initial data
+  data: [],
+  // Request runner
+  runner: axle.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,
+  // Request params, defaults {}
+  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>
+  <span>{{ users }}</span>
+  <span>{{ loading }}</span>
+  <span>{{ error }}</span>
+  <span>{{ uploadProgress }}</span>
+  <span>{{ downloadProgress }}</span>
+  <button @click="getUsers">Send Request</button>
+  <button @click="abort">Abort Request</button>
+</template>
+```
+
+### Parallel Utils
+
+Axle provides some parallel request processing tools, please refer to the following examples.
+
+```html
+<script setup>
+import { createAxle } from '@varlet/axle'
+import { createUseAxle, useAllData, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+
+const axle = createAxle(/** @see https://axios-http.com **/)
+const useAxle = createUseAxle()
+
+const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
+  data: [],
+  runner: axle.get,
+  url: '/user',
+})
+
+const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
+  data: [],
+  runner: axle.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 = useAllData(users, roles)
+
+function sendAllRequest() {
+  // parallel
+  getUsers()
+  getRoles()
+}
+</script>
+
+<template>
+  <span>{{ usersRoles }}</span>
+  <span>{{ loading }}</span>
+  <span>{{ downloadProgress }}</span>
+  <button @click="sendAllRequest">Send All Request</button>
+</template>
+```
+
 
 
 

package/README.zh-CN.md

@@ -1,8 +1,6 @@
-<a href="https://github.com/varletjs/axle/blob/dev/README.md">English</a> |
+<a href="https://github.com/varletjs/axle/blob/main/README.md">English</a> |
 <span>中文</span>
 
----
-
 ### 介绍
 
 基于 [axios](https://axios-http.com/) 的渐进式请求工具。 它不会破坏 `axios` 原有的能力，帮助您更轻松地处理请求。
@@ -37,71 +35,6 @@ axle.get('/url', { current: 1, pageSize: 10 }, { headers: {} })
 axle.post('/url', { name: 'Axle' }, { headers: {} })
 ```
 
-#### Vue 组合式 API
-
-Axle 提供了 Vue Composition API 风格的用法，封装了请求的 `加载状态`, `错误状态`, `请求的上下行进度`，`返回数据`，`错误重试`，`生命周期` 等等，并继承了 `axios` 的所有配置。
-
-```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()
-
-const [users, getUsers, { loading, error, uploadProgress, downloadProgress }] = useAxle({
-  // 请求初始化数据
-  data: [],
-  // 请求函数
-  runner: axle.get,
-  // 请求地址
-  url: '/user',
-  // 是否立即发送请求, 默认值: false
-  immediate: true,
-  // 错误重试次数, 默认值: 0
-  retry: 3,
-  // 请求参数, 默认值: {}
-  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>
-  <span>{{ users }}</span>
-  <span>{{ loading }}</span>
-  <span>{{ error }}</span>
-  <span>{{ uploadProgress }}</span>
-  <span>{{ downloadProgress }}</span>
-  <button @click="getUsers">发送请求</button>
-</template>
-```
-
 ### 配置
 
 `Axle` 完全支持 `axios` 的所有配置能力。
@@ -240,12 +173,14 @@ axios.post('/url', formData, {
 axle.postMultipart('/url', { name: 'foo', file: new File() })
 ```
 
-### 实用工具
+## 实用工具
 
 #### 通知浏览器下载文件
 
 ```js
-axle.download(await axle.getBlob('/url', { id: 1 }), 'filename')
+import { download } from '@varlet/axle'
+
+download(await axle.getBlob('/url', { id: 1 }), 'filename')
 ```
 
 #### 公共 header 操作
@@ -256,6 +191,125 @@ axle.setHeader('TOKEN', TOKEN)
 axle.removeHeader('TOKEN')
 ```
 
+## Vue 组合式 API
+
+Axle 提供了 Vue Composition API 风格的用法，封装了请求的 `加载状态`, `错误状态`, `请求的上下行进度`，`返回数据`，`错误重试`，`生命周期` 等等，并继承了 `axios` 的所有配置。
+
+```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()
+
+const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
+  // 请求初始化数据
+  data: [],
+  // 请求函数
+  runner: axle.get,
+  // 请求地址
+  url: '/user',
+  // 是否立即发送请求, 默认值: false
+  immediate: true,
+  // 错误重试次数, 默认值: 0
+  retry: 3,
+  // 请求参数, 默认值: {}
+  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>
+  <span>{{ users }}</span>
+  <span>{{ loading }}</span>
+  <span>{{ error }}</span>
+  <span>{{ uploadProgress }}</span>
+  <span>{{ downloadProgress }}</span>
+  <button @click="getUsers">发送请求</button>
+  <button @click="abort">中断请求</button>
+</template>
+```
+
+### 并行请求实用工具
+
+Axle 提供了一些并行请求处理工具，请参考以下示例。
+
+```html
+<script setup>
+import { createAxle } from '@varlet/axle'
+import { createUseAxle, useAllData, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+
+const axle = createAxle(/** @see https://axios-http.com **/)
+const useAxle = createUseAxle()
+
+const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
+  data: [],
+  runner: axle.get,
+  url: '/user',
+})
+
+const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
+  data: [],
+  runner: axle.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 = useAllData(users, roles)
+
+function sendAllRequest() {
+  // parallel
+  getUsers()
+  getRoles()
+}
+</script>
+
+<template>
+  <span>{{ usersRoles }}</span>
+  <span>{{ loading }}</span>
+  <span>{{ downloadProgress }}</span>
+  <button @click="sendAllRequest">发送全部请求</button>
+</template>
+```
+
 
 
 

package/es/instance.d.ts

@@ -40,7 +40,6 @@ export type AxleInstance = {
     patch: ModifyHelper;
     patchUrlEncode: ModifyHelper;
     patchMultipart: ModifyHelper;
-    download(blob: string | Blob, filename: string): void;
     getHeaders(): HeadersDefaults['common'];
     setHeader(key: string, value: string): void;
     removeHeader(key: string | string[]): void;

package/es/instance.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import qs from 'qs';
+import { inBrowser } from '@varlet/shared';
 export function createFetchHelper(service, method, responseType) {
     return function (url, params, config) {
         return service[method](url, Object.assign({ params,
@@ -22,6 +23,9 @@ export function createModifyHelper(service, method, contentType) {
     };
 }
 export function download(url, filename) {
+    if (!inBrowser()) {
+        return;
+    }
     const a = document.createElement('a');
     a.download = filename;
     a.style.display = 'none';
@@ -81,7 +85,6 @@ export function createAxle(config = {}) {
         patch: createModifyHelper(service, 'patch', 'application/json'),
         patchUrlEncode: createModifyHelper(service, 'patch', 'application/x-www-form-urlencoded'),
         patchMultipart: createModifyHelper(service, 'patch', 'multipart/form-data'),
-        download,
         getHeaders,
         setHeader,
         removeHeader,

package/es/use.d.ts

@@ -43,3 +43,6 @@ export interface CreateUseAxleOptions {
     onTransform?(response: any, refs: any): any;
 }
 export declare function createUseAxle(options?: CreateUseAxleOptions): <D = any, R = any, P = Record<string, any>>(options: UseAxleOptions<D, R, P>) => UseAxleInstance<D, R, P>;
+export * from './useAllData.js';
+export * from './useHasLoading.js';
+export * from './useAverageProgress.js';

package/es/use.js

@@ -16,7 +16,7 @@ export function createUseAxle(options = {}) {
             loading,
             error,
             downloadProgress,
-            uploadProgress
+            uploadProgress,
         };
         let controller = new AbortController();
         const run = async (options = {}) => {
@@ -81,3 +81,6 @@ export function createUseAxle(options = {}) {
     };
     return useAxle;
 }
+export * from './useAllData.js';
+export * from './useHasLoading.js';
+export * from './useAverageProgress.js';

package/es/useAllData.d.ts

@@ -0,0 +1 @@
+export declare function useAllData<DC extends any[]>(...dataCollection: DC): import("vue").WritableComputedRef<any[]>;

package/es/useAllData.js

@@ -0,0 +1,11 @@
+import { computed } from 'vue';
+export function useAllData(...dataCollection) {
+    return computed({
+        get: () => dataCollection.map((data) => data.value),
+        set(values) {
+            dataCollection.forEach((data, index) => {
+                data.value = values[index];
+            });
+        },
+    });
+}

package/es/useAverageProgress.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from "vue";
+export declare function useAverageProgress(...progressCollection: Ref<number>[]): Ref<number>;

package/es/useAverageProgress.js

@@ -0,0 +1,9 @@
+import { ref, watch } from "vue";
+export function useAverageProgress(...progressCollection) {
+    const averageProgress = ref(0);
+    watch(() => progressCollection.map(progress => progress.value), (newProgressCollection) => {
+        const total = newProgressCollection.reduce((total, progress) => total + progress, 0);
+        averageProgress.value = total / progressCollection.length;
+    }, { immediate: true });
+    return averageProgress;
+}

package/es/useHasLoading.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from "vue";
+export declare function useHasLoading(...loadings: Ref<boolean>[]): Ref<boolean>;

package/es/useHasLoading.js

@@ -0,0 +1,8 @@
+import { ref, watch } from "vue";
+export function useHasLoading(...loadings) {
+    const hasLoading = ref(false);
+    watch(() => loadings.map(loading => loading.value), (newLoadings) => {
+        hasLoading.value = newLoadings.some(Boolean);
+    }, { immediate: true });
+    return hasLoading;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/axle",
-  "version": "0.0.26",
+  "version": "0.1.0",
   "description": "A useful axios helper",
   "type": "module",
   "main": "es/index.js",