@varlet/axle 0.0.3 → 0.0.4

package/README.md

@@ -7,139 +7,62 @@
 
 ### Quickstart
 
+#### Install
+
 ```shell
-# use npm or yarn or pnpm
+# Install with npm, yarn or pnpm
 
 # npm
 npm i @varlet/axle -S
 
-# yarn
+#yarn
 yarn add @varlet/axle
 
-# pnpm
+#pnpm
 pnpm add @varlet/axle
 ```
 
-### Function Signature
-
-```typescript
-// 'get' | 'head' | 'options' | 'delete'
-export type FetchHelper = <T = any, R = AxiosResponse<T>>(
-  url: string,
-  params?: any,
-  config?: AxiosRequestConfig
-) => Promise<R>
-// 'post' | 'put' | 'patch'
-export type ModifyHelper = <T = any, R = AxiosResponse<T>>(
-  url: string,
-  data?: any,
-  config?: AxiosRequestConfig
-) => Promise<R>
-
-export interface AxleHelpers {
-  // get data in json format
-  get: FetchHelper
-  // get data in blob format, which can be used to construct URL download under browser
-  getBlob: FetchHelper
-  // get the html document, return a dom node, can directly embed the document
-  getDocument: FetchHelper
-  // get text
-  getText: FetchHelper
-  // get ArrayBuffer, which can be used for segmented download
-  getArrayBuffer: FetchHelper
-  // get a readable stream, which can be used for browser caching
-  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
-
-  // submit application/x-www-form-urlencoded encoded data
-  post: ModifyHelper
-  // submit application/json encoded data
-  postJSON: ModifyHelper
-  // submit multipart/form-data encoded data
-  postMultipart: ModifyHelper
-
-  put: ModifyHelper
-  putJSON: ModifyHelper
-  putMultipart: ModifyHelper
-
-  patch: ModifyHelper
-  patchJSON: ModifyHelper
-  patchMultipart: ModifyHelper
-
-  // browser download file
-  download(blob: string | Blob, filename: string): void
-
-  // set global header
-  setHeader(key: string, value: string): void
-  // remove global header
-  removeHeader(key: string | string[]): void
-}
-```
-
-### Normalize Api Arguments
-
-```js
-// axios
-import { createAxios } from 'axios'
-
-const axios = createAxios({})
-
-function getUser() {
-  return axios.get('/user', {
-    params: {
-      id: 1,
-    },
-  })
-}
-
-function uploadFile() {
-  const formData = new FormData()
-  formData.append('name', 'axios')
-  formData.append('file', new File())
-    
-  return axios.post('/user', formData, {
-    headers: {
-      'Ccontent-Type': 'multipart/form-data',
-    },
-  })
-}
-```
+#### Request call
 
 ```js
-// axle
 import { createAxle } from '@varlet/axle'
 
-// create axle instance , axle has the same abilities as axios
-const axle = createAxle(/** @see http://www.axios-js.com/zh-cn/docs/#axios-create-config **/)
+// create axle instance
+const axle = createAxle(/** @see https://axios-http.com **/)
 
-// Some helper functions of axle
-const axleHelpers = axle.helpers
+// The built-in axios of the axle, the usage is exactly the same as that of axios, and shares the configuration with the axle.
+const { axios } = axle
 
-function getUser() {
-  return axleHelpers.get('/user', { id: 1 })
-}
+const response = await axle.get('/user', { current: 1, pageSize: 10 }, { headers: {} })
+const response = await axle.post('/user', { name: 'Axle' }, { headers: {} })
+```
 
-function addUser() {
-  return axleHelpers.postMultipart('/user', { name: 'axle', file: new File() })
-}
+### Vue Composition Api
+
+```html
+<script setup>
+import { createAxle, createUseAxle } from '@varlet/axle'
+
+const axle = createAxle()
+const useAxle = createUseAxle()
+
+// default immediate request
+const [users, getUsers, loading, { error }] = useAxle({
+  runner: axle.get,
+  url: '/user',
+  params: { current: 1, pageSize: 10 },
+  config: { headers: {} }
+})
+</script>
+
+<template>
+   <span>{{ users }}</span>
+   <span>{{ loading }}</span>
+   <span>{{ error }}</span>
+</template>
 ```
+
+### Repo Status
+
+WIP and Trying
+

package/{lib/index.d.ts → es/helpers.d.ts}

@@ -1,9 +1,9 @@
-import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, ResponseType } from "axios";
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, ResponseType } from 'axios';
 export declare type AxleRequestConfig = AxiosRequestConfig & {
     exceptionMessage?: any;
 };
 export declare type FetchHelper = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
-export declare type ModifyHelper = <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxleRequestConfig) => Promise<R>;
+export declare type ModifyHelper = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
 export interface AxiosHelpers {
     get: FetchHelper;
     getBlob: FetchHelper;
@@ -42,12 +42,12 @@ export interface AxiosHelpers {
     setHeader(key: string, value: string): void;
     removeHeader(key: string | string[]): void;
 }
-export declare type FetchMethods = "get" | "delete" | "options" | "head";
-export declare type ModifyMethods = "post" | "put" | "patch";
+export declare type FetchMethods = 'get' | 'delete' | 'options' | 'head';
+export declare type ModifyMethods = 'post' | 'put' | 'patch';
 export declare type AxleInstance = AxiosInstance & {
     helpers: AxiosHelpers;
 };
 export declare function createFetchHelper(service: AxleInstance, method: FetchMethods, responseType: ResponseType): <T, R = AxiosResponse<T, any>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
-export declare function createModifyHelper(service: AxleInstance, method: ModifyMethods, contentType: "application/json" | "multipart/form-data" | "application/x-www-form-urlencoded"): <T, R = AxiosResponse<T, any>>(url: string, data?: any, config?: AxleRequestConfig) => Promise<R>;
+export declare function createModifyHelper(service: AxleInstance, 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 download(url: string | Blob, filename: string): void;
-export declare function createAxle(config: AxiosRequestConfig): AxleInstance;
+export declare function createAxle(config?: AxiosRequestConfig): AxleInstance;

package/es/helpers.js

@@ -0,0 +1,85 @@
+import axios from 'axios';
+import qs from 'qs';
+export function createFetchHelper(service, method, responseType) {
+    return function (url, params, config) {
+        return service[method](url, Object.assign({ params: Object.assign({ _t: Date.now() }, params), responseType }, config));
+    };
+}
+export function createModifyHelper(service, method, contentType) {
+    return function (url, params, config) {
+        if (contentType === 'application/x-www-form-urlencoded') {
+            params = qs.stringify(params);
+        }
+        if (contentType === 'multipart/form-data') {
+            const formData = new FormData();
+            Object.keys(params).forEach((key) => formData.append(key, params[key]));
+            params = formData;
+        }
+        return service[method](url, params, Object.assign({ headers: {
+                'Content-Type': contentType,
+            } }, config));
+    };
+}
+export function download(url, filename) {
+    const a = document.createElement('a');
+    a.download = filename;
+    a.style.display = 'none';
+    a.href = typeof url === 'string' ? url : URL.createObjectURL(url);
+    document.body.appendChild(a);
+    a.click();
+    URL.revokeObjectURL(a.href);
+    document.body.removeChild(a);
+}
+export function createAxle(config = {}) {
+    const service = axios.create(config);
+    function setHeader(key, value) {
+        ;
+        service.defaults.headers['common'][key] = value;
+    }
+    function removeHeader(key) {
+        if (typeof key === 'string') {
+            Reflect.deleteProperty(service.defaults.headers['common'], key);
+            return;
+        }
+        key.forEach((k) => Reflect.deleteProperty(service.defaults.headers['common'], k));
+    }
+    service.helpers = {
+        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/x-www-form-urlencoded'),
+        postJSON: createModifyHelper(service, 'post', 'application/json'),
+        postMultipart: createModifyHelper(service, 'post', 'multipart/form-data'),
+        put: createModifyHelper(service, 'put', 'application/x-www-form-urlencoded'),
+        putJSON: createModifyHelper(service, 'put', 'application/json'),
+        putMultipart: createModifyHelper(service, 'put', 'multipart/form-data'),
+        patch: createModifyHelper(service, 'patch', 'application/x-www-form-urlencoded'),
+        patchJSON: createModifyHelper(service, 'patch', 'application/json'),
+        patchMultipart: createModifyHelper(service, 'patch', 'multipart/form-data'),
+        download,
+        setHeader,
+        removeHeader,
+    };
+    return service;
+}

package/es/index.d.ts

@@ -1,53 +1,2 @@
-import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, ResponseType } from "axios";
-export declare type AxleRequestConfig = AxiosRequestConfig & {
-    exceptionMessage?: any;
-};
-export declare type FetchHelper = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
-export declare type ModifyHelper = <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxleRequestConfig) => Promise<R>;
-export interface AxiosHelpers {
-    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;
-    postJSON: ModifyHelper;
-    postMultipart: ModifyHelper;
-    put: ModifyHelper;
-    putJSON: ModifyHelper;
-    putMultipart: ModifyHelper;
-    patch: ModifyHelper;
-    patchJSON: ModifyHelper;
-    patchMultipart: ModifyHelper;
-    download(blob: string | Blob, filename: string): void;
-    setHeader(key: string, value: string): void;
-    removeHeader(key: string | string[]): void;
-}
-export declare type FetchMethods = "get" | "delete" | "options" | "head";
-export declare type ModifyMethods = "post" | "put" | "patch";
-export declare type AxleInstance = AxiosInstance & {
-    helpers: AxiosHelpers;
-};
-export declare function createFetchHelper(service: AxleInstance, method: FetchMethods, responseType: ResponseType): <T, R = AxiosResponse<T, any>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
-export declare function createModifyHelper(service: AxleInstance, method: ModifyMethods, contentType: "application/json" | "multipart/form-data" | "application/x-www-form-urlencoded"): <T, R = AxiosResponse<T, any>>(url: string, data?: any, config?: AxleRequestConfig) => Promise<R>;
-export declare function download(url: string | Blob, filename: string): void;
-export declare function createAxle(config: AxiosRequestConfig): AxleInstance;
+export * from './instance';
+export * from './use';

package/es/index.js

@@ -1,84 +1,2 @@
-import axios from "axios";
-import qs from "qs";
-export function createFetchHelper(service, method, responseType) {
-    return function (url, params, config) {
-        return service[method](url, Object.assign({ params: Object.assign({ _t: Date.now() }, params), responseType }, config));
-    };
-}
-export function createModifyHelper(service, method, contentType) {
-    return function (url, data, config) {
-        if (contentType === "application/x-www-form-urlencoded") {
-            data = qs.stringify(data);
-        }
-        if (contentType === "multipart/form-data") {
-            const formData = new FormData();
-            Object.keys(data).forEach((key) => formData.append(key, data[key]));
-            data = formData;
-        }
-        return service[method](url, data, Object.assign({ headers: {
-                "Content-Type": contentType,
-            } }, config));
-    };
-}
-export function download(url, filename) {
-    const a = document.createElement("a");
-    a.download = filename;
-    a.style.display = "none";
-    a.href = typeof url === "string" ? url : URL.createObjectURL(url);
-    document.body.appendChild(a);
-    a.click();
-    URL.revokeObjectURL(a.href);
-    document.body.removeChild(a);
-}
-export function createAxle(config) {
-    const service = axios.create(config);
-    function setHeader(key, value) {
-        service.defaults.headers["common"][key] = value;
-    }
-    function removeHeader(key) {
-        if (typeof key === "string") {
-            Reflect.deleteProperty(service.defaults.headers["common"], key);
-            return;
-        }
-        key.forEach((k) => Reflect.deleteProperty(service.defaults.headers["common"], k));
-    }
-    service.helpers = {
-        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/x-www-form-urlencoded"),
-        postJSON: createModifyHelper(service, "post", "application/json"),
-        postMultipart: createModifyHelper(service, "post", "multipart/form-data"),
-        put: createModifyHelper(service, "put", "application/x-www-form-urlencoded"),
-        putJSON: createModifyHelper(service, "put", "application/json"),
-        putMultipart: createModifyHelper(service, "put", "multipart/form-data"),
-        patch: createModifyHelper(service, "patch", "application/x-www-form-urlencoded"),
-        patchJSON: createModifyHelper(service, "patch", "application/json"),
-        patchMultipart: createModifyHelper(service, "patch", "multipart/form-data"),
-        download,
-        setHeader,
-        removeHeader,
-    };
-    return service;
-}
+export * from './instance';
+export * from './use';

package/es/instance.d.ts

@@ -0,0 +1,51 @@
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, ResponseType } from 'axios';
+export declare type AxleRequestConfig = AxiosRequestConfig & {
+    exceptionMessage?: any;
+};
+export declare type FetchHelper = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
+export declare type ModifyHelper = <T = any, R = AxiosResponse<T>>(url: string, params?: any, config?: AxleRequestConfig) => Promise<R>;
+export declare type FetchMethods = 'get' | 'delete' | 'options' | 'head';
+export declare type ModifyMethods = 'post' | 'put' | 'patch';
+export declare 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;
+    postJSON: ModifyHelper;
+    postMultipart: ModifyHelper;
+    put: ModifyHelper;
+    putJSON: ModifyHelper;
+    putMultipart: ModifyHelper;
+    patch: ModifyHelper;
+    patchJSON: ModifyHelper;
+    patchMultipart: ModifyHelper;
+    download(blob: string | Blob, filename: string): void;
+    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 download(url: string | Blob, filename: string): void;
+export declare function createAxle(config?: AxiosRequestConfig): AxleInstance;

package/es/instance.js

@@ -0,0 +1,85 @@
+import axios from 'axios';
+import qs from 'qs';
+export function createFetchHelper(service, method, responseType) {
+    return function (url, params, config) {
+        return service[method](url, Object.assign({ params: Object.assign({ _t: Date.now() }, params), responseType }, config));
+    };
+}
+export function createModifyHelper(service, method, contentType) {
+    return function (url, params, config) {
+        if (contentType === 'application/x-www-form-urlencoded') {
+            params = qs.stringify(params);
+        }
+        if (contentType === 'multipart/form-data') {
+            const formData = new FormData();
+            Object.keys(params).forEach((key) => formData.append(key, params[key]));
+            params = formData;
+        }
+        return service[method](url, params, Object.assign({ headers: {
+                'Content-Type': contentType,
+            } }, config));
+    };
+}
+export function download(url, filename) {
+    const a = document.createElement('a');
+    a.download = filename;
+    a.style.display = 'none';
+    a.href = typeof url === 'string' ? url : URL.createObjectURL(url);
+    document.body.appendChild(a);
+    a.click();
+    URL.revokeObjectURL(a.href);
+    document.body.removeChild(a);
+}
+export function createAxle(config = {}) {
+    const service = axios.create(config);
+    function setHeader(key, value) {
+        ;
+        service.defaults.headers['common'][key] = value;
+    }
+    function removeHeader(key) {
+        if (typeof key === 'string') {
+            Reflect.deleteProperty(service.defaults.headers['common'], key);
+            return;
+        }
+        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/x-www-form-urlencoded'),
+        postJSON: createModifyHelper(service, 'post', 'application/json'),
+        postMultipart: createModifyHelper(service, 'post', 'multipart/form-data'),
+        put: createModifyHelper(service, 'put', 'application/x-www-form-urlencoded'),
+        putJSON: createModifyHelper(service, 'put', 'application/json'),
+        putMultipart: createModifyHelper(service, 'put', 'multipart/form-data'),
+        patch: createModifyHelper(service, 'patch', 'application/x-www-form-urlencoded'),
+        patchJSON: createModifyHelper(service, 'patch', 'application/json'),
+        patchMultipart: createModifyHelper(service, 'patch', 'multipart/form-data'),
+        download,
+        setHeader,
+        removeHeader,
+        axios: service,
+    };
+}

package/es/types.js

@@ -0,0 +1 @@
+"use strict";

package/es/use.d.ts

@@ -0,0 +1,32 @@
+import { type Ref, type UnwrapRef } from 'vue';
+import { type AxleRequestConfig, createFetchHelper, createModifyHelper } from './instance';
+export interface CreateUseAxleOptions {
+    runner?: ReturnType<typeof createFetchHelper> | ReturnType<typeof createModifyHelper>;
+    url?: string;
+    data?: any;
+    params?: any;
+    config?: AxleRequestConfig;
+    immediate?: boolean;
+    dataFormatter?(data: any): any;
+    errorFormatter?(errorResponse: Error): Error;
+}
+export interface RunOptions<P> {
+    url?: string;
+    params?: P;
+    config?: AxleRequestConfig;
+}
+export declare type RunReturn<D> = Promise<[UnwrapRef<D>, undefined] | [undefined, Error]>;
+export declare type Run<D, P> = (options?: RunOptions<P>) => RunReturn<D>;
+export interface UseAxleOptions<D, P> {
+    runner?: ReturnType<typeof createFetchHelper> | ReturnType<typeof createModifyHelper>;
+    url?: string;
+    data?: D;
+    params?: P;
+    config?: AxleRequestConfig;
+    immediate?: boolean;
+    dataFormatter?(response: any): D;
+    errorFormatter?(errorResponse: Error): Error;
+}
+export declare function createUseAxle(options?: CreateUseAxleOptions): <D = any, P = any>(options?: UseAxleOptions<D, P>) => [data: Ref<UnwrapRef<D>>, run: Run<D, P>, loading: Ref<boolean>, extra: {
+    error: Ref<UnwrapRef<Error | undefined>>;
+}];

package/es/use.js

@@ -0,0 +1,59 @@
+import { ref } from 'vue';
+export function createUseAxle(options = {}) {
+    var _a, _b, _c;
+    const defaultRunner = options.runner;
+    const defaultUrl = options.url;
+    const defaultInitialData = options.data;
+    const defaultInitialParams = options.params;
+    const defaultInitialConfig = options.config;
+    const defaultImmediate = (_a = options.immediate) !== null && _a !== void 0 ? _a : true;
+    const defaultDataFormatter = (_b = options.dataFormatter) !== null && _b !== void 0 ? _b : ((v) => v);
+    const defaultErrorFormatter = (_c = options.errorFormatter) !== null && _c !== void 0 ? _c : ((v) => v);
+    const useAxle = (options = {}) => {
+        const { runner = defaultRunner, data: initialData = defaultInitialData, url = defaultUrl, params: initialParams = defaultInitialParams, config: initialConfig = defaultInitialConfig, immediate = defaultImmediate, dataFormatter = defaultDataFormatter, errorFormatter = defaultErrorFormatter } = options;
+        const initialUrl = url;
+        const data = ref(initialData);
+        const loading = ref(false);
+        const error = ref();
+        if (!runner) {
+            throw new Error('[Axle]: Cannot found valid runner, so options.runner is required');
+        }
+        const run = (options = {}) => {
+            var _a;
+            const url = (_a = options.url) !== null && _a !== void 0 ? _a : initialUrl;
+            if (!url) {
+                throw new Error('[Axle]: Cannot found valid url, so options.url is required');
+            }
+            loading.value = true;
+            return runner(url, options.params, options.config)
+                .then((response) => {
+                data.value = dataFormatter(response);
+                error.value = undefined;
+                loading.value = false;
+                return [data.value, undefined];
+            })
+                .catch((responseError) => {
+                data.value = initialData;
+                error.value = errorFormatter(responseError);
+                loading.value = false;
+                return [undefined, error.value];
+            });
+        };
+        if (immediate) {
+            run({
+                url: initialUrl,
+                params: initialParams,
+                config: initialConfig,
+            });
+        }
+        return [
+            data,
+            run,
+            loading,
+            {
+                error,
+            },
+        ];
+    };
+    return useAxle;
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@varlet/axle",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A useful axios helper",
-  "main": "lib/index.js",
+  "type": "module",
+  "main": "es/index.js",
   "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "es"
+  ],
   "keywords": [
     "axle",
     "axios",
@@ -12,15 +17,18 @@
   "license": "MIT",
   "devDependencies": {
     "@types/qs": "^6.9.7",
-    "@varlet/cli": "latest",
-    "@varlet/icons": "latest",
-    "@varlet/touch-emulator": "latest",
+    "@varlet/cli": "^2.11.1",
+    "@varlet/icons": "^2.11.1",
+    "@varlet/touch-emulator": "^2.11.1",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",
     "lodash-es": "^4.17.21",
     "typescript": "^4.4.4",
-    "vue": "^3.2.37",
-    "vue-router": "^4.0.16"
+    "vue": "^3.3.1",
+    "vue-router": "^4.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
   },
   "homepage": "https://varlet.gitee.io/axle/",
   "repository": {
@@ -34,24 +42,24 @@
     "Chrome >= 51",
     "iOS >= 10"
   ],
-  "packageManager": "pnpm@6.24.3",
-  "files": [
-    "lib",
-    "es"
-  ],
+  "packageManager": "pnpm@8.0.0",
+  "engines": {
+    "pnpm": ">=8.0"
+  },
   "author": "Joker <13255238145@163.com>",
   "dependencies": {
-    "axios": "^0.27.2",
+    "@varlet/shared": "^2.11.1",
+    "axios": "^1.4.0",
     "qs": "^6.11.0"
   },
   "scripts": {
+    "bootstrap": "pnpm i && pnpm compile && pnpm --filter ./playground i",
     "bootstrap:ci": "pnpm i",
-    "bootstrap": "pnpm i && pnpm --filter ./playground i",
     "dev": "varlet-cli dev",
     "build": "varlet-cli build",
     "preview": "varlet-cli preview",
-    "compile": "rm -rf lib es && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
+    "compile:watch": "tsc -w",
+    "compile": "tsc",
     "release": "pnpm compile && varlet-cli release"
-  },
-  "readme": "<div>\n  <a href=\"https://github.com/varletjs/axle\">\n    <img src=\"https://github.com/varletjs/axle/blob/main/public/logo.svg\" width=\"400\">\n  </a>\n  <h2>A tool library based on axios to simplify the development process</h2>\n</div>\n\n### Quickstart\n\n```shell\n# use npm or yarn or pnpm\n\n# npm\nnpm i @varlet/axle -S\n\n# yarn\nyarn add @varlet/axle\n\n# pnpm\npnpm add @varlet/axle\n```\n\n### Function Signature\n\n```typescript\n// 'get' | 'head' | 'options' | 'delete'\nexport type FetchHelper = <T = any, R = AxiosResponse<T>>(\n  url: string,\n  params?: any,\n  config?: AxiosRequestConfig\n) => Promise<R>\n// 'post' | 'put' | 'patch'\nexport type ModifyHelper = <T = any, R = AxiosResponse<T>>(\n  url: string,\n  data?: any,\n  config?: AxiosRequestConfig\n) => Promise<R>\n\nexport interface AxleHelpers {\n  // get data in json format\n  get: FetchHelper\n  // get data in blob format, which can be used to construct URL download under browser\n  getBlob: FetchHelper\n  // get the html document, return a dom node, can directly embed the document\n  getDocument: FetchHelper\n  // get text\n  getText: FetchHelper\n  // get ArrayBuffer, which can be used for segmented download\n  getArrayBuffer: FetchHelper\n  // get a readable stream, which can be used for browser caching\n  getStream: FetchHelper\n\n  head: FetchHelper\n  headBlob: FetchHelper\n  headDocument: FetchHelper\n  headText: FetchHelper\n  headArrayBuffer: FetchHelper\n  headStream: FetchHelper\n\n  options: FetchHelper\n  optionsBlob: FetchHelper\n  optionsDocument: FetchHelper\n  optionsText: FetchHelper\n  optionsArrayBuffer: FetchHelper\n  optionsStream: FetchHelper\n\n  delete: FetchHelper\n  deleteBlob: FetchHelper\n  deleteDocument: FetchHelper\n  deleteText: FetchHelper\n  deleteArrayBuffer: FetchHelper\n  deleteStream: FetchHelper\n\n  // submit application/x-www-form-urlencoded encoded data\n  post: ModifyHelper\n  // submit application/json encoded data\n  postJSON: ModifyHelper\n  // submit multipart/form-data encoded data\n  postMultipart: ModifyHelper\n\n  put: ModifyHelper\n  putJSON: ModifyHelper\n  putMultipart: ModifyHelper\n\n  patch: ModifyHelper\n  patchJSON: ModifyHelper\n  patchMultipart: ModifyHelper\n\n  // browser download file\n  download(blob: string | Blob, filename: string): void\n\n  // set global header\n  setHeader(key: string, value: string): void\n  // remove global header\n  removeHeader(key: string | string[]): void\n}\n```\n\n### Normalize Api Arguments\n\n```js\n// axios\nimport { createAxios } from 'axios'\n\nconst axios = createAxios({})\n\nfunction getUser() {\n  return axios.get('/user', {\n    params: {\n      id: 1,\n    },\n  })\n}\n\nfunction uploadFile() {\n  const formData = new FormData()\n  formData.append('name', 'axios')\n  formData.append('file', new File())\n    \n  return axios.post('/user', formData, {\n    headers: {\n      'Ccontent-Type': 'multipart/form-data',\n    },\n  })\n}\n```\n\n```js\n// axle\nimport { createAxle } from '@varlet/axle'\n\n// create axle instance , axle has the same abilities as axios\nconst axle = createAxle(/** @see http://www.axios-js.com/zh-cn/docs/#axios-create-config **/)\n\n// Some helper functions of axle\nconst axleHelpers = axle.helpers\n\nfunction getUser() {\n  return axleHelpers.get('/user', { id: 1 })\n}\n\nfunction addUser() {\n  return axleHelpers.postMultipart('/user', { name: 'axle', file: new File() })\n}\n```\n"
+  }
 }

package/lib/index.js

@@ -1,94 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAxle = exports.download = exports.createModifyHelper = exports.createFetchHelper = void 0;
-const axios_1 = __importDefault(require("axios"));
-const qs_1 = __importDefault(require("qs"));
-function createFetchHelper(service, method, responseType) {
-    return function (url, params, config) {
-        return service[method](url, Object.assign({ params: Object.assign({ _t: Date.now() }, params), responseType }, config));
-    };
-}
-exports.createFetchHelper = createFetchHelper;
-function createModifyHelper(service, method, contentType) {
-    return function (url, data, config) {
-        if (contentType === "application/x-www-form-urlencoded") {
-            data = qs_1.default.stringify(data);
-        }
-        if (contentType === "multipart/form-data") {
-            const formData = new FormData();
-            Object.keys(data).forEach((key) => formData.append(key, data[key]));
-            data = formData;
-        }
-        return service[method](url, data, Object.assign({ headers: {
-                "Content-Type": contentType,
-            } }, config));
-    };
-}
-exports.createModifyHelper = createModifyHelper;
-function download(url, filename) {
-    const a = document.createElement("a");
-    a.download = filename;
-    a.style.display = "none";
-    a.href = typeof url === "string" ? url : URL.createObjectURL(url);
-    document.body.appendChild(a);
-    a.click();
-    URL.revokeObjectURL(a.href);
-    document.body.removeChild(a);
-}
-exports.download = download;
-function createAxle(config) {
-    const service = axios_1.default.create(config);
-    function setHeader(key, value) {
-        service.defaults.headers["common"][key] = value;
-    }
-    function removeHeader(key) {
-        if (typeof key === "string") {
-            Reflect.deleteProperty(service.defaults.headers["common"], key);
-            return;
-        }
-        key.forEach((k) => Reflect.deleteProperty(service.defaults.headers["common"], k));
-    }
-    service.helpers = {
-        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/x-www-form-urlencoded"),
-        postJSON: createModifyHelper(service, "post", "application/json"),
-        postMultipart: createModifyHelper(service, "post", "multipart/form-data"),
-        put: createModifyHelper(service, "put", "application/x-www-form-urlencoded"),
-        putJSON: createModifyHelper(service, "put", "application/json"),
-        putMultipart: createModifyHelper(service, "put", "multipart/form-data"),
-        patch: createModifyHelper(service, "patch", "application/x-www-form-urlencoded"),
-        patchJSON: createModifyHelper(service, "patch", "application/json"),
-        patchMultipart: createModifyHelper(service, "patch", "multipart/form-data"),
-        download,
-        setHeader,
-        removeHeader,
-    };
-    return service;
-}
-exports.createAxle = createAxle;