@varlet/axle 0.1.2 → 0.2.0-alpha.1694529745774

package/README.md

@@ -202,15 +202,16 @@ 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 data
-  data: [],
-  // Request runner
-  runner: axle.get,
+  // Request initial value
+  value: [],
+  // Request method
+  method: 'get',
   // Request url
   url: '/user',
   // Whether to send the request immediately, defaults false
@@ -267,20 +268,20 @@ Axle provides some parallel request processing tools, please refer to the follow
 ```html
 <script setup>
 import { createAxle } from '@varlet/axle'
-import { createUseAxle, useAllData, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
 
 const axle = createAxle(/** @see https://axios-http.com **/)
-const useAxle = createUseAxle()
+const useAxle = createUseAxle({ axle })
 
 const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
-  data: [],
-  runner: axle.get,
+  value: [],
+  method: 'get',
   url: '/user',
 })
 
 const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
-  data: [],
-  runner: axle.get,
+  value: [],
+  method: 'get',
   url: '/role',
 })
 
@@ -296,7 +297,7 @@ const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownload
 //   Ref<[{ name: 'foo' }, { name: 'bar' }]>, 
 //   Ref<[{ role: 'admin' }, { role: 'user' }]>
 // ]
-const usersRoles = useAllData(users, roles)
+const usersRoles = useValues(users, roles)
 
 function sendAllRequest() {
   // parallel

package/README.zh-CN.md

@@ -202,15 +202,16 @@ 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({
   // 请求初始化数据
-  data: [],
-  // 请求函数
-  runner: axle.get,
+  value: [],
+  // 请求方法
+  method: 'get',
   // 请求地址
   url: '/user',
   // 是否立即发送请求, 默认值: false
@@ -267,20 +268,20 @@ Axle 提供了一些并行请求处理工具，请参考以下示例。
 ```html
 <script setup>
 import { createAxle } from '@varlet/axle'
-import { createUseAxle, useAllData, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
 
 const axle = createAxle(/** @see https://axios-http.com **/)
-const useAxle = createUseAxle()
+const useAxle = createUseAxle({ axle })
 
 const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
   data: [],
-  runner: axle.get,
+  method: 'get',
   url: '/user',
 })
 
 const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
   data: [],
-  runner: axle.get,
+  method: 'get',
   url: '/role',
 })
 
@@ -296,7 +297,7 @@ const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownload
 //   Ref<[{ name: 'foo' }, { name: 'bar' }]>, 
 //   Ref<[{ role: 'admin' }, { role: 'user' }]>
 // ]
-const usersRoles = useAllData(users, roles)
+const usersRoles = useValues(users, roles)
 
 function sendAllRequest() {
   // parallel

package/es/instance.d.ts

@@ -2,50 +2,51 @@ import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, HeadersDefaults,
 export type AxleRequestConfig = AxiosRequestConfig & {
     exceptionMessage?: any;
 };
-export type FetchHelper = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
-export type ModifyHelper = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
-export type FetchMethods = 'get' | 'delete' | 'options' | 'head';
-export type ModifyMethods = 'post' | 'put' | 'patch';
+export type FetchRunner = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
+export type ModifyRunner = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
+export type FetchMethod = 'get' | 'delete' | 'options' | 'head';
+export type ModifyMethod = 'post' | 'put' | 'patch';
+export type RunnerMethod = keyof Omit<AxleInstance, 'axios' | 'getHeaders' | 'setHeader' | 'removeHeader'>;
 export type AxleInstance = {
-    get: FetchHelper;
-    getBlob: FetchHelper;
-    getDocument: FetchHelper;
-    getText: FetchHelper;
-    getArrayBuffer: FetchHelper;
-    getStream: FetchHelper;
-    head: FetchHelper;
-    headBlob: FetchHelper;
-    headDocument: FetchHelper;
-    headText: FetchHelper;
-    headArrayBuffer: FetchHelper;
-    headStream: FetchHelper;
-    options: FetchHelper;
-    optionsBlob: FetchHelper;
-    optionsDocument: FetchHelper;
-    optionsText: FetchHelper;
-    optionsArrayBuffer: FetchHelper;
-    optionsStream: FetchHelper;
-    delete: FetchHelper;
-    deleteBlob: FetchHelper;
-    deleteDocument: FetchHelper;
-    deleteText: FetchHelper;
-    deleteArrayBuffer: FetchHelper;
-    deleteStream: FetchHelper;
-    post: ModifyHelper;
-    postUrlEncode: ModifyHelper;
-    postMultipart: ModifyHelper;
-    put: ModifyHelper;
-    putUrlEncode: ModifyHelper;
-    putMultipart: ModifyHelper;
-    patch: ModifyHelper;
-    patchUrlEncode: ModifyHelper;
-    patchMultipart: ModifyHelper;
+    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;
     axios: AxiosInstance;
 };
-export declare function createFetchHelper(service: AxiosInstance, method: FetchMethods, responseType: ResponseType): <T, R = AxiosResponse<T, any>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
-export declare function createModifyHelper(service: AxiosInstance, method: ModifyMethods, contentType: 'application/json' | 'multipart/form-data' | 'application/x-www-form-urlencoded'): <T, R = AxiosResponse<T, any>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
+export declare function createFetchRunner(service: AxiosInstance, method: FetchMethod, responseType: ResponseType): <T, R = AxiosResponse<T, any>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
+export declare function createModifyRunner(service: AxiosInstance, method: ModifyMethod, contentType: 'application/json' | 'multipart/form-data' | 'application/x-www-form-urlencoded'): <T, R = AxiosResponse<T, any>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
 export declare function download(url: string | Blob, filename: string): void;
 export declare function createAxle(config?: AxiosRequestConfig): AxleInstance;

package/es/instance.js

@@ -1,13 +1,13 @@
 import axios from 'axios';
 import qs from 'qs';
 import { inBrowser } from '@varlet/shared';
-export function createFetchHelper(service, method, responseType) {
+export function createFetchRunner(service, method, responseType) {
     return function (url, params, config) {
         return service[method](url, Object.assign({ params,
             responseType }, config));
     };
 }
-export function createModifyHelper(service, method, contentType) {
+export function createModifyRunner(service, method, contentType) {
     return function (url, params, config) {
         if (contentType === 'application/x-www-form-urlencoded') {
             params = qs.stringify(params);
@@ -52,39 +52,39 @@ export function createAxle(config = {}) {
         key.forEach((k) => Reflect.deleteProperty(service.defaults.headers['common'], k));
     }
     return {
-        get: createFetchHelper(service, 'get', 'json'),
-        getBlob: createFetchHelper(service, 'get', 'blob'),
-        getDocument: createFetchHelper(service, 'get', 'document'),
-        getArrayBuffer: createFetchHelper(service, 'get', 'arraybuffer'),
-        getText: createFetchHelper(service, 'get', 'text'),
-        getStream: createFetchHelper(service, 'get', 'stream'),
-        head: createFetchHelper(service, 'head', 'json'),
-        headBlob: createFetchHelper(service, 'head', 'blob'),
-        headDocument: createFetchHelper(service, 'head', 'document'),
-        headArrayBuffer: createFetchHelper(service, 'head', 'arraybuffer'),
-        headText: createFetchHelper(service, 'head', 'text'),
-        headStream: createFetchHelper(service, 'head', 'stream'),
-        options: createFetchHelper(service, 'options', 'json'),
-        optionsBlob: createFetchHelper(service, 'options', 'blob'),
-        optionsDocument: createFetchHelper(service, 'options', 'document'),
-        optionsArrayBuffer: createFetchHelper(service, 'options', 'arraybuffer'),
-        optionsText: createFetchHelper(service, 'options', 'text'),
-        optionsStream: createFetchHelper(service, 'options', 'stream'),
-        delete: createFetchHelper(service, 'delete', 'json'),
-        deleteBlob: createFetchHelper(service, 'delete', 'blob'),
-        deleteDocument: createFetchHelper(service, 'delete', 'document'),
-        deleteArrayBuffer: createFetchHelper(service, 'delete', 'arraybuffer'),
-        deleteText: createFetchHelper(service, 'delete', 'text'),
-        deleteStream: createFetchHelper(service, 'delete', 'stream'),
-        post: createModifyHelper(service, 'post', 'application/json'),
-        postUrlEncode: createModifyHelper(service, 'post', 'application/x-www-form-urlencoded'),
-        postMultipart: createModifyHelper(service, 'post', 'multipart/form-data'),
-        put: createModifyHelper(service, 'put', 'application/json'),
-        putUrlEncode: createModifyHelper(service, 'put', 'application/x-www-form-urlencoded'),
-        putMultipart: createModifyHelper(service, 'put', 'multipart/form-data'),
-        patch: createModifyHelper(service, 'patch', 'application/json'),
-        patchUrlEncode: createModifyHelper(service, 'patch', 'application/x-www-form-urlencoded'),
-        patchMultipart: createModifyHelper(service, 'patch', 'multipart/form-data'),
+        get: createFetchRunner(service, 'get', 'json'),
+        getBlob: createFetchRunner(service, 'get', 'blob'),
+        getDocument: createFetchRunner(service, 'get', 'document'),
+        getArrayBuffer: createFetchRunner(service, 'get', 'arraybuffer'),
+        getText: createFetchRunner(service, 'get', 'text'),
+        getStream: createFetchRunner(service, 'get', 'stream'),
+        head: createFetchRunner(service, 'head', 'json'),
+        headBlob: createFetchRunner(service, 'head', 'blob'),
+        headDocument: createFetchRunner(service, 'head', 'document'),
+        headArrayBuffer: createFetchRunner(service, 'head', 'arraybuffer'),
+        headText: createFetchRunner(service, 'head', 'text'),
+        headStream: createFetchRunner(service, 'head', 'stream'),
+        options: createFetchRunner(service, 'options', 'json'),
+        optionsBlob: createFetchRunner(service, 'options', 'blob'),
+        optionsDocument: createFetchRunner(service, 'options', 'document'),
+        optionsArrayBuffer: createFetchRunner(service, 'options', 'arraybuffer'),
+        optionsText: createFetchRunner(service, 'options', 'text'),
+        optionsStream: createFetchRunner(service, 'options', 'stream'),
+        delete: createFetchRunner(service, 'delete', 'json'),
+        deleteBlob: createFetchRunner(service, 'delete', 'blob'),
+        deleteDocument: createFetchRunner(service, 'delete', 'document'),
+        deleteArrayBuffer: createFetchRunner(service, 'delete', 'arraybuffer'),
+        deleteText: createFetchRunner(service, 'delete', 'text'),
+        deleteStream: createFetchRunner(service, 'delete', 'stream'),
+        post: createModifyRunner(service, 'post', 'application/json'),
+        postUrlEncode: createModifyRunner(service, 'post', 'application/x-www-form-urlencoded'),
+        postMultipart: createModifyRunner(service, 'post', 'multipart/form-data'),
+        put: createModifyRunner(service, 'put', 'application/json'),
+        putUrlEncode: createModifyRunner(service, 'put', 'application/x-www-form-urlencoded'),
+        putMultipart: createModifyRunner(service, 'put', 'multipart/form-data'),
+        patch: createModifyRunner(service, 'patch', 'application/json'),
+        patchUrlEncode: createModifyRunner(service, 'patch', 'application/x-www-form-urlencoded'),
+        patchMultipart: createModifyRunner(service, 'patch', 'multipart/form-data'),
         getHeaders,
         setHeader,
         removeHeader,

package/es/use.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import { type AxleRequestConfig, createFetchHelper, createModifyHelper } from './instance.js';
+import { type AxleRequestConfig, type RunnerMethod, type AxleInstance } from './instance.js';
 export interface RunOptions<P> {
     url?: string;
     params?: P;
@@ -7,29 +7,29 @@ export interface RunOptions<P> {
     _retryCount?: number;
 }
 export type Run<R, P> = (options?: RunOptions<P>) => Promise<R>;
-export interface UseAxleRefs<D> {
-    data: Ref<D>;
+export interface UseAxleRefs<V> {
+    value: Ref<V>;
     loading: Ref<boolean>;
     error: Ref<Error | undefined>;
     uploadProgress: Ref<number>;
     downloadProgress: Ref<number>;
 }
-export interface UseAxleOptions<D = any, R = any, P = Record<string, any>> {
+export interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
     url: string;
-    runner: ReturnType<typeof createFetchHelper> | ReturnType<typeof createModifyHelper>;
-    data: D;
+    method: RunnerMethod;
+    value?: V;
     params?: P;
     retry?: number;
     config?: AxleRequestConfig;
     immediate?: boolean;
-    onBefore?(refs: UseAxleRefs<D>): void;
-    onAfter?(refs: UseAxleRefs<D>): void;
-    onTransform?(response: R, refs: UseAxleRefs<D>): D;
-    onSuccess?(response: R, refs: UseAxleRefs<D>): void;
-    onError?(error: Error, refs: UseAxleRefs<D>): void;
+    onBefore?(refs: UseAxleRefs<V>): void;
+    onAfter?(refs: UseAxleRefs<V>): void;
+    onTransform?(response: R, refs: UseAxleRefs<V>): V;
+    onSuccess?(response: R, refs: UseAxleRefs<V>): void;
+    onError?(error: Error, refs: UseAxleRefs<V>): void;
 }
-export type UseAxleInstance<D, R, P> = [
-    data: Ref<D>,
+export type UseAxleInstance<V, R, P> = [
+    value: Ref<V>,
     run: Run<R, P>,
     extra: {
         uploadProgress: Ref<number>;
@@ -40,9 +40,10 @@ export type UseAxleInstance<D, R, P> = [
     }
 ];
 export interface CreateUseAxleOptions {
+    axle: AxleInstance;
     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 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';

package/es/use.js

@@ -1,18 +1,18 @@
 import { ref } from 'vue';
-export function createUseAxle(options = {}) {
-    const { onTransform: defaultOnTransform } = options;
+export function createUseAxle(options) {
+    const { axle, onTransform: defaultOnTransform } = options;
     const useAxle = (options) => {
         var _a;
-        const { url, runner, immediate, data: initialData, params: initialParams, config: initialConfig, retry = 0, onBefore = () => { }, onAfter = () => { }, onTransform = (_a = defaultOnTransform) !== null && _a !== void 0 ? _a : ((response) => response), onSuccess = () => { }, onError = () => { }, } = options;
+        const { url, method, immediate, value: initialValue, params: initialParams, config: initialConfig, retry = 0, onBefore = () => { }, onAfter = () => { }, onTransform = (_a = defaultOnTransform) !== null && _a !== void 0 ? _a : ((response) => response), onSuccess = () => { }, onError = () => { }, } = options;
         const initialUrl = url;
-        const data = ref(initialData);
+        const value = ref(initialValue);
         const loading = ref(false);
         const error = ref();
         const downloadProgress = ref(0);
         const uploadProgress = ref(0);
         const shouldRetry = retry > 0;
         const refs = {
-            data,
+            value,
             loading,
             error,
             downloadProgress,
@@ -30,7 +30,7 @@ export function createUseAxle(options = {}) {
             onBefore(refs);
             loading.value = true;
             try {
-                const response = await runner(url, options.params, Object.assign({ signal: controller.signal, onUploadProgress(event) {
+                const response = await axle[method](url, options.params, Object.assign({ signal: controller.signal, onUploadProgress(event) {
                         var _a;
                         uploadProgress.value = (_a = event.progress) !== null && _a !== void 0 ? _a : 0;
                     },
@@ -38,7 +38,7 @@ export function createUseAxle(options = {}) {
                         var _a;
                         downloadProgress.value = (_a = event.progress) !== null && _a !== void 0 ? _a : 0;
                     } }, options.config));
-                data.value = onTransform(response, refs);
+                value.value = onTransform(response, refs);
                 error.value = undefined;
                 onSuccess(response, refs);
                 loading.value = false;
@@ -68,7 +68,7 @@ export function createUseAxle(options = {}) {
             });
         }
         return [
-            data,
+            value,
             run,
             {
                 loading,
@@ -81,6 +81,6 @@ export function createUseAxle(options = {}) {
     };
     return useAxle;
 }
-export * from './useAllData.js';
+export * from './useValues.js';
 export * from './useHasLoading.js';
 export * from './useAverageProgress.js';

package/es/{useAllData.d.ts → useValues.d.ts}

@@ -1,2 +1,2 @@
 import { type Ref, type WritableComputedRef } from 'vue';
-export declare function useAllData<T extends Ref<any>[]>(...dataCollection: T): WritableComputedRef<T[number]['value'][]>;
+export declare function useValues<T extends Ref<any>[]>(...valueCollection: T): WritableComputedRef<T[number]['value'][]>;

package/es/useValues.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/axle",
-  "version": "0.1.2",
+  "version": "0.2.0-alpha.1694529745774",
   "description": "Progressive request tool based on axios",
   "type": "module",
   "main": "es/index.js",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@types/qs": "^6.9.7",
-    "@varlet/cli": "^2.13.1",
+    "@varlet/cli": "^2.15.0",
     "rimraf": "^5.0.1",
     "typescript": "^5.1.5",
     "vue": "3.3.4"

package/es/useAllData.js

@@ -1,11 +0,0 @@
-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];
-            });
-        },
-    });
-}