feat: use-request image v1.2.0

Author: NelsonYong

packages/use-request/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-hooks-plus/use-request",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Vue use-request hooks library",
 	"files": [
 		"dist",

packages/use-request/src/Fetch.ts

@@ -21,7 +21,10 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
   constructor(
     public serviceRef: Ref<UseRequestService<TData, TParams>>,
     public options: UseRequestOptions<TData, TParams, any>,
-    public setUpdateData: (s: any, key?: keyof UseRequestFetchState<TData, TParams>) => void,
+    public setUpdateData: (
+      currentState: unknown,
+      key?: keyof UseRequestFetchState<TData, TParams>,
+    ) => void,
     public initState: Partial<UseRequestFetchState<TData, TParams>> = {},
   ) {
     this.state = {
@@ -32,38 +35,61 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
   }
 
   // 设置state
-  setState(s: Partial<UseRequestFetchState<TData, TParams>> = {}) {
+  setState(currentState: Partial<UseRequestFetchState<TData, TParams>> = {}) {
     this.state = {
       ...this.state,
-      ...s,
+      ...currentState,
     }
     this.setUpdateData(this.state)
   }
 
   /**
-   *
-   * @param data Result value `any`
+   * should rename
+   * @param data Result value `unknown`
    * @param key Result key `data`| `params` | `loading`| `error`
    */
   setData(
-    data: any,
+    data: unknown,
+    key?:
+      | keyof UseRequestFetchState<TData, TParams>
+      | (keyof UseRequestFetchState<TData, TParams>)[],
+  ) {
+    console.warn("Please use 'setFetchState' instead of 'setData'")
+    if (key instanceof Array) {
+      key.forEach(k => {
+        this.state[k as keyof UseRequestFetchState<TData, TParams>] = data as any
+        this.setUpdateData(data, k)
+      })
+    } else {
+      this.state[key as keyof UseRequestFetchState<TData, TParams>] = data as any
+      this.setUpdateData(data, key)
+    }
+  }
+
+  /**
+   *
+   * @param data Result value `unknown`
+   * @param key Result key `data`| `params` | `loading`| `error`
+   */
+  setFetchState(
+    data: unknown,
     key?:
       | keyof UseRequestFetchState<TData, TParams>
       | (keyof UseRequestFetchState<TData, TParams>)[],
   ) {
     if (key instanceof Array) {
       key.forEach(k => {
-        this.state[k as keyof UseRequestFetchState<TData, TParams>] = data
+        this.state[k as keyof UseRequestFetchState<TData, TParams>] = data as any
         this.setUpdateData(data, k)
       })
     } else {
-      this.state[key as keyof UseRequestFetchState<TData, TParams>] = data
+      this.state[key as keyof UseRequestFetchState<TData, TParams>] = data as any
       this.setUpdateData(data, key)
     }
   }
 
   // 遍历需要运行的插件，是一个回调函数，供插件获取fetch实例和在对应节点执行插件逻辑
-  runPluginHandler(event: keyof UseRequestPluginReturn<TData, TParams>, ...rest: any[]) {
+  runPluginHandler(event: keyof UseRequestPluginReturn<TData, TParams>, ...rest: unknown[]) {
     // @ts-ignore
     const r = (this.pluginImpls?.map(i => i[event]?.(...rest)) ?? [])?.filter(Boolean)
     // @ts-ignore
@@ -102,7 +128,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
       // replace service 开始请求，如果含有onRequest事件名
       let { servicePromise } = this.runPluginHandler('onRequest', this.serviceRef.value, params)
 
-      const requestReturn = (res: any) => {
+      const requestReturnResponse = (res: any) => {
         // 取消了请求，count将与currentCount不一致，将发送空请求
         if (currentCount !== this.count) {
           return new Promise(() => {})
@@ -135,18 +161,18 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
         if (!this.options.manual && this.options.refreshDeps === true) {
           watchEffect(async () => {
             if (unref(this.options.ready)) {
-              this.setData(true, 'loading')
+              this.setFetchState(true, 'loading')
               servicePromise = this.serviceRef.value(...params)
-              const res = await servicePromise
-              return requestReturn(res)
+              const servicePromiseResult = await servicePromise
+              return requestReturnResponse(servicePromiseResult)
             }
           })
         } else {
           servicePromise = this.serviceRef.value(...params)
         }
       }
-      const res = await servicePromise
-      return requestReturn(res)
+      const servicePromiseResult = await servicePromise
+      return requestReturnResponse(servicePromiseResult)
     } catch (error) {
       if (currentCount !== this.count) {
         return new Promise(() => {})

packages/use-request/src/plugins/useDebouncePlugin.ts

@@ -29,7 +29,7 @@ const useDebouncePlugin: UseRequestPlugin<unknown, unknown[]> = (
     if (unref(debounceWait)) {
       const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance);
       debouncedRef.value = debounce(
-        (callback: any) => {
+        (callback: () => void) => {
           callback();
         },
         unref(debounceWait),

packages/use-request/src/plugins/useThrottlePlugin.ts

@@ -20,7 +20,7 @@ const useThrottlePlugin: UseRequestPlugin<unknown, unknown[]> = (
 
   const throttledRef = computed<DebouncedFunc<any>>(() =>
     throttle(
-      (callback: any) => {
+      (callback: () => void) => {
         callback()
       },
       unref(throttleWait),

packages/use-request/src/useRequestImplement.ts

@@ -1,8 +1,28 @@
-import { ref, reactive, toRefs, onMounted, onUnmounted, unref, inject } from 'vue'
+import { ref, reactive, toRefs, onMounted, onUnmounted, unref, inject, UnwrapRef } from 'vue'
 
 import Fetch from './Fetch'
 import { USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY } from './config'
-import { UseRequestOptions, UseRequestPlugin, useRequestResult, UseRequestService } from './types'
+import {
+  UseRequestFetchState,
+  UseRequestOptions,
+  UseRequestPlugin,
+  useRequestResult,
+  UseRequestService,
+} from './types'
+
+function isUseRequestFetchState<TData, TParams extends any[]>(
+  state: unknown,
+): state is UseRequestFetchState<TData, TParams> {
+  const keys = Object.keys(state as object)
+  return keys.filter(i => ['data', 'loading', 'params', 'error'].includes(i)).length === 4
+}
+
+// function isUseRequestFetchStateKey<TData, TParams extends any[]>(
+//   field: string,
+//   state: unknown,
+// ): state is UseRequestFetchState<TData, TParams>[keyof UseRequestFetchState<TData, TParams>] {
+//   return Boolean(['data', 'loading', 'params', 'error'].find(i => i === field))
+// }
 
 function useRequestImplement<TData, TParams extends any[]>(
   service: UseRequestService<TData, TParams>,
@@ -12,12 +32,13 @@ function useRequestImplement<TData, TParams extends any[]>(
   // global option
   const USEREQUEST_GLOBAL_OPTIONS = inject<Record<string, any>>(
     USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY,
+    {},
   )
   // read option
   const { initialData = undefined, manual = false, ready = true, ...rest } = {
     ...(USEREQUEST_GLOBAL_OPTIONS ?? {}),
     ...(options ?? {}),
-  } as Record<string, any>
+  }
 
   const fetchOptions = {
     manual,
@@ -29,26 +50,26 @@ function useRequestImplement<TData, TParams extends any[]>(
   const serviceRef = ref(service)
 
   // reactive
-  const state = reactive<{
-    data?: TData
-    loading: boolean
-    params?: TParams
-    error?: Error
-  }>({
+  const state = reactive<UseRequestFetchState<TData, TParams>>({
     data: initialData,
     loading: false,
     params: undefined,
     error: undefined,
   })
 
-  const setState = (s: any, field?: keyof typeof state) => {
+  const setState = (currentState: unknown, field?: keyof typeof state) => {
     if (field) {
-      state[field] = s
+      // if (isUseRequestFetchStateKey<UnwrapRef<TData>, UnwrapRef<TParams>>(field, currentState)) {
+      //   state[field] = currentState as any
+      // }
+      state[field] = currentState as any
     } else {
-      state.data = s.data
-      state.loading = s.loading
-      state.error = s.error
-      state.params = s.params
+      if (isUseRequestFetchState<UnwrapRef<TData>, UnwrapRef<TParams>>(currentState)) {
+        state.data = currentState.data
+        state.loading = currentState.loading
+        state.error = currentState.error
+        state.params = currentState.params
+      }
     }
   }
 

packages/use-request/src/utils/isBrowser.ts

@@ -0,0 +1,7 @@
+const isBrowser = !!(
+  typeof window !== "undefined" &&
+  window.document &&
+  window.document.createElement
+);
+
+export default isBrowser;

packages/use-request/src/utils/subscribeFocus.ts

@@ -1,27 +1,32 @@
-import isDocumentVisible from "./isDocumentVisible";
-import isOnline from "./isOnline";
-import { canUseDom } from "./utils";
+// from swr
+import isBrowser from './isBrowser'
+import isDocumentVisible from './isDocumentVisible'
+import isOnline from './isOnline'
 
-const listeners: any[] = [];
+type Listener = () => void
 
-function subscribe(listener: () => void) {
-  listeners.push(listener);
+const listeners: Listener[] = []
+
+function subscribe(listener: Listener) {
+  listeners.push(listener)
   return function unsubscribe() {
-    const index = listeners.indexOf(listener);
-    listeners.splice(index, 1);
-  };
+    const index = listeners.indexOf(listener)
+    if (index > -1) {
+      listeners.splice(index, 1)
+    }
+  }
 }
 
-if (canUseDom()) {
+if (isBrowser) {
   const revalidate = () => {
-    if (!isDocumentVisible() || !isOnline()) return;
+    if (!isDocumentVisible() || !isOnline()) return
     for (let i = 0; i < listeners.length; i++) {
-      const listener = listeners[i];
-      listener();
+      const listener = listeners[i]
+      listener()
     }
-  };
-  window.addEventListener("visibilitychange", revalidate, false);
-  window.addEventListener("focus", revalidate, false);
+  }
+  window.addEventListener('visibilitychange', revalidate, false)
+  window.addEventListener('focus', revalidate, false)
 }
 
-export default subscribe;
+export default subscribe