feat: @vue-hooks-plus/use-request image pull

Author: NelsonYong

packages/use-request/package.json

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

packages/use-request/src/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/use-request/src/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/use-request/src/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/use-request/src/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/use-request/src/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);
+}