fix: use-request auto deps refresh plugins invalid

Author: NelsonYong

packages/hooks/src/useRequest/Fetch.ts

@@ -1,4 +1,4 @@
-import { Ref, unref, watchEffect } from 'vue'
+import { Ref } from 'vue'
 import {
   UseRequestFetchState,
   UseRequestOptions,
@@ -107,7 +107,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
     )
     // 是否停止请求
     if (stopNow) {
-      return new Promise(() => {})
+      return new Promise(() => { })
     }
 
     this.setState({
@@ -131,7 +131,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
       const requestReturnResponse = (res: any) => {
         // 取消了请求，count将与currentCount不一致，将发送空请求
         if (currentCount !== this.count) {
-          return new Promise(() => {})
+          return new Promise(() => { })
         }
         // 格式化数据
         const formattedResult = this.options.formatResult ? this.options.formatResult(res) : res
@@ -158,24 +158,26 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
 
       if (!servicePromise) {
         /** 自动依赖收集 */
-        if (!this.options.manual && this.options.refreshDeps === true) {
-          watchEffect(async () => {
-            if (unref(this.options.ready)) {
-              this.setFetchState(true, 'loading')
-              servicePromise = this.serviceRef.value(...params)
-              const servicePromiseResult = await servicePromise
-              return requestReturnResponse(servicePromiseResult)
-            }
-          })
-        } else {
-          servicePromise = this.serviceRef.value(...params)
-        }
+        // if (!this.options.manual && this.options.refreshDeps === true) {
+        //   watchEffect(async () => {
+        //     if (unref(this.options.ready)) {
+        //       this.setFetchState(true, 'loading')
+        //       servicePromise = this.serviceRef.value(...params)
+        //       const servicePromiseResult = await servicePromise
+        //       return requestReturnResponse(servicePromiseResult)
+        //     }
+        //   })
+        // } else {
+        //   servicePromise = this.serviceRef.value(...params)
+        // }
+        servicePromise = this.serviceRef.value(...params)
       }
+      // servicePromise = this.serviceRef.value(...params)
       const servicePromiseResult = await servicePromise
       return requestReturnResponse(servicePromiseResult)
     } catch (error) {
       if (currentCount !== this.count) {
-        return new Promise(() => {})
+        return new Promise(() => { })
       }
 
       this.setState({

packages/hooks/src/useRequest/docs/cache/demo/demo4.vue

@@ -27,7 +27,7 @@
     staleTime: 5000,
 
     setCache: res => {
-      localStorage.setItem(cacheKey, `${res.data}`)
+      localStorage.setItem(cacheKey, JSON.stringify(res.data))
     },
     getCache: () => {
       return JSON.parse(localStorage.getItem(cacheKey) ?? '{}')

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

@@ -35,7 +35,15 @@
           }, 1000)
         })
       }
-      const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
+      const { data, loading } = useRequest(() => getUsername({ desc: 'good' }), {
+        // manual: true,
+        onSuccess: res => {
+          // debugger
+          console.log(res)
+        },
+      })
+
+      // run()
       return () => {
         return h('div', {}, [
           h('h3', 'demo2'),

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

@@ -58,6 +58,8 @@
     storeId: number | string
     count: number | string
   }> {
+    console.log('request')
+
     return new Promise(resolve => {
       setTimeout(() => {
         resolve({
@@ -75,7 +77,7 @@
   })
   const count = ref(0)
 
-  const ready = computed(() => count.value !== 0 && count.value !== 5)
+  const ready = computed(() => count.value !== undefined)
   const { data, loading } = useRequest(
     () => getUsername({ id: id.value, storeId: store.id, count: count.value }),
     {
@@ -87,6 +89,7 @@
       },
       ready,
       refreshDeps: true,
+      debounceWait: 1000,
     },
   )
 </script>

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

@@ -10,7 +10,8 @@ const usePollingPlugin: UseRequestPlugin<unknown, unknown[]> = (
   const timerRef = ref<Interval>();
   const unsubscribeRef = ref<() => void>();
   const countRef = ref<number>(0);
-  
+
+
 
   const stopPolling = () => {
     if (timerRef.value) {
@@ -33,7 +34,7 @@ const usePollingPlugin: UseRequestPlugin<unknown, unknown[]> = (
     onBefore: () => {
       stopPolling();
     },
-     onError: () => {
+    onError: () => {
       countRef.value += 1;
     },
     onSuccess: () => {

packages/hooks/src/useRequest/useRequestImplement.ts

@@ -1,4 +1,4 @@
-import { ref, reactive, toRefs, onMounted, onUnmounted, unref, inject, UnwrapRef } from 'vue'
+import { ref, reactive, toRefs, onUnmounted, inject, UnwrapRef, watchEffect, computed, isRef, onMounted, unref } from 'vue'
 
 import Fetch from './Fetch'
 import { USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY } from './config'
@@ -89,6 +89,27 @@ function useRequestImplement<TData, TParams extends any[]>(
     return p(fetchInstance, fetchOptions)
   })
 
+  const readyComputed = computed(() => isRef(ready) ? ready.value : ready)
+
+  // const isMount = ref(false)
+
+  watchEffect(() => {
+    if (!manual) {
+      const params = fetchInstance.state.params || options.defaultParams || []
+      // if (readyComputed.value && !isMount.value) {
+      //   fetchInstance.run(...(params as TParams))
+      //   // 模拟首次mount
+      //   isMount.value = true
+
+      // }
+      // 自动收集依赖
+      if (readyComputed.value && fetchInstance.options.refreshDeps === true && !!serviceRef.value) {
+        console.log("运行1");
+        fetchInstance.run(...(params as TParams))
+      }
+    }
+  })
+
   // manual
   onMounted(() => {
     if (!manual) {