ZotRequest

useRequest

$3

``ts
const fetchData = (param: any) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
time: new Date().toLocaleString(),
param: param,
data: Math.random()
})
}, 500)
})
}

const { data, params, loading, run, refresh } = useRequest(fetchData)

`

#### API

`ts

export interface IResult {
/* 是否成功 /
success: boolean
/* 数据 /
data: T
/* 消息 /
message?: string
/* 其他信息 /
[key: string]: any
}

const {
loading: boolean,
data?: TData,
params: TParams || [],
run: (...params: TParams) => void,
runAsync: (...params: TParams) => Promise>,
refresh: () => void,
refreshAsync: () =>Promise>,
mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
cancel: () => void,
} = useRequest(
// service 请求返回的结果必须为 IResult 格式
service: (...args: TParams) =>Promise>,
{
auto?: boolean,
defaultParams?: TParams,
onBefore?: (params: TParams) => void,
onSuccess?: (result: IResult, params: TParams) => void,
onFail?: (result: IResult, params: TParams) => void,
onFinally?: (result: IResult, params: TParams) => void
}
);
`

#### Result

| 参数 | 说明 | 类型 |
| ------- | -------------------- | --------- |
| data | service 返回的数据 | TData |
| loading | service 是否正在执行 | boolean |
| params | 当次执行的 service 的参数数组。比如你触发了 run(1, 2, 3)，则 params 等于 [1, 2, 3] | TParams |
| run | 手动触发 service 执行，参数会传递给 service 异常自动处理，通过 onFail 反馈 | boolean |
| runAsync | 与 run 用法一致，但返回的是 Promise ，需要自行处理异常。 | (...params: TParams) => Promise> |
| refresh | 使用上一次的 params，重新调用 run | () => void |
| refreshAsync | 使用上一次的 params，重新调用 runAsync | () => Promise> |
| mutate | 直接修改 data | (data?: TData / ((oldData?: TData) => (TData / undefined))) => void |
| cancel | 忽略当前 Promise 的响应 | ()=>void |

#### Options

| 参数 | 说明 | 类型 | 默认值 |
| ------- | -------------------- | --------- | --- |
| auto | 自动请求, 即在初始化时自动执行 service。 | boolean | false|
| defaultParams | 首次默认执行时，传递给 service 的参数 | TParams | - |
| onBefore | service 执行前触发 | (params: TParams) => void | -|
| onSuccess | service 返回结果 result.success 为true时候触发 | (res: IResult, params: TParams) => void | -|
| onFail | service 返回结果 result.success 不为true时候触发 | (res: IResult, params: TParams) => void | -|
| onFinally | service 执行完成时触发 | (res: IResult, params: TParams) => void | -|

$3

pollingInterval 每隔 x ms 自动调用refresh刷新数据

`ts

{
/* 轮询时间 每隔 x ms 自动调用refresh刷新数据 /
pollingInterval?: number
/* 轮询时间最大失败重试次数，超过次数停止轮询， 默认-1 /
pollingErrorRetryCount?: number
}


const { data, loading, run } = useRequest(fetchData, {
pollingInterval: 10000,
pollingErrorRetryCount: -1
})
`

$3

`ts
// options
{
/* 防抖等待时间, 单位为毫秒，设置后，进入防抖模式 /
debounceWait?: number
/* 在延迟开始前执行调用 默认false/
debounceLeading?: boolean
/* 在延迟结束后执行调用 默认true /
debounceTrailing?: boolean
/* 允许被延迟的最大值 /
debounceMaxWait?: number
}


const { data, loading, run } = useRequest(fetchData, {
debounceWait: 500,
})
`

$3

`ts
// options
{
/* 节流等待时间, 单位为毫秒，设置后，进入节流模式 /
throttleWait?: number
/* 在节流开始前执行调用 默认 true /
throttleLeading?: boolean
/* 在节流结束后执行调用 默认 true /
throttleTrailing?: boolean
}

const { data, loading, run } = useRequest(fetchData, {
throttleWait: 500,
})
`

$3

- staleTime 缓存时间默认10分钟

`ts

export interface CachedData {
// 请求数据
data: TData
// 请求参数
params: TParams
}

export interface RecordData extends CachedData {
// 过期时间
expiredTime: number | null
}
// options
{
/* 缓存key, 相同key会同步更新 /
cacheKey?: string
/* 缓存时间ms, -1 为永久缓存 /
staleTime?: number
/* 是否根据params生成缓存key /
cacheKeyWithParams?: boolean
/* 自定义设置缓存 /
setCache?: (data: CachedData) => void
/* 自定义获取缓存 /
getCache?: (key: string, params: TParams) => RecordData | undefined
}

const { data, loading, run } = useRequest(fetchData, {
cacheKey: 'test',
staleTime: -1,
cacheKeyWithParams: true
})
`

$3

`ts
{
/* 防止闪烁 响应时间少于 loadingDelay 不展示loading /
loadingDelay
}


const { data, loading, run } = useRequest(fetchData, {
loadingDelay: 100
})

``