feat: ✨ use-request option new feature initialData

feat: ✨ use-request option new feature initialData

Author: inhiblab

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-hooks-plus",
-	"version": "1.5.3",
+	"version": "1.5.4",
 	"description": "Vue hooks library",
 	"files": [
 		"dist",

packages/hooks/src/useRequest/Fetch.ts

@@ -71,7 +71,6 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
       'onBefore',
       params,
     )
-
     // 是否停止请求
     if (stopNow) {
       return new Promise(() => {})

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

@@ -1,5 +1,6 @@
 <template>
   <div>name：{{ loading ? 'loading' : data }}</div>
+  {{ data }}
 </template>
 
 <script lang="ts" setup>

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

@@ -185,7 +185,8 @@ const {
 | error | Exception thrown by service | `Ref<Error>` \| `undefined` |
 | loading | Is the service being executed | `Ref<boolean>` |
 | params | An array of parameters for the service being executed. For example, you triggered `run(1, 2, 3)`, then params is equal to `[1, 2, 3]` | `Ref<TParams | []>` |
-| formatResult | Format the request results, which recommend to use `useFormatResult` | `(response: TData) => any` |  |
+| formatResult | Format the request results, which recommend to use `useFormatResult` | `(response: TData) => any` |
+| initialData | init data | `TData` \| `undefined` |
 | run | <ul><li> Manually trigger the execution of the service, and the parameters will be passed to the service</li><li>Automatic handling of exceptions, feedback through `onError`</li></ul> | `(...params: TParams) => void` |
 | runAsync | The usage is the same as `run`, but it returns a Promise, so you need to handle the exception yourself. | `(...params: TParams) => Promise<TData>` |
 | refresh | Use the last params, call `run` again | `() => void` |

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

@@ -182,6 +182,7 @@ const {
 | error | service 抛出的异常 | `Ref<Error>` \| `undefined` |
 | loading | service 是否正在执行 | `Ref<boolean>` |
 | params | 当次执行的 service 的参数数组。比如你触发了 `run(1, 2, 3)`，则 params 等于 `[1, 2, 3]` | `Ref<TParams | []>` |
+| initialData | 初始化的数据 | `TData` \| `undefined` |
 | formatResult | 格式化请求结果，建议使用 `useFormatResult` | `(response: TData) => any` |  |
 | run | <ul><li> 手动触发 service 执行，参数会传递给 service</li><li>异常自动处理，通过 `onError` 反馈</li></ul> | `(...params: TParams) => void` |
 | runAsync | 与 `run` 用法一致，但返回的是 Promise，需要自行处理异常。 | `(...params: TParams) => Promise<TData>` |

packages/hooks/src/useRequest/plugins/useAutoRunPlugin.ts

@@ -44,7 +44,7 @@ const useAutoRunPlugin: Plugin<unknown, unknown[]> = (
   }
 }
 
-useAutoRunPlugin.onInit = ({ ready = true, manual }) => {
+useAutoRunPlugin.onInit = ({ initialData, ready = true, manual }) => {
   return {
     loading: (!manual && unref(ready)) as FetchState<any, any[]>['loading'],
   }

packages/hooks/src/useRequest/types.ts

@@ -38,6 +38,7 @@ export interface PluginReturn<TData, TParams extends unknown[]> {
 }
 
 export interface BasicOptions<TData, TParams extends unknown[]> {
+  initialData?: TData
   manual?: boolean
   onBefore?: (params: TParams) => void
   onSuccess?: (data: TData, params: TParams) => void

packages/hooks/src/useRequest/useRequestImplement.ts

@@ -1,4 +1,4 @@
-import { ref, reactive, toRefs, computed, onMounted, onUnmounted, unref } from 'vue'
+import { ref, reactive, toRefs, onMounted, onUnmounted, unref } from 'vue'
 
 import Fetch from './Fetch'
 import { Options, Plugin, Result, Service } from './types'
@@ -9,7 +9,7 @@ function useRequestImplement<TData, TParams extends any[]>(
   plugins: Plugin<TData, TParams>[] = [],
 ) {
   // 读取配置
-  const { manual = false, ready = true, ...rest } = options
+  const { initialData = undefined, manual = false, ready = true, ...rest } = options
 
   const fetchOptions = {
     manual,
@@ -27,7 +27,7 @@ function useRequestImplement<TData, TParams extends any[]>(
     params?: TParams
     error?: Error
   }>({
-    data: undefined,
+    data: initialData,
     loading: false,
     params: undefined,
     error: undefined,
@@ -44,46 +44,43 @@ function useRequestImplement<TData, TParams extends any[]>(
     }
   }
 
+  const initState = plugins.map(p => p?.onInit?.(fetchOptions)).filter(Boolean)
   // fetch的实例化
-  const fetchInstance = computed(() => {
-    // 获取初始化initState
-    const initState = plugins.map(p => p?.onInit?.(fetchOptions)).filter(Boolean)
-    return new Fetch<TData, TParams>(
-      serviceRef,
-      fetchOptions,
-      setState,
-      Object.assign({}, ...initState),
-    )
-  })
+  const fetchInstance = new Fetch<TData, TParams>(
+    serviceRef,
+    fetchOptions,
+    setState,
+    Object.assign({}, ...initState, state),
+  )
 
-  fetchInstance.value.options = fetchOptions
+  fetchInstance.options = fetchOptions
 
   // 运行插件
-  fetchInstance.value.pluginImpls = plugins.map(p => {
-    return p(fetchInstance.value as any, fetchOptions)
+  fetchInstance.pluginImpls = plugins.map(p => {
+    return p(fetchInstance, fetchOptions)
   })
 
   // manual控制是否自动发送请求
   onMounted(() => {
     if (!manual) {
-      const params = fetchInstance.value.state.params || options.defaultParams || []
-      if (unref(ready)) fetchInstance.value.run(...(params as TParams))
+      const params = fetchInstance.state.params || options.defaultParams || []
+      if (unref(ready)) fetchInstance.run(...(params as TParams))
     }
   })
 
   // 组件卸载的时候取消请求
   onUnmounted(() => {
-    fetchInstance.value.cancel()
+    fetchInstance.cancel()
   })
 
   return ({
     ...toRefs(state),
-    cancel: fetchInstance.value.cancel.bind(fetchInstance.value),
-    refresh: fetchInstance.value.refresh.bind(fetchInstance.value),
-    refreshAsync: fetchInstance.value.refreshAsync.bind(fetchInstance.value),
-    run: fetchInstance.value.run.bind(fetchInstance.value),
-    runAsync: fetchInstance.value.runAsync.bind(fetchInstance.value),
-    mutate: fetchInstance.value.mutate.bind(fetchInstance.value),
+    cancel: fetchInstance.cancel.bind(fetchInstance),
+    refresh: fetchInstance.refresh.bind(fetchInstance),
+    refreshAsync: fetchInstance.refreshAsync.bind(fetchInstance),
+    run: fetchInstance.run.bind(fetchInstance),
+    runAsync: fetchInstance.runAsync.bind(fetchInstance),
+    mutate: fetchInstance.mutate.bind(fetchInstance),
   } as unknown) as Result<TData, TParams>
 }