Merge pull request #46 from InhiblabCore/dev

fix: use-request throttled & debounce dynamic

Author: inhiblab

packages/hooks/package.json

@@ -27,7 +27,7 @@
     "docs:build-github": "cross-env BASE_URL=/docs/hooks FLOW=github vhp-vitepress build .docs",
     "docs:build-gitee": "cross-env BASE_URL=/docs/hooks FLOW=gitee vhp-vitepress build .docs",
 		"docs:serve": "vitepress serve .docs --host",
-		"clean": "rimraf dist lib es",
+		"clean": "rimraf dist lib es types",
 		"build": "npm run clean  && vue-tsc --noEmit && vite build",
 		"build:types": "vue-tsc --noEmit && vite build --mode fullTypes",
 		"type": "tsc -d"

packages/hooks/src/useFetchs/index.ts

@@ -1,5 +1,5 @@
 import { ref, UnwrapRef, watch, watchEffect } from 'vue'
-import { Service, Options } from '@/useRequest/types'
+import { Service, Options } from '../useRequest/types'
 import useRequest from '../useRequest'
 
 const DEFAULT_KEY = 'VUE_HOOKS_PLUS_USE_REQUEST_DEFAULT_KEY'

packages/hooks/src/useRequest/docs/throttle/demo/demo.vue

@@ -1,31 +1,39 @@
 <template>
-	<div style="margin-top: 16px;"><input type="text" v-model="text" /></div>
-	<div style="margin-top: 16px;">读取值：{{ data }}</div>
+  <div style="margin-top: 16px;"><input type="text" v-model="text"></div>
+  <div style="margin-top: 16px;">读取值：{{ data }}</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+  import { ref, watch } from 'vue'
 
-import { useRequest } from 'vue-hooks-plus'
+  import { useRequest, useTimeout } from 'vue-hooks-plus'
 
-function getUsername(): Promise<string> {
-	return new Promise((resolve, reject) => {
-		setTimeout(() => {
-			resolve(`${String(Date.now())}`)
-		}, 1000)
-	})
-}
+  function getUsername(): Promise<string> {
+    console.log('发送请求')
 
-const text = ref('')
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(`${String(Date.now())}`)
+      }, 1000)
+    })
+  }
 
-const { data, run } = useRequest(() => getUsername(), {
-	throttleWait: 300,
-	manual: true,
-})
+  const text = ref('')
 
-watch(text, () => {
-	run()
-})
+  const throttleWait = ref(500)
+
+  useTimeout(() => {
+    throttleWait.value = 3000
+  }, 2000)
+
+  const { data, run } = useRequest(() => getUsername(), {
+    throttleWait,
+    manual: true,
+  })
+
+  watch(text, () => {
+    run()
+  })
 </script>
 
 <style scoped lang="less"></style>

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

@@ -26,13 +26,13 @@ const useDebouncePlugin: Plugin<any, any[]> = (
   });
 
   watchEffect((onInvalidate) => {
-    if (debounceWait) {
+    if (unref(debounceWait)) {
       const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance);
       debouncedRef.value = debounce(
         (callback: any) => {
           callback();
         },
-        debounceWait,
+        unref(debounceWait),
         options.value
       );
       fetchInstance.runAsync = (...args) => {
@@ -51,7 +51,7 @@ const useDebouncePlugin: Plugin<any, any[]> = (
     }
   });
 
-  if (!debounceWait) {
+  if (!unref(debounceWait)) {
     return {};
   }
 

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

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

packages/hooks/src/useRequest/types.ts

@@ -68,15 +68,15 @@ export type Options<TData, TParams extends any[], TPlugin> = {
   focusTimespan?: Ref<number> | number
 
   // 防抖
-  debounceWait?: number
-  debounceLeading?: Ref<boolean>
-  debounceTrailing?: Ref<boolean>
+  debounceWait?: Ref<number> | number
+  debounceLeading?: Ref<boolean> | boolean
+  debounceTrailing?: Ref<boolean> | boolean
   debounceMaxWait?: Ref<number>
 
   // 节流
-  throttleWait?: number
-  throttleLeading?: Ref<boolean>
-  throttleTrailing?: Ref<boolean>
+  throttleWait?: Ref<number> | number
+  throttleLeading?: Ref<boolean> | boolean
+  throttleTrailing?: Ref<boolean> | boolean
 
   // 请求缓存
   cacheKey?: string