fix: auto deps

Author: NelsonYong

.gitignore

@@ -3,6 +3,7 @@ dist
 .DS_Store
 .cache
 .temp
+.vitepress
 coverage
 
 

packages/hooks/src/useRequest/docs/refreshDeps/demo/demo1.vue

@@ -66,7 +66,7 @@
           storeId,
           count,
         })
-      }, 1000)
+      }, 3000)
     })
   }
   const id = ref(1)
@@ -75,7 +75,7 @@
   })
   const count = ref(0)
 
-  const ready = computed(() => count.value !== 0 && count.value !== 5)
+  const ready = computed(() => count.value !== 0)
   const { data, loading } = useRequest(
     () => getUsername({ id: id.value, storeId: store.id, count: count.value }),
     {
@@ -86,9 +86,9 @@
         storeId: '-',
       },
       ready,
-      pollingInterval: 3000,
-      pollingWhenHidden: false,
+      debounceWait: 2000,
       refreshDeps: true,
+      debugKey: 'test',
     },
   )
 </script>

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

@@ -1,14 +1,13 @@
-import { ref, computed, watchEffect, unref,  } from "vue"
-import debounce from "lodash/debounce"
+import { computed, watchEffect, unref, } from "vue"
 import type { UseRequestPlugin } from "../types"
-import type { DebouncedFunc, DebounceSettings } from 'lodash'
+import type { DebounceSettings } from 'lodash'
+import useDebounceFn from "../../useDebounceFn"
+
 
 const useDebouncePlugin: UseRequestPlugin<unknown, unknown[]> = (
   fetchInstance,
   { debounceWait, debounceLeading, debounceTrailing, debounceMaxWait },
 ) => {
-  const debouncedRef = ref<DebouncedFunc<any>>()
-
   const options = computed(() => {
     const ops: DebounceSettings = {
       leading: unref(debounceLeading),
@@ -19,24 +18,23 @@ const useDebouncePlugin: UseRequestPlugin<unknown, unknown[]> = (
     return ops
   })
 
+  const { run, cancel, flush } = useDebounceFn(callback => {
+    callback()
+    unref(debounceWait) ?? 0,
+      options.value
+  })
+
   watchEffect(onInvalidate => {
     if (unref(debounceWait)) {
       const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance)
-
-      debouncedRef.value = debounce(
-        (...args: any[]) => {
-          return new Promise((resolve, reject) => {
-            _originRunAsync(...args)
-              .then(resolve)
-              .catch(reject)
-          })
-        },
-        unref(debounceWait),
-        options.value,
-      )
-
+      fetchInstance.runAsync = (...args) => {
+        return new Promise((resolve, reject) => {
+          run(() => _originRunAsync(...args).then(resolve).catch(reject))
+        })
+      }
       onInvalidate(() => {
-        debouncedRef.value?.cancel()
+        cancel()
+        fetchInstance.runAsync = _originRunAsync
       })
     }
   })
@@ -51,8 +49,8 @@ const useDebouncePlugin: UseRequestPlugin<unknown, unknown[]> = (
     name: 'debouncePlugin',
     onCancel: () => {
       // 取消时同时执行 cancel 和 flush，确保不会有遗留的防抖函数
-      debouncedRef.value?.cancel()
-      debouncedRef.value?.flush()
+      cancel()
+      flush()
     },
   }
 }

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

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

packages/hooks/src/useRequest/useRequestImplement.ts

@@ -1,4 +1,4 @@
-import { ref, reactive, toRefs, onScopeDispose, inject, UnwrapRef, watchEffect, computed, isRef, unref } from 'vue'
+import { ref, reactive, toRefs, onScopeDispose, inject, UnwrapRef, computed, isRef, unref, watch } from 'vue'
 import Fetch from './Fetch'
 import { USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY } from './config'
 import {
@@ -82,14 +82,20 @@ function useRequestImplement<TData, TParams extends any[]>(
 
   const readyComputed = computed(() => isRef(ready) ? ready.value : ready)
 
-  watchEffect(() => {
-    if (!manual) {
+  const run = fetchInstance.run.bind(fetchInstance)
+
+  // watch ready and service, auto collect dependencies
+  // because service is ref value, so we need watch it, he reference will change when service change
+  watch([readyComputed, serviceRef.value], (cur) => {
+    const ready = cur[0]
+    console.log("zhix", ready);
+
+    if (ready && !manual && fetchInstance.options.refreshDeps === true) {
       const params = fetchInstance.state.params || options.defaultParams || []
-      // auto collect
-      if (readyComputed.value && fetchInstance.options.refreshDeps === true && !!serviceRef.value) {
-        fetchInstance.run(...(params as TParams))
-      }
+      run(...(params as TParams))
     }
+  }, {
+    immediate: true,
   })
 
   // manual
@@ -108,7 +114,7 @@ function useRequestImplement<TData, TParams extends any[]>(
     cancel: fetchInstance.cancel.bind(fetchInstance),
     refresh: fetchInstance.refresh.bind(fetchInstance),
     refreshAsync: fetchInstance.refreshAsync.bind(fetchInstance),
-    run: fetchInstance.run.bind(fetchInstance),
+    run,
     runAsync: fetchInstance.runAsync.bind(fetchInstance),
     mutate: fetchInstance.mutate.bind(fetchInstance),
   } as unknown) as useRequestResult<TData, TParams>

packages/hooks/src/useThrottle/index.ts

@@ -8,25 +8,11 @@ export interface UseThrottleOptions {
 }
 
 function useThrottle<T>(value: Ref<T>, options?: UseThrottleOptions) {
-  const throttled = ref()
+  const throttled = ref<T>(value.value) as Ref<T>;
+  const { run } = useThrottleFn(() => (throttled.value = value.value), options);
+  watch(value, () => run(), { deep: true });
+  return throttled;
 
-  throttled.value = value.value
-
-  const { run } = useThrottleFn(() => {
-    throttled.value = value.value
-  }, options)
-
-  watch(
-    value,
-    () => {
-      run.value()
-    },
-    {
-      immediate: true,
-    },
-  )
-
-  return throttled
 }
 
 export default useThrottle

packages/hooks/src/useThrottleFn/index.ts

@@ -1,32 +1,17 @@
 import throttle from 'lodash/throttle'
-import { onUnmounted, ref, computed } from 'vue'
 import { UseThrottleOptions } from '../useThrottle'
 
 type noop = (...args: any) => any
 
 function useThrottleFn<T extends noop>(fn: T, options?: UseThrottleOptions) {
-  const fnRef = ref(fn)
 
   const wait = options?.wait ?? 1000
-
-  const throttled = computed(() =>
-    throttle(
-      (...args: Parameters<T>): ReturnType<T> => {
-        return fnRef.value([...args])
-      },
-      wait,
-      options,
-    ),
-  )
-
-  onUnmounted(() => {
-    throttled.value.cancel()
-  })
+  const throttled = throttle(fn, wait, options)
 
   return {
     run: throttled,
-    cancel: throttled.value.cancel,
-    flush: throttled.value.flush,
+    cancel: throttled.cancel,
+    flush: throttled.flush,
   }
 }