refactor: refactor options

varletjs · Jul 5, 2023 · 07274c7 · 07274c7
1 parent 39eef91
commit 07274c7
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 98 deletions.
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -12,83 +12,60 @@ import {
 const id = ref('1')
 const deleteId = ref('1')
 
-const [users, apiGetUsers, isUsersLoading] = useApiGetUsers<UserModel[]>({
-  data: [],
-  immediate: true,
-  onSuccess(response) {
-    if (response.code !== 200) {
-      Snackbar(response.message)
-    }
-
-    return response.data
-  },
-})
-const [user, apiGetUser, isUserLoading] = useApiGetUser<UserModel>({
-  data: {},
-  onSuccess(response) {
-    if (response.code !== 200) {
-      Snackbar(response.message)
-    }
-
-    return response.data
-  },
-})
-const [addedUser, apiAddUser] = useApiAddUser<UserModel>({
-  data: {},
-  onBefore() {
-    Snackbar.loading('Adding!')
-  },
-  onSuccess(response) {
-    if (response.code !== 200) {
-      Snackbar(response.message)
-    }
-
-    Snackbar.success('Add User Success!')
-    return response.data
-  },
-})
-const [updatedUser, apiUpdateUser] = useApiUpdateUser<UserModel>({
-  data: {},
-  onBefore() {
-    Snackbar.loading('Updating!')
-  },
-  onSuccess(response) {
-    if (response.code !== 200) {
-      Snackbar(response.message)
-    }
-
-    Snackbar.success('Update User Success!')
-    return response.data
-  },
-})
-const [patchedUser] = useApiPatchUser<UserModel>({
-  data: {},
-  onBefore() {
-    Snackbar.loading('Patching!')
-  },
-  onSuccess(response) {
-    if (response.code !== 200) {
-      Snackbar(response.message)
-    }
-
-    Snackbar.success('Patch User Success!')
-    return response.data
-  },
-})
-const [deletedUser, apiDeleteUser] = useApiDeleteUser<UserModel>({
-  data: {},
-  onBefore() {
-    Snackbar.loading('Deleting!')
-  },
-  onSuccess(response) {
-    if (response.code !== 200) {
-      Snackbar(response.message)
-    }
-
-    Snackbar.success('Delete User Success!')
-    return response.data
-  },
-})
+const [users, apiGetUsers, { loading: isUsersLoading }] = useApiGetUsers<UserModel[]>([], { immediate: true })
+const [user, apiGetUser, { loading: isUserLoading }] = useApiGetUser<UserModel>({})
+const [addedUser, apiAddUser] = useApiAddUser<UserModel>(
+  {},
+  {
+    onBefore() {
+      Snackbar.loading('Adding!')
+    },
+    onSuccess(response) {
+      if (response.code === 200) {
+        Snackbar.success('Add User Success!')
+      }
+    },
+  }
+)
+const [updatedUser, apiUpdateUser] = useApiUpdateUser<UserModel>(
+  {},
+  {
+    onBefore() {
+      Snackbar.loading('Updating!')
+    },
+    onSuccess(response) {
+      if (response.code === 200) {
+        Snackbar.success('Update User Success!')
+      }
+    },
+  }
+)
+const [patchedUser] = useApiPatchUser<UserModel>(
+  {},
+  {
+    onBefore() {
+      Snackbar.loading('Patching!')
+    },
+    onSuccess(response) {
+      if (response.code === 200) {
+        Snackbar.success('Patch User Success!')
+      }
+    },
+  }
+)
+const [deletedUser, apiDeleteUser] = useApiDeleteUser<UserModel>(
+  {},
+  {
+    onBefore() {
+      Snackbar.loading('Deleting!')
+    },
+    onSuccess(response) {
+      if (response.code === 200) {
+        Snackbar.success('Delete User Success!')
+      }
+    },
+  }
+)
 
 const userModel = reactive<UserModel>({
   id: '',

diff --git a/playground/src/apis/index.ts b/playground/src/apis/index.ts
@@ -12,51 +12,56 @@ export interface UserModel {
   name?: string
 }
 
-export type UseApiOptions<D = any, R = any, P = Record<string, any>> = Pick<UseAxleOptions<D, R, P>, 'data'> &
-  Partial<Omit<UseAxleOptions<D, R, P>, 'data'>>
+export type UseApiOptions<D, R = any, P = Record<string, any>> = Partial<Omit<UseAxleOptions<D, R, P>, 'data'>>
 
-export function useApiGetUsers<D>(options: UseApiOptions<D, Response<UserModel[]>>) {
+export function useApiGetUsers<D>(data: D, options: UseApiOptions<D, Response<UserModel[]>>) {
   return useAxle({
+    data,
     url: '/user/list-user',
     runner: axle.get,
     ...options,
   })
 }
 
-export function useApiGetUser<D>(options: UseApiOptions<D, Response<UserModel>>) {
+export function useApiGetUser<D>(data: D, options?: UseApiOptions<D, Response<UserModel>>) {
   return useAxle({
+    data,
     url: '/user/get-user',
     runner: axle.get,
     ...options,
   })
 }
 
-export function useApiAddUser<D>(options: UseApiOptions<D, Response<UserModel>>) {
+export function useApiAddUser<D>(data: D, options?: UseApiOptions<D, Response<UserModel>>) {
   return useAxle({
+    data,
     url: '/user/add-user',
     runner: axle.postJSON,
     ...options,
   })
 }
 
-export function useApiDeleteUser<D>(options: UseApiOptions<D, Response<UserModel>>) {
+export function useApiDeleteUser<D>(data: D, options?: UseApiOptions<D, Response<UserModel>>) {
   return useAxle({
+    data,
     url: '/user/delete-user',
     runner: axle.delete,
     ...options,
   })
 }
 
-export function useApiUpdateUser<D>(options: UseApiOptions<D, Response<UserModel>>) {
+export function useApiUpdateUser<D>(data: D, options?: UseApiOptions<D, Response<UserModel>>) {
   return useAxle({
+    data,
     url: '/user/update-user',
     runner: axle.putJSON,
     ...options,
   })
 }
 
-export function useApiPatchUser<D>(options: UseApiOptions<D, Response<UserModel>>) {
+export function useApiPatchUser<D>(data: D, options?: UseApiOptions<D, Response<UserModel>>) {
   return useAxle({
+    data,
     url: '/user/patch-user',
     runner: axle.patchJSON,
     ...options,

diff --git a/playground/src/request/index.ts b/playground/src/request/index.ts
@@ -5,15 +5,24 @@ const axle = createAxle({
   baseURL: '/api',
 })
 
-const useAxle = createUseAxle()
+const useAxle = createUseAxle({
+  onTransform: (response) => response.data 
+})
 
 axle.axios.interceptors.response.use(
   (response) => {
-    if (response.status === 200) {
-      return response.data
+    const { status, data } = response
+
+    if (status !== 200) {
+      Snackbar.error(data.message)
+      return data
+    }
+
+    if (data.code !== 200) {
+      Snackbar(data.message)
     }
 
-    Snackbar.error(response.data.message)
+    return data
   },
   (error) => {
     Snackbar.error(error.message)

diff --git a/src/use.ts b/src/use.ts
@@ -17,18 +17,28 @@ export interface UseAxleOptions<D = any, R = any, P = Record<string, any>> {
   config?: AxleRequestConfig
   immediate?: boolean
   onBefore?(): void
-  onSuccess?(response: UnwrapRef<R>, prev: UnwrapRef<D>): UnwrapRef<D>
+  onAfter?(): void
+  onTransform?(response: UnwrapRef<R>, prev: UnwrapRef<D>): UnwrapRef<D>
+  onSuccess?(response: UnwrapRef<R>): void
   onError?(error: Error, prev: Error | undefined): Error
 }
 
 export type UseAxleReturn<D, P> = [
   data: Ref<UnwrapRef<D>>,
   run: Run<D, P>,
-  loading: Ref<UnwrapRef<boolean>>,
-  extra: { error: Ref<UnwrapRef<Error | undefined>> }
+  extra: {
+    loading: Ref<UnwrapRef<boolean>>
+    error: Ref<UnwrapRef<Error | undefined>>
+  }
 ]
 
-export function createUseAxle() {
+export interface CreateUseAxleOptions {
+  onTransform?(response: any, prev: any): any
+}
+
+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> => {
@@ -40,7 +50,9 @@ export function createUseAxle() {
       params: initialParams,
       config: initialConfig,
       onBefore = () => {},
-      onSuccess = (response) => response as unknown as UnwrapRef<D>,
+      onAfter = () => {},
+      onTransform = (defaultOnTransform as UseAxleOptions<D, R, P>['onTransform']) ?? ((response) => response as unknown as UnwrapRef<D>),
+      onSuccess = () => {},
       onError = (error) => error,
     } = options
     const initialUrl = url
@@ -57,18 +69,22 @@ export function createUseAxle() {
 
       return runner(url, options.params, options.config)
         .then((response) => {
-          data.value = onSuccess(response as UnwrapRef<R>, data.value)
+          data.value = onTransform(response as UnwrapRef<R>, data.value)
           error.value = undefined
-          loading.value = false
+
+          onSuccess(response as UnwrapRef<R>)
 
           return data.value
         })
         .catch((responseError) => {
           error.value = onError(responseError, error.value)
-          loading.value = false
 
           throw responseError
         })
+        .finally(() => {
+          loading.value = false
+          onAfter()
+        })
     }
 
     if (immediate) {
@@ -82,8 +98,8 @@ export function createUseAxle() {
     return [
       data,
       run,
-      loading,
       {
+        loading,
         error,
       },
     ]