fix: fix bug #246; fix useDebouncePlugin and useThrottlePlugin some problems

Author: XiaoDaiGua-Ray

packages/hooks/src/useRequest/plugins/useDebouncePlugin.ts

@@ -1,66 +1,60 @@
-import { ref, computed, watchEffect, unref } from "vue";
-import type { DebouncedFunc, DebounceSettings } from "lodash";
-import debounce from "lodash/debounce";
-import type { UseRequestPlugin } from "../types";
+import { ref, computed, watchEffect, unref,  } from "vue"
+import debounce from "lodash/debounce"
+import type { UseRequestPlugin } from "../types"
+import type { DebouncedFunc, DebounceSettings } from 'lodash'
 
 const useDebouncePlugin: UseRequestPlugin<unknown, unknown[]> = (
   fetchInstance,
-  { debounceWait, debounceLeading, debounceTrailing, debounceMaxWait }
+  { debounceWait, debounceLeading, debounceTrailing, debounceMaxWait },
 ) => {
-  const debouncedRef = ref<DebouncedFunc<any>>();
+  const debouncedRef = ref<DebouncedFunc<any>>()
+
   const options = computed(() => {
-    const ret: DebounceSettings = {};
-    const debounceLeading_ = unref(debounceLeading)
-    const debounceTrailing_ = unref(debounceTrailing)
-    const debounceMaxWait_ = unref(debounceMaxWait)
-    if (debounceLeading_ !== undefined) {
-      ret.leading = debounceLeading_;
-    }
-    if (debounceTrailing_ !== undefined) {
-      ret.trailing = debounceTrailing_
-    }
-    if (debounceMaxWait_ !== undefined) {
-      ret.maxWait = debounceMaxWait_;
+    const ops: DebounceSettings = {
+      leading: unref(debounceLeading),
+      trailing: unref(debounceTrailing),
+      maxWait: unref(debounceMaxWait),
     }
-    return ret;
-  });
 
-  watchEffect((onInvalidate) => {
+    return ops
+  })
+
+  watchEffect(onInvalidate => {
     if (unref(debounceWait)) {
-      const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance);
+      const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance)
+
       debouncedRef.value = debounce(
-        (callback: () => void) => {
-          callback();
-        },
-        unref(debounceWait),
-        options.value
-      );
-      fetchInstance.runAsync = (...args) => {
-        return new Promise((resolve, reject) => {
-          debouncedRef.value?.(() => {
+        (...args: any[]) => {
+          return new Promise((resolve, reject) => {
             _originRunAsync(...args)
               .then(resolve)
-              .catch(reject);
-          });
-        });
-      };
+              .catch(reject)
+          })
+        },
+        unref(debounceWait),
+        options.value,
+      )
+
       onInvalidate(() => {
-        debouncedRef.value?.cancel();
-        fetchInstance.runAsync = _originRunAsync;
-      });
+        debouncedRef.value?.cancel()
+      })
     }
-  });
+  })
 
   if (!unref(debounceWait)) {
-    return {};
+    return {
+      name: 'debouncePlugin',
+    }
   }
 
   return {
-    name: "debouncePlugin",
+    name: 'debouncePlugin',
     onCancel: () => {
-      debouncedRef.value?.cancel();
+      // 取消时同时执行 cancel 和 flush，确保不会有遗留的防抖函数
+      debouncedRef.value?.cancel()
+      debouncedRef.value?.flush()
     },
-  };
-};
+  }
+}
 
-export default useDebouncePlugin;
+export default useDebouncePlugin

packages/hooks/src/useRequest/plugins/useThrottlePlugin.ts

@@ -1,4 +1,4 @@
-import { computed, unref, watchEffect } from 'vue'
+import { computed, unref, watchEffect, ref } from 'vue'
 import { type DebouncedFunc, type ThrottleSettings } from 'lodash'
 import throttle from 'lodash/throttle'
 import { UseRequestPlugin } from '../types'
@@ -8,51 +8,46 @@ const useThrottlePlugin: UseRequestPlugin<unknown, unknown[]> = (
   { throttleWait, throttleLeading, throttleTrailing },
 ) => {
   const options = computed(() => {
-    const ret: ThrottleSettings = {}
-    if (unref(throttleLeading) !== undefined) {
-      ret.leading = unref(throttleLeading)
+    const ops: ThrottleSettings = {
+      leading: unref(throttleLeading),
+      trailing: unref(throttleTrailing),
     }
-    if (unref(throttleTrailing) !== undefined) {
-      ret.trailing = unref(throttleTrailing)
-    }
-    return ret
+
+    return ops
   })
 
-  const throttledRef = computed<DebouncedFunc<any>>(() =>
-    throttle(
-      (callback: () => void) => {
-        callback()
-      },
-      unref(throttleWait),
-      options.value,
-    ),
-  )
+  const throttledRef = ref<DebouncedFunc<any>>()
 
   watchEffect(onInvalidate => {
     if (unref(throttleWait)) {
       const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance)
-      fetchInstance.runAsync = (...args) => {
-        return new Promise((resolve, reject) => {
-          throttledRef.value?.(() => {
+
+      throttledRef.value = throttle(
+        (...args: any[]) => {
+          return new Promise((resolve, reject) => {
             _originRunAsync(...args)
               .then(resolve)
               .catch(reject)
           })
-        })
-      }
+        },
+        unref(throttleWait),
+        options.value,
+      )
+
       onInvalidate(() => {
-        fetchInstance.runAsync = _originRunAsync
         throttledRef.value?.cancel()
       })
     }
   })
 
   if (!unref(throttleWait)) {
-    return {}
+    return {
+      name: 'throttlePlugin',
+    }
   }
 
   return {
-    name: "throttlePlugin",
+    name: 'throttlePlugin',
     onCancel: () => {
       throttledRef.value?.cancel()
     },