feat: use-request support format origin (#268)

* feat: use-request support format origin

* version: 2.3.0-beta.6

Author: NelsonYong

docs/demo/request-formatResult/demo.vue

@@ -6,6 +6,20 @@
 <script lang="ts" setup>
   import { useRequest } from 'vue-hooks-plus'
 
+  import { UseRequestPlugin } from 'vue-hooks-plus/es/useRequest/types'
+
+  const useTrackerPlugin: UseRequestPlugin<any, []> = () => {
+    return {
+      name: 'trackerPlugin',
+      onSuccess: (data, params, origin) => {
+        console.log('format data', data)
+        console.log('format before origin', origin)
+        console.log('params', params)
+      },
+      onError: () => {},
+    }
+  }
+
   function getUsername(params: { desc: string }): Promise<string> {
     return new Promise(resolve => {
       setTimeout(() => {
@@ -16,12 +30,16 @@
 
   const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
 
-  const { data: formatData, loading: loading1 } = useRequest(() => getUsername({ desc: 'good' }), {
-    formatResult(res) {
-      return {
-        name: `formatter ${res}`,
-        age: 18,
-      }
+  const { data: formatData, loading: loading1 } = useRequest(
+    () => getUsername({ desc: 'good' }),
+    {
+      formatResult(res) {
+        return {
+          name: `formatter ${res}`,
+          age: 18,
+        }
+      },
     },
-  })
+    [useTrackerPlugin],
+  )
 </script>

docs/demo/request-polling/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-  >Username：<span>{{ loading ? 'loading' : data }}</span>
-    <br>
+    >Username：<span>{{ loading ? 'loading' : data }}</span>
+    <br />
     <p>PollingInterval：{{ computedTime }}ms</p>
     <div style="margin-right: 8px;">
       <vhp-button @click="start()">Start</vhp-button>
@@ -16,7 +16,7 @@
   import { useRequest } from 'vue-hooks-plus'
 
   function getUsername(): Promise<string> {
-    return new Promise((resolve, reject) => {
+    return new Promise(resolve => {
       setTimeout(() => {
         resolve(String(Date.now()))
       }, 1000)

docs/en/hooks/useRequest/plugin.md

@@ -74,7 +74,7 @@ interface UseRequestPluginReturn<TData, TParams extends any[]> {
     servicePromise?: Promise<TData>
   }
 
-  onSuccess?: (data: TData, params: TParams) => void
+  onSuccess?: (data: TData, params: TParams, origin: Origin) => void
   onError?: (e: Error, params: TParams) => void
   onFinally?: (params: TParams, data?: TData, e?: Error) => void
   onCancel?: () => void

docs/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist", //输出文件
+    "lib": ["esnext", "dom"],
+    "baseUrl": "./",
+    "rootDir": "./",
+    "types": ["node", "vitest", "vitest/globals"],
+    "paths": {
+      "vue-hooks-plus": ["../packages/hooks/src/index.ts"]
+    }
+  },
+  "include": ["src/**/*.ts", "demo/**/*.vue", "docs/global.d.ts"],
+  "exclude": ["node_modules", "dist", "lib", "es", "example", "test-utils/*"]
+}

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-hooks-plus",
-	"version": "2.3.0-beta.5",
+	"version": "2.3.0-beta.6",
 	"description": "Vue hooks library",
 	"files": [
 		"dist",

packages/hooks/src/useRequest/Fetch.ts

@@ -166,15 +166,17 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
         // Format data
         const formattedResult = this.options.formatResult ? this.options.formatResult(res) : res
 
+        const origin = {
+          data: res,
+        }
         this.setState({
           data: formattedResult,
           error: undefined,
           loading: false,
         })
         // Request successful
         this.options.onSuccess?.(formattedResult, params)
-
-        this.runPluginHandler('onSuccess', formattedResult, params)
+        this.runPluginHandler('onSuccess', formattedResult, params, origin)
 
         this.previousValidData = formattedResult
 

packages/hooks/src/useRequest/types.ts

@@ -8,11 +8,24 @@ export type UseRequestService<TData, TParams extends unknown[]> = (
 
 export type UseRequestSubscribe = () => void
 
+export type UseRequestOrigin<TData = unknown> = {
+  data: TData
+}
+
+export type UseRequestOriginSnapshot<TData, TParams extends unknown[]> = {
+  loading: boolean
+  params?: TParams
+  originData?: TData
+  formatData?: TData
+  error?: Error | unknown
+}
+
 export interface UseRequestFetchState<TData, TParams extends unknown[]> {
   loading: boolean
   params?: TParams
   data?: TData
   error?: Error | unknown
+  snapshot?: UseRequestOriginSnapshot<TData, TParams>
 }
 
 export interface UseRequestPluginReturn<TData, TParams extends unknown[]> {
@@ -21,9 +34,9 @@ export interface UseRequestPluginReturn<TData, TParams extends unknown[]> {
     params: TParams,
   ) =>
     | ({
-        stopNow?: boolean
-        returnNow?: boolean
-      } & Partial<UseRequestFetchState<TData, TParams>>)
+      stopNow?: boolean
+      returnNow?: boolean
+    } & Partial<UseRequestFetchState<TData, TParams>>)
     | void
 
   onRequest?: (
@@ -32,8 +45,14 @@ export interface UseRequestPluginReturn<TData, TParams extends unknown[]> {
   ) => {
     servicePromise?: Promise<TData>
   }
-
-  onSuccess?: (data: TData, params: TParams) => void
+  /**
+   * 
+   * @param data Request result data or format data
+   * @param params Maually set the request params.
+   * @param origin Before format origin { data: TData }
+   * @returns Void
+   */
+  onSuccess?: (data: TData, params: TParams, origin: UseRequestOrigin) => void
   onError?: (e: Error, params: TParams) => void
   onFinally?: (params: TParams, data?: TData, e?: Error) => void
   onCancel?: () => void
@@ -300,12 +319,12 @@ export interface useRequestResult<
   data: Readonly<
     Ref<
       FormatResult extends false
-        ? Initial extends false
-          ? TData | undefined
-          : TData
-        : FormatResult extends (...args: any[]) => any
-        ? ReturnType<FormatResult> | undefined
-        : FormatResult | undefined
+      ? Initial extends false
+      ? TData | undefined
+      : TData
+      : FormatResult extends (...args: any[]) => any
+      ? ReturnType<FormatResult> | undefined
+      : FormatResult | undefined
     >
   >