feat: add client side watch (#80)

Add client side `refresh` and `execute`, watch options.

Author: xjccc

playground/pages/test-reactive.vue

@@ -7,10 +7,7 @@
       点击加载
     </button>
     <button
-      @click="async () => {
-        _refresh()
-        console.log('重置')
-      }"
+      @click="refresh"
     >
       重置
     </button>
@@ -24,20 +21,22 @@ import * as API from '../api'
 const page = ref(1)
 const list = ref<number[]>([])
 const num = ref<number>()
-let _refresh = () => {}
-const getList = async () => {
-  const { data, refresh, pending, error, status } = await API.getListReactive(page)
-  watch(() => data.value, () => {
-    if (page.value === 1) {
-      list.value = data.value?.data || []
-    }
-    else {
-      list.value = list.value.concat(data.value?.data || [])
-    }
-  })
-  _refresh = refresh
-  console.log(data.value, pending.value, error.value, status.value, 'data =====>')
-}
+const { data, refresh, pending, error, status } = await API.getListReactive(page)
+
+watch(() => data.value, async () => {
+  await nextTick()
+  console.log(data.value)
+
+  if (page.value === 1) {
+    list.value = data.value?.data || []
+  }
+  else {
+    list.value = list.value.concat(data.value?.data || [])
+  }
+}, {
+  immediate: true
+})
+console.log(data.value, pending.value, error.value, status.value, 'data =====>')
 
 const getNum = async () => {
   const { data, refresh, pending, error, status } = await API.getNum(page.value)
@@ -48,7 +47,6 @@ const getNum = async () => {
   }
 }
 
-await getList()
 await getNum()
 
 onMounted(async () => {

src/runtime/ajax.ts

@@ -2,7 +2,7 @@ import type { MaybeRef, Ref } from '#imports'
 import type { NitroFetchRequest } from 'nitro'
 import type { AsyncData, AsyncDataOptions, AsyncDataRequestStatus, NuxtError } from 'nuxt/app'
 import type { FetchContext, FetchMethod, FetchResponse, HTTPConfig, Interceptors, KeysOf, PickFrom } from './type'
-import { createError, reactive, ref, toValue, unref, useAsyncData, useNuxtApp } from '#imports'
+import { createError, getCurrentScope, onScopeDispose, reactive, ref, toValue, unref, useAsyncData, useNuxtApp, useRequestFetch, watch } from '#imports'
 import { hash, serialize } from 'ohash'
 
 type CustomFetchReturnValue<DataT, ErrorT> = AsyncData<PickFrom<DataT, KeysOf<DataT>> | null, (ErrorT extends Error | NuxtError<unknown> ? ErrorT : NuxtError<ErrorT>) | null>
@@ -171,7 +171,7 @@ export class CustomFetch {
         _cachedController.get(key)?.abort?.()
       }
 
-      return $fetch(url as string, {
+      return useRequestFetch()(url as string, {
         signal: _cachedController.get(key)?.signal,
         ...defaultOptions,
         ..._config
@@ -192,6 +192,8 @@ export class CustomFetch {
         pending: Ref<boolean>
         error: Ref<(ErrorT extends Error | NuxtError<unknown> ? ErrorT : NuxtError<ErrorT>) | null>
         status: Ref<AsyncDataRequestStatus>
+        refresh?: () => Promise<DataT>
+        execute?: () => Promise<DataT>
       } = {
         data: ref(null),
         pending: ref(true),
@@ -235,6 +237,18 @@ export class CustomFetch {
           asyncData.pending.value = false
           _cachedController.delete(key)
         })
+
+      asyncData.refresh = asyncData.execute = () => _handler().then(result => asyncData.data.value = result)
+      const hasScope = getCurrentScope()
+      if (options.watch) {
+        const unsub = watch(options.watch, async () => {
+          asyncData.refresh!()
+        })
+        if (hasScope) {
+          onScopeDispose(unsub)
+        }
+      }
+
       return promise as any
     }