feat: support abort and progress

package.json

@@ -44,7 +44,10 @@
     "@varlet/cli": "^2.11.8",
     "rimraf": "^5.0.1",
     "typescript": "^5.1.5",
-    "vue": "^3.3.4"
+    "vue": "3.3.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
   },
   "repository": {
     "type": "git",

playground/package.json

@@ -12,9 +12,10 @@
     "@varlet/axle": "link:..",
     "@varlet/touch-emulator": "2.11.8",
     "@varlet/ui": "^2.11.8",
+    "@varlet/use": "^2.12.2",
     "koa": "^2.14.2",
-    "koa-router": "^12.0.0",
     "koa-bodyparser": "^4.4.0",
+    "koa-router": "^12.0.0",
     "nodemon": "^2.0.15",
     "unplugin-auto-import": "^0.16.2",
     "vue": "^3.3.1"

playground/src/App.vue

@@ -6,14 +6,24 @@ import {
   useApiDeleteUser,
   useApiUpdateUser,
   useApiPatchUser,
+  useApiDownloadFile,
   User,
 } from './apis'
 
 const id = ref('1')
 const deleteId = ref('1')
 
 const [users, apiGetUsers, { loading: isUsersLoading }] = useApiGetUsers<User[]>([], { immediate: true })
-const [user, apiGetUser, { loading: isUserLoading }] = useApiGetUser<User>({})
+const [user, apiGetUser, { loading: isUserLoading, abort }] = useApiGetUser<User>(
+  {},
+  {
+    onSuccess(response) {
+      if (response.code === 200) {
+        Snackbar.success('Getting Success!')
+      }
+    },
+  }
+)
 const [addedUser, apiAddUser] = useApiAddUser<User>(
   {},
   {
@@ -66,6 +76,9 @@ const [deletedUser, apiDeleteUser] = useApiDeleteUser<User>(
     },
   }
 )
+const [file, apiDownloadFile, { downloadProgress }] = useApiDownloadFile<Blob | null>(null, {
+  onTransform: (response) => response,
+})
 
 const userRecord = reactive<User>({
   id: '',
@@ -100,6 +113,7 @@ watch(
     <var-space align="center">
       <var-input type="number" variant="outlined" v-model="id" />
       <var-button type="primary" @click="apiGetUser({ params: { id } })">Search</var-button>
+      <var-button type="warning" @click="abort">Abort</var-button>
     </var-space>
 
     <var-cell>name: getUser</var-cell>
@@ -125,4 +139,12 @@ watch(
     </var-space>
     <var-button type="danger" @click="handleDelete">Delete</var-button>
   </var-space>
+
+  <var-divider margin="30px 0" />
+
+  <var-space direction="column">
+    <h3>Download Progress: {{ downloadProgress * 100 }} %</h3>
+    <h3>File Size: {{ file?.size ?? 0 }}</h3>
+    <var-button type="primary" @click="() => apiDownloadFile()">Download (PS: Please use slow 3G)</var-button>
+  </var-space>
 </template>

playground/src/apis/index.ts

@@ -67,3 +67,12 @@ export function useApiPatchUser<D>(data: D, options?: Options<D, Response<User>>
     ...options,
   })
 }
+
+export function useApiDownloadFile<D>(data: D, options?: Options<D, Blob>) {
+  return useAxle({
+    data,
+    url: 'http://localhost:5173/logo.png',
+    runner: axle.getBlob,
+    ...options,
+  })
+}

playground/src/request/index.ts

@@ -11,7 +11,7 @@ const useAxle = createUseAxle({
 
 axle.axios.interceptors.response.use(
   (response) => {
-    if (response.data.code !== 200) {
+    if (response.data.code !== 200 && response.data.message) {
       Snackbar.warning(response.data.message)
     }
 

playground/src/server.js

@@ -42,7 +42,7 @@ router.get('/user/list-user', async (ctx) => {
 })
 
 router.get('/user/get-user', async (ctx) => {
-  await delay(300)
+  await delay(2000)
 
   const user = users.find((user) => user.id === Number(ctx.request.query.id))
 

src/use.ts

@@ -1,4 +1,4 @@
-import { ref, type Ref, type UnwrapRef } from 'vue'
+import { ref, type Ref } from 'vue'
 import { type AxleRequestConfig, createFetchHelper, createModifyHelper } from './instance.js'
 
 export interface RunOptions<P> {
@@ -7,7 +7,7 @@ export interface RunOptions<P> {
   config?: AxleRequestConfig
 }
 
-export type Run<D, P> = (options?: RunOptions<P>) => Promise<UnwrapRef<D>>
+export type Run<D, P> = (options?: RunOptions<P>) => Promise<D>
 
 export interface UseAxleOptions<D = any, R = any, P = Record<string, any>> {
   url: string
@@ -18,17 +18,20 @@ export interface UseAxleOptions<D = any, R = any, P = Record<string, any>> {
   immediate?: boolean
   onBefore?(): void
   onAfter?(): void
-  onTransform?(response: UnwrapRef<R>, prev: UnwrapRef<D>): UnwrapRef<D>
-  onSuccess?(response: UnwrapRef<R>): void
+  onTransform?(response: R, prev: D): D
+  onSuccess?(response: R): void
   onError?(error: Error): void
 }
 
 export type UseAxleReturn<D, P> = [
-  data: Ref<UnwrapRef<D>>,
+  data: Ref<D>,
   run: Run<D, P>,
   extra: {
-    loading: Ref<UnwrapRef<boolean>>
-    error: Ref<UnwrapRef<Error | undefined>>
+    uploadProgress: Ref<number>
+    downloadProgress: Ref<number>
+    loading: Ref<boolean>
+    error: Ref<Error | undefined>
+    abort(): void
   }
 ]
 
@@ -38,10 +41,8 @@ export interface CreateUseAxleOptions {
 
 export function createUseAxle(options: CreateUseAxleOptions = {}) {
   const { onTransform: defaultOnTransform } = options
-
-  const useAxle = <D = any, R = any, P = Record<string, any>>(
-    options: UseAxleOptions<D, R, P>
-  ): UseAxleReturn<D, P> => {
+
+  const useAxle = <D = any, R = any, P = Record<string, any>>(options: UseAxleOptions<D, R, P>) => {
     const {
       url,
       runner,
@@ -51,28 +52,57 @@ export function createUseAxle(options: CreateUseAxleOptions = {}) {
       config: initialConfig,
       onBefore = () => {},
       onAfter = () => {},
-      onTransform = (defaultOnTransform as UseAxleOptions<D, R, P>['onTransform']) ?? ((response) => response as unknown as UnwrapRef<D>),
+      onTransform = (defaultOnTransform as UseAxleOptions<D, R, P>['onTransform']) ??
+        ((response) => response as unknown as D),
       onSuccess = () => {},
       onError = () => {},
     } = options
+
     const initialUrl = url
-    const data = ref<D>(initialData)
+    const data = ref<D>(initialData) as Ref<D>
     const loading = ref(false)
     const error = ref<Error>()
+    const downloadProgress = ref(0)
+    const uploadProgress = ref(0)
+
+    let controller = new AbortController()
+
+    const abort = () => {
+      controller.abort()
+    }
+
+    const run: Run<D, P> = (options: RunOptions<P> = {}) => {
+      if (controller.signal.aborted) {
+        controller = new AbortController()
+      }
+
+      uploadProgress.value = 0
+      downloadProgress.value = 0
 
-    const run: Run<D, P> = (options: RunOptions<P> = {}): Promise<UnwrapRef<D>> => {
       const url = options.url ?? initialUrl
 
       onBefore()
 
       loading.value = true
 
-      return runner(url, options.params, options.config)
+      return runner(url, options.params, {
+        signal: controller.signal,
+
+        onUploadProgress(event) {
+          uploadProgress.value = event.progress ?? 0
+        },
+
+        onDownloadProgress(event) {
+          downloadProgress.value = event.progress ?? 0
+        },
+
+        ...options.config,
+      })
         .then((response) => {
-          data.value = onTransform(response as UnwrapRef<R>, data.value)
+          data.value = onTransform(response as R, data.value)
           error.value = undefined
 
-          onSuccess(response as UnwrapRef<R>)
+          onSuccess(response as R)
 
           return data.value
         })
@@ -103,8 +133,11 @@ export function createUseAxle(options: CreateUseAxleOptions = {}) {
       {
         loading,
         error,
+        uploadProgress,
+        downloadProgress,
+        abort,
       },
-    ]
+    ] as UseAxleReturn<D, P>
   }
 
   return useAxle