useRequest 学习记录

https://ahooks.gitee.io/zh-CN/hooks/use-request/basic#api

const {
    loading: boolean,
    data?: TData,
    error?: Error,
    params: TParams || [],
    run: (...params: TParams) => void,
    runAsync: (...params: TParams) => Promise<TData>,
    refresh: () => void,
    refreshAsync: () => Promise<TData>,
    mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
    cancel: () => void,
} = useRequest<TData, TParams>(
    service: (...args: TParams) => Promise<TData>,
  {
    manual?: boolean,
    defaultParams?: TParams,
    onBefore?: (params: TParams) => void,
    onSuccess?: (data: TData, params: TParams) => void,
    one rror?: (e: Error, params: TParams) => void,
    onFinally?: (params: TParams, data?: TData, e?: Error) => void,
  }
);

loading:  接口动作是否需要loading，service是否正在执行

data: 接口正确返回的数据

error: 接口调用失败返回的错误信息，一般使用error.message

params: 接口调用的入参，可以从defaultParams, run, runAsync 等调用service的时候修改

run: service接口的别名? 个人理解，执行run就是调用service。run 是手动调用，并且错误处理可以由useRequest来进行，写在options里面（onSuccess, one rror等）

runAsync: 跟run的区别在于，runAsync 的错误处理要自己记性，最好包裹在try/catch中执行，返回的是个promise ，但是也可以用async/await 来处理

refresh 和 refreshAsync : 不太清楚，重复提交上一次的请求；不如说是，在执行refresh时，记录了上一次执行run时的入参，然后本次使用记录的入参去调用

useRequest 提供了 refresh 和 refreshAsync 方法，使我们可以使用上一次的参数，重新发起请求。

假如在读取用户信息的场景中

1. 我们读取了 ID 为 1 的用户信息 run(1)
2. 我们通过某种手段更新了用户信息
3. 我们想重新发起上一次的请求，那我们就可以使用 refresh 来代替 run(1)，这在复杂参数的场景中是非常有用的

mutate: 立即修改useRequest 返回的data数据，即把mutate的入参直接赋值给data , 然后再执行后续操作如调取接口，接口成功则隐式执行逻辑，接口失败要配套使用useRef把data数据还原到上一版本，所以在每次使用mutate前最好使用ref.current 保存旧值

cancel: 取消响应，而不是取消调用，service还是会执行，但是会取消掉对应的数据处理逻辑，不会赋值。另外，在组件每次卸载前，或者上次请求未结束就发起下一次请求时，会忽略掉卸载前以及上一次的请求

service: 对应的接口或异步动作

manual: 是否手动触发service。useRequest是会在初始化后自动执行的。

onBefore: service调用前的处理

onSuccess: 成功回调

onError: 错误回调

onFinally: 接口服务调用完毕的回调

拓展参数

options

loadingDelay: 300   配合loading使用的参数，在delay时间内接口返回，则不会触发loading,

pollingInterval: 3000 每隔多少毫秒开始轮询，可以使用cancel取消，使用run/runAsync 开启

pollingErrorRetryCount：3  轮询错误重试次数

ready: boolean 在ready状态为false, 任何service都将被忽略。manual为true时，ready切换到true时会自动触发一次请求；manual为false时，ready只有为true时，发起的请求才有效

refreshDeps: 依赖数组，当数组中的依赖发生变化时，触发service的再次调用

refreshOnWindowsFocus: 当当前窗口重新聚焦或者显示，触发onFocus或onVisibilityChange, 且间隔时间大于options.focusTimeSpan(毫秒数)时，重新调用service

debounceWait: 防抖策略，入参为毫秒数，当频繁触发run或asyncRun 时，只在最后一次触发后，延迟对应的毫秒数执行请求，默认延迟完成时执行请求。支持通过变量改变

throttleWait: 毫秒数，在频繁触发run或asyncRun时，只会在每经过对应毫秒数后，执行一次service。支持通过变量改变

cacheKey: 入参是字符串（最好是唯一标识）, 能将当前请求成功的请求入参和返参都缓存下来，在下次触发事件时，优先返回缓存数据。个人发现弊端：不适合频繁触发事件或频繁切换显示的组件，会引起页面内容当面刷新

staleTime: 缓存有效时间，设置为-1就是永远不过期

cacheTime: 缓存数据回收时间，默认5分钟，设置为-1就永不回收

setCache: (data: cacheData) => void  给一种设置缓存数据的方式，localStorage 或者IndexDB

getCache: (params: any) => return cacheData

clearCache: 可以从 ahooks中引入此函数，入参为cacheKey 字符串或对应key 数组，清空当前入参的缓存数据

retryCount: 当前service请求错误后重试的次数，这个次数不包含当前请求，retryInterval 重试时间间隔