Skip to content

Commit a8a987b

Browse files
authored
feat: ✨ use-request option new feature initialData
feat: ✨ use-request option new feature initialData
2 parents 0a532b5 + 5bb07e1 commit a8a987b

File tree

8 files changed

+29
-29
lines changed

8 files changed

+29
-29
lines changed

packages/hooks/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-hooks-plus",
3-
"version": "1.5.3",
3+
"version": "1.5.4",
44
"description": "Vue hooks library",
55
"files": [
66
"dist",

packages/hooks/src/useRequest/Fetch.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
7171
'onBefore',
7272
params,
7373
)
74-
7574
// 是否停止请求
7675
if (stopNow) {
7776
return new Promise(() => {})

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div>name:{{ loading ? 'loading' : data }}</div>
3+
{{ data }}
34
</template>
45

56
<script lang="ts" setup>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,8 @@ const {
185185
| error | Exception thrown by service | `Ref<Error>` \| `undefined` |
186186
| loading | Is the service being executed | `Ref<boolean>` |
187187
| 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 | []>` |
188-
| formatResult | Format the request results, which recommend to use `useFormatResult` | `(response: TData) => any` | |
188+
| formatResult | Format the request results, which recommend to use `useFormatResult` | `(response: TData) => any` |
189+
| initialData | init data | `TData` \| `undefined` |
189190
| 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` |
190191
| 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>` |
191192
| refresh | Use the last params, call `run` again | `() => void` |

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const useAutoRunPlugin: Plugin<unknown, unknown[]> = (
4444
}
4545
}
4646

47-
useAutoRunPlugin.onInit = ({ ready = true, manual }) => {
47+
useAutoRunPlugin.onInit = ({ initialData, ready = true, manual }) => {
4848
return {
4949
loading: (!manual && unref(ready)) as FetchState<any, any[]>['loading'],
5050
}

packages/hooks/src/useRequest/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export interface PluginReturn<TData, TParams extends unknown[]> {
3838
}
3939

4040
export interface BasicOptions<TData, TParams extends unknown[]> {
41+
initialData?: TData
4142
manual?: boolean
4243
onBefore?: (params: TParams) => void
4344
onSuccess?: (data: TData, params: TParams) => void

packages/hooks/src/useRequest/useRequestImplement.ts

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ref, reactive, toRefs, computed, onMounted, onUnmounted, unref } from 'vue'
1+
import { ref, reactive, toRefs, onMounted, onUnmounted, unref } from 'vue'
22

33
import Fetch from './Fetch'
44
import { Options, Plugin, Result, Service } from './types'
@@ -9,7 +9,7 @@ function useRequestImplement<TData, TParams extends any[]>(
99
plugins: Plugin<TData, TParams>[] = [],
1010
) {
1111
// 读取配置
12-
const { manual = false, ready = true, ...rest } = options
12+
const { initialData = undefined, manual = false, ready = true, ...rest } = options
1313

1414
const fetchOptions = {
1515
manual,
@@ -27,7 +27,7 @@ function useRequestImplement<TData, TParams extends any[]>(
2727
params?: TParams
2828
error?: Error
2929
}>({
30-
data: undefined,
30+
data: initialData,
3131
loading: false,
3232
params: undefined,
3333
error: undefined,
@@ -44,46 +44,43 @@ function useRequestImplement<TData, TParams extends any[]>(
4444
}
4545
}
4646

47+
const initState = plugins.map(p => p?.onInit?.(fetchOptions)).filter(Boolean)
4748
// fetch的实例化
48-
const fetchInstance = computed(() => {
49-
// 获取初始化initState
50-
const initState = plugins.map(p => p?.onInit?.(fetchOptions)).filter(Boolean)
51-
return new Fetch<TData, TParams>(
52-
serviceRef,
53-
fetchOptions,
54-
setState,
55-
Object.assign({}, ...initState),
56-
)
57-
})
49+
const fetchInstance = new Fetch<TData, TParams>(
50+
serviceRef,
51+
fetchOptions,
52+
setState,
53+
Object.assign({}, ...initState, state),
54+
)
5855

59-
fetchInstance.value.options = fetchOptions
56+
fetchInstance.options = fetchOptions
6057

6158
// 运行插件
62-
fetchInstance.value.pluginImpls = plugins.map(p => {
63-
return p(fetchInstance.value as any, fetchOptions)
59+
fetchInstance.pluginImpls = plugins.map(p => {
60+
return p(fetchInstance, fetchOptions)
6461
})
6562

6663
// manual控制是否自动发送请求
6764
onMounted(() => {
6865
if (!manual) {
69-
const params = fetchInstance.value.state.params || options.defaultParams || []
70-
if (unref(ready)) fetchInstance.value.run(...(params as TParams))
66+
const params = fetchInstance.state.params || options.defaultParams || []
67+
if (unref(ready)) fetchInstance.run(...(params as TParams))
7168
}
7269
})
7370

7471
// 组件卸载的时候取消请求
7572
onUnmounted(() => {
76-
fetchInstance.value.cancel()
73+
fetchInstance.cancel()
7774
})
7875

7976
return ({
8077
...toRefs(state),
81-
cancel: fetchInstance.value.cancel.bind(fetchInstance.value),
82-
refresh: fetchInstance.value.refresh.bind(fetchInstance.value),
83-
refreshAsync: fetchInstance.value.refreshAsync.bind(fetchInstance.value),
84-
run: fetchInstance.value.run.bind(fetchInstance.value),
85-
runAsync: fetchInstance.value.runAsync.bind(fetchInstance.value),
86-
mutate: fetchInstance.value.mutate.bind(fetchInstance.value),
78+
cancel: fetchInstance.cancel.bind(fetchInstance),
79+
refresh: fetchInstance.refresh.bind(fetchInstance),
80+
refreshAsync: fetchInstance.refreshAsync.bind(fetchInstance),
81+
run: fetchInstance.run.bind(fetchInstance),
82+
runAsync: fetchInstance.runAsync.bind(fetchInstance),
83+
mutate: fetchInstance.mutate.bind(fetchInstance),
8784
} as unknown) as Result<TData, TParams>
8885
}
8986

0 commit comments

Comments
 (0)