feat: use-request/useRequestProvider global option

NelsonYong · NelsonYong · commit 7ff362fdb5dc · 2023-03-20T15:21:18.000+08:00
diff --git a/packages/hooks/docs/.vitepress/router.ts b/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/',
+      },
     ],
   },
 ]
diff --git a/packages/hooks/src/index.ts b/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,
diff --git a/packages/hooks/src/useRequest/config.ts b/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];
+  });
+};
+
diff --git a/packages/hooks/src/useRequest/createUseRequest.ts b/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
diff --git a/packages/hooks/src/useRequest/docs/basic/demo/Index.vue b/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>
diff --git a/packages/hooks/src/useRequest/docs/global/demo/demo.vue b/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>
diff --git a/packages/hooks/src/useRequest/docs/global/index.en-US.md b/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.0`
+
+:::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 })
+```
diff --git a/packages/hooks/src/useRequest/docs/global/index.zh-CN.md b/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.0`
+
+:::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 })
+```
diff --git a/packages/hooks/src/useRequest/docs/index.en-US.md b/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>
diff --git a/packages/hooks/src/useRequest/docs/index.zh-CN.md b/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>
diff --git a/packages/hooks/src/useRequest/docs/refreshDeps/index.en-US.md b/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.
 
diff --git a/packages/hooks/src/useRequest/docs/refreshDeps/index.zh-CN.md b/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` 会自动收集函数参数中的响应式对象参数，只要参数里面的响应式对象发生变化就会携带最新的值重新发起请求 。
 
diff --git a/packages/hooks/src/useRequest/index.ts b/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
diff --git a/packages/hooks/src/useRequest/useRequestImplement.ts b/packages/hooks/src/useRequest/useRequestImplement.ts
@@ -1,15 +1,22 @@
-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'
+import { merge } from 'lodash'
 
 function useRequestImplement<TData, TParams extends any[]>(
   service: UseRequestService<TData, TParams>,
   options: UseRequestOptions<TData, TParams, any> = {},
   plugins: UseRequestPlugin<TData, TParams>[] = [],
 ) {
+  // 全局注入的配置
+  const USEREQUEST_GLOBAL_OPTIONS = inject(USEREQUEST_GLOBAL_OPTIONS_PROVIDE_KEY)
   // 读取配置
-  const { initialData = undefined, manual = false, ready = true, ...rest } = options
+  const { initialData = undefined, manual = false, ready = true, ...rest } = merge(
+    USEREQUEST_GLOBAL_OPTIONS,
+    options ?? {},
+  ) as Record<string, any>
 
   const fetchOptions = {
     manual,
@@ -53,6 +60,8 @@ function useRequestImplement<TData, TParams extends any[]>(
     Object.assign({}, ...initState, state),
   )
 
+  console.log(fetchOptions)
+
   fetchInstance.options = fetchOptions
 
   // 运行插件
diff --git a/packages/hooks/src/useRequest/useRequestProvider.ts b/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);
+}
