feat: ✨ use-request support provider option & optimized code

feat: use-request support provider option & optimized code

Author: inhiblab

packages/hooks/docs/.vitepress/router.ts

@@ -151,9 +151,13 @@ const useRequestRouter = [
         link: '/useRequest/scroll/',
       },
       {
-        text: '插件',
+        text: '插件设计',
         link: '/useRequest/plugin/',
       },
+      {
+        text: '全局配置',
+        link: '/useRequest/global/',
+      },
     ],
   },
 ]
@@ -220,9 +224,13 @@ const useRequestRouterEN = [
         link: '/en/useRequest/scroll/',
       },
       {
-        text: 'Plugins',
+        text: 'Plugins Design',
         link: '/en/useRequest/plugin/',
       },
+      {
+        text: 'Global Option',
+        link: '/en/useRequest/global/',
+      },
     ],
   },
 ]

packages/hooks/src/index.ts

@@ -1,4 +1,8 @@
-import useRequest, { clearCache } from './useRequest'
+import useRequest, {
+  clearUseRequestCache,
+  createUseRequest,
+  useRequestProvider,
+} from './useRequest'
 import useAsyncOrder from './useAsyncOrder'
 import useBoolean from './useBoolean'
 import useCookieState from './useCookieState'
@@ -49,7 +53,9 @@ import useWebSocket from './useWebSocket'
 
 export {
   useRequest,
-  clearCache,
+  clearUseRequestCache,
+  useRequestProvider,
+  createUseRequest,
   useAsyncOrder,
   useBoolean,
   useCookieState,

packages/hooks/src/useRequest/config.ts

@@ -0,0 +1,26 @@
+import type { InjectionKey } from 'vue';
+
+import type { UseRequestOptions } from './types';
+
+const USEREQUEST_GLOBAL_OPTIONS:Record<string,any> = {};
+
+export const  USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY: InjectionKey<string> = Symbol(
+  'USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY',
+);
+
+export const setGlobalOptions = (config: UseRequestOptions<unknown,any,[]>) => {
+  Object.keys(config).forEach(key => {
+    USEREQUEST_GLOBAL_OPTIONS[key] = config[key as  keyof typeof config];
+  });
+};
+
+export const getGlobalOptions = () => {
+  return USEREQUEST_GLOBAL_OPTIONS;
+};
+
+export const clearGlobalOptions = () => {
+  Object.keys(USEREQUEST_GLOBAL_OPTIONS).forEach(key => {
+    delete USEREQUEST_GLOBAL_OPTIONS[key];
+  });
+};
+

packages/hooks/src/useRequest/createUseRequest.ts

@@ -0,0 +1,24 @@
+import { UseRequestOptions, UseRequestPlugin, UseRequestService } from './types'
+import useRequest from './useRequest'
+
+function createUseRequest<
+  TData,
+  TParams extends unknown[] = unknown[],
+  PluginsOptions extends UseRequestPlugin<TData, TParams>[] = UseRequestPlugin<TData, TParams>[]
+>(
+  service: UseRequestService<TData, TParams>,
+  options?: UseRequestOptions<
+    TData,
+    TParams,
+    PluginsOptions extends (infer P)[]
+      ? P extends UseRequestPlugin<TData, TParams, infer R>
+        ? R
+        : any
+      : any
+  >,
+  plugins?: PluginsOptions,
+) {
+  return useRequest<TData, TParams, PluginsOptions>(service, options, plugins)
+}
+
+export default createUseRequest

packages/hooks/src/useRequest/docs/basic/demo/Index.vue

@@ -0,0 +1,29 @@
+<template>
+  <demo />
+</template>
+
+<script lang="ts" setup>
+  import { useRequest } from 'vue-hooks-plus'
+  import { defineComponent, h } from 'vue'
+
+  const demo = defineComponent({
+    setup: () => {
+      function getUsername(params: { desc: string }): Promise<string> {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve(`vue-hooks-plus ${params.desc}`)
+          }, 1000)
+        })
+      }
+      const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
+      return () => {
+        return h('div', {}, [
+          h('div', null, loading.value ? 'loading' : data.value),
+          h('div', null, data.value),
+        ])
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,56 @@
+<template>
+  <demo1 />
+  <demo2 />
+</template>
+
+<script lang="ts" setup>
+  import { useRequest, useRequestProvider } from 'vue-hooks-plus'
+  import { defineComponent, h } from 'vue'
+
+  const demo1 = defineComponent({
+    setup: () => {
+      function getUsername(params: { desc: string }): Promise<string> {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve(`vue-hooks-plus ${params.desc}`)
+          }, 1000)
+        })
+      }
+      const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
+      return () => {
+        return h('div', {}, [
+          h('h3', 'demo1'),
+          h('div', null, loading.value ? 'loading' : data.value),
+        ])
+      }
+    },
+  })
+
+  const DemoGlobal = defineComponent({
+    setup: () => {
+      function getUsername(params: { desc: string }): Promise<string> {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve(`vue-hooks-plus ${params.desc}`)
+          }, 1000)
+        })
+      }
+      const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
+      return () => {
+        return h('div', {}, [
+          h('h3', 'demo2'),
+          h('div', null, loading.value ? 'loading' : data.value),
+        ])
+      }
+    },
+  })
+
+  const demo2 = defineComponent({
+    setup: () => {
+      useRequestProvider({ pollingInterval: 2000 })
+      return () => {
+        return h(DemoGlobal)
+      }
+    },
+  })
+</script>

packages/hooks/src/useRequest/docs/global/index.en-US.md

@@ -0,0 +1,31 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/global/
+source:
+  path: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/useRequestProvider.ts
+  demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/global/demo/demo.vue
+---
+
+# Global Option `v1.6.1`
+
+:::tip 🌍 useRequestProvider
+
+Global configuration of `useRequest` based on Provider implementation.
+
+:::
+
+After using `useRequestProvider` to inject configuration, using `useRequest` in its subcomponents will share this configuration.
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title=""
+  desc="Global configuration, after injecting pollingInterval=2000 in demo2, the request in demo2 will start polling."> </demo>
+
+## API
+
+```typescript
+import { useRequestProvider } from 'vue-hooks-plus'
+
+useRequestProvider({ ...options })
+```

packages/hooks/src/useRequest/docs/global/index.zh-CN.md

@@ -0,0 +1,31 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/global/
+source:
+  path: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/useRequestProvider.ts
+  demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/global/demo/demo.vue
+---
+
+# 全局配置 `v1.6.1`
+
+:::tip 🌍 useRequestProvider
+
+基于 Provider 实现的 `useRequest` 全局配置。
+
+:::
+
+使用了 `useRequestProvider` 注入配置后，其子组件中使用`useRequest` 会共享这份配置。
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title=""
+  desc="全局配置，demo2 中注入 pollingInterval=2000后，demo2中的请求开始轮询。"> </demo>
+
+## API
+
+```typescript
+import { useRequestProvider } from 'vue-hooks-plus'
+
+useRequestProvider({ ...options })
+```

packages/hooks/src/useRequest/docs/index.en-US.md

@@ -42,7 +42,7 @@ const { data, error, loading } = useRequest(service)
 
 <br />
 
-<demo src="./basic/demo/demo.vue"
+<demo src="./basic/demo/Index.vue"
   language="vue"
   title=""
   desc="The fetch request is sent by default"> </demo>

packages/hooks/src/useRequest/docs/index.zh-CN.md

@@ -42,7 +42,7 @@ const { data, error, loading } = useRequest(service)
 
 <br />
 
-<demo src="./basic/demo/demo.vue"
+<demo src="./basic/demo/Index.vue"
   language="vue"
   title=""
   desc="默认发送获取请求"> </demo>

packages/hooks/src/useRequest/docs/refreshDeps/index.en-US.md

@@ -13,7 +13,7 @@ source:
 
 :::tip remark
 
-When the automatic, mode `manual` is not `true` and refreshDeps  will take effect.
+When the automatic, mode `manual` is not `true` and refreshDeps will take effect.
 
 :::
 
@@ -26,7 +26,7 @@ When `refreshDeps` passes in an array of responsive objects, when its value chan
   title=""
   desc="In the example code above, useRequest will execution when it is initialized and Id & store ID changes."> </demo>
 
-## Automatically collect dependencies `>=v1.6.0-alpha.1`
+## Automatically collect dependencies `v1.6.0`
 
 When `refreshDeps` is passed in `true`, `useRequest` will automatically collect the response object parameters in the function parameters, as long as the response object in the parameters changes, it will carry the latest value to re-initiate the request.
 

packages/hooks/src/useRequest/docs/refreshDeps/index.zh-CN.md

@@ -26,7 +26,7 @@ source:
   title=""
   desc="每次参数依赖发生，都会携带参数重新发起请求"> </demo>
 
-## 自动收集依赖 `>=v1.6.0-alpha.1`
+## 自动收集依赖 `v1.6.0`
 
 当 `refreshDeps` 传入的是 `true` 的时候，`useRequest` 会自动收集函数参数中的响应式对象参数，只要参数里面的响应式对象发生变化就会携带最新的值重新发起请求 。
 

packages/hooks/src/useRequest/index.ts

@@ -1,6 +1,8 @@
-import useRequest from "./useRequest";
-import { clearCache } from "./utils/cache";
+import useRequest from './useRequest'
+import useRequestProvider from './useRequestProvider'
+import createUseRequest from './createUseRequest'
+import { clearCache as clearUseRequestCache } from './utils/cache'
 
-export { clearCache };
+export { clearUseRequestCache, createUseRequest, useRequestProvider }
 
-export default useRequest;
+export default useRequest

packages/hooks/src/useRequest/useRequestImplement.ts

@@ -1,26 +1,34 @@
-import { ref, reactive, toRefs, onMounted, onUnmounted, unref } from 'vue'
+import { ref, reactive, toRefs, onMounted, onUnmounted, unref, inject } from 'vue'
 
 import Fetch from './Fetch'
+import { USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY } from './config'
 import { UseRequestOptions, UseRequestPlugin, useRequestResult, UseRequestService } from './types'
 
 function useRequestImplement<TData, TParams extends any[]>(
   service: UseRequestService<TData, TParams>,
   options: UseRequestOptions<TData, TParams, any> = {},
   plugins: UseRequestPlugin<TData, TParams>[] = [],
 ) {
-  // 读取配置
-  const { initialData = undefined, manual = false, ready = true, ...rest } = options
+  // 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,
     ready,
     ...rest,
   }
 
-  // 定义一个serviceRef
+  // serviceRef store service
   const serviceRef = ref(service)
 
-  // 存储state的响应式对象
+  // reactive
   const state = reactive<{
     data?: TData
     loading: boolean
@@ -45,7 +53,7 @@ function useRequestImplement<TData, TParams extends any[]>(
   }
 
   const initState = plugins.map(p => p?.onInit?.(fetchOptions)).filter(Boolean)
-  // fetch的实例化
+  // Fetch Instance
   const fetchInstance = new Fetch<TData, TParams>(
     serviceRef,
     fetchOptions,
@@ -55,20 +63,20 @@ function useRequestImplement<TData, TParams extends any[]>(
 
   fetchInstance.options = fetchOptions
 
-  // 运行插件
+  // run plugins
   fetchInstance.pluginImpls = plugins.map(p => {
     return p(fetchInstance, fetchOptions)
   })
 
-  // manual控制是否自动发送请求
+  // manual
   onMounted(() => {
     if (!manual) {
       const params = fetchInstance.state.params || options.defaultParams || []
       if (unref(ready)) fetchInstance.run(...(params as TParams))
     }
   })
 
-  // 组件卸载的时候取消请求
+  // onUnmounted cancel request
   onUnmounted(() => {
     fetchInstance.cancel()
   })

packages/hooks/src/useRequest/useRequestProvider.ts

@@ -0,0 +1,8 @@
+import { provide } from 'vue';
+
+import { USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY } from './config';
+import type { UseRequestOptions } from './types';
+
+export default function useRequestProvider(config: UseRequestOptions<unknown,any,any>){
+  provide<typeof config>(USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY, config);
+}