Intro

Manages asynchronous state, typically for network requests.

管理异步状态,通常用于网络请求。

ahooks/useRequest for Vue, advanced features are implemented according to @bowencool/async-utilities.

Vue 版 ahooks/useRequest,高级功能根据 @bowencool/async-utilities 实现。

Why not just return a reactive object? Because reactive objects cannot use deconstructive syntax.

为什么不直接返回一个响应式对象?因为响应式对象不能用解构语法

Demos

Api

View Codes 查看代码
import type { DeepReadonly, Ref } from 'vue';
import { throttleAsyncResult, withRetryAsync } from '@bowencool/async-utilities';
export declare type UseAsyncStateOptions<R, P extends any[]> = {
    /**
     * @description Default false. i.e. service is executed automatically at initialization; if set to true, run needs to be called manually to trigger execution.
     * @description.cn 默认 false。 即在初始化时自动执行 service;如果设置为 true,则需要手动调用 run 触发执行。
     */
    manual?: boolean;
    /**
     * @description The default parameters which should be an array
     * @description.cn 默认参数,数组形式
     */
    defaultParams?: P;
    /**
     * @description Callback when success
     * @description.cn 成功时回调
     */
    onSuccess?: (arg0: R, arg1: P) => void;
    /**
     * @description Callback when failed
     * @description.cn 失败时回调
     */
    onError?: (arg0: any, arg1: P) => void;
    /**
     * @description Callback when completed
     * @description.cn 完成时回调
     */
    onComplete?: (arg0: P) => void;
    /**
     * @description.cn 轮询间隔,单位为毫秒。设置后,将进入轮询模式,定时触发 run
     */
    pollingInterval?: number;
    /**
     * @description.cn 在页面隐藏时,是否继续轮询。默认为 true,即不会停止轮询;如果设置为 false , 在页面隐藏时会暂时停止轮询,页面重新显示时继续上次轮询
     */
    pollingWhenHidden?: boolean;
    /**
     * @description.cn 在屏幕重新获取焦点或重新显示时,是否重新发起请求。默认为 false,即不会重新发起请求;如果设置为 true,在屏幕重新聚焦或重新显示时,会重新发起请求。
     */
    refreshOnWindowFocus?: boolean;
    /**
     * @description.cn 屏幕重新聚焦,如果每次都重新发起请求,不是很好,我们需要有一个时间间隔,在当前时间间隔内,不会重新发起请求
     * 需要配和 refreshOnWindowFocus 使用。默认5000
     */
    focusTimespan?: number;
    /**
     * @description.cn 可以延迟 loading 变成 true 的时间,有效防止闪烁
     */
    loadingDelay?: number;
    /**
     * @description.cn 防抖间隔, 单位为毫秒,设置后,请求进入防抖模式。
     */
    debounceInterval?: number;
    /**
     * @description.cn (执行频率过高时或执行时间不均匀)取最后一次执行的异步任务结果。默认 false, 推荐开启
     * 详情: https://bowencool.github.io/async-utilities/functions/debounceAsyncResult/readme.html
     */
    debounceResult?: boolean;
    /**
     * @description.cn 取第一次执行的异步任务结果并忽略在此期间的任何执行。默认 false, 跟 debounceResult、debounceInterval 互斥。
     * 详情: https://bowencool.github.io/async-utilities/functions/throttleAsyncResult/readme.html
     */
    throttleResult?: boolean | Parameters<typeof throttleAsyncResult>[1];
    /**
     * @description.cn 自动重试,
     * 详情: https://bowencool.github.io/async-utilities/functions/withRetryAsync/readme.html
     */
    autoRetry?: Parameters<typeof withRetryAsync>[1];
    /**
     * @description.cn 超时自动失败,error 会是一个 TimeoutError
     */
    timeout?: number;
};
export declare type UseAsyncStateReturnType<R, P extends any[]> = {
    /**
     * @description.cn 任务结果
     */
    data: Ref<R | undefined>;
    /**
     * @description.cn 当前调用的参数列表。比如:展示“未搜索到 {params} 相关数据”
     */
    params: Ref<P | undefined>;
    /**
     * @description.cn 给页面渲染的 loading,根据 loadingDelay 优化
     */
    loading: DeepReadonly<Ref<boolean>>;
    /**
     * @description.cn 任务执行中抛出的错误
     */
    error: DeepReadonly<Ref<unknown | undefined>>;
    /**
     * @description.cn 手动触发 service 执行,参数会传递给 service;
     */
    run: (...p: P) => Promise<R>;
    /**
     * @description.cn 取消当前任务,需要运行环境支持 AbortController,error 会是一个 AbortError 。如果有定时器,也会暂定。
     */
    cancel?: () => void;
    /**
     * @description.cn 暂停定时器
     */
    pause?: () => void;
    /**
     * @description.cn 恢复定时器(并立即执行一次)
     */
    resume?: () => void;
    /**
     * @description.cn 任务是否正在执行,不受 loadingDelay 影响
     */
    pending: DeepReadonly<Ref<boolean>>;
};
/**
 * @description.cn 管理异步状态,通常用于网络请求。
 */
export declare function useAsyncState<R, P extends any[]>(
/**
 * @description.cn 异步任务
 */
service: (...p: P) => Promise<R>, options?: UseAsyncStateOptions<R, P>): UseAsyncStateReturnType<R, P>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119