ahooks中的核心hook-useRequest（下）

前言

之前大致说了下useRequest hook的基本功能的实现。但useRequest的强大不止于此。它还支持如loading状态延时、请求防抖、节流、依赖刷新等功能。不过其实现方式都是通过内置的插件hook来进行实现的。这样做既可以保证核心代码的简洁，还能更方便的扩展出更高级的功能。并且还支持用户进行自定义插件。

正文

如何定义一个插件

可以通过插件 hook 的ts定义，看一下怎么定义一个插件：

插件hook接收两个参数，

• fetchInstance: fetch实例；
• fetchOptions: useRequest接收的options；

支持返回一些回调函数：

• onBefore： 在请求接口前调用；
• onRequest： 在请求接口时调用；
• onSuccess： 在请求接口成功后调用；
• onError： 在请求接口失败后调用；
• onFinally： 在请求接口完成后调用；
• onCancel： 在请求接口取消后调用；
• onMutate： 在出发mutate函数时调用；

插件hook可以返回一系列的生命周期函数，使我们可以在接口请求的任意一个时机对fetchInstance进行处理。

插件hook还支持挂载一个静态方法 onInit()，在Fetch创建之前，可以通过Init方法进行一些前提处理。得到初始的state。

const use***plugin = ( fetchInstance,fetchOptions, ) => {const onBefore = () => {// 对fetchInstance的状态的处理...}...return {onBefore,...}
}
use***plugin.onInit = (fetchOptions) => {...
}
export default use***plugin 

插件的使用

插件hook一般用来处理Fetch实例的状态，在Fetch实例被创建之前，会先执行所有插件可能存在的onInit方法，该方法会返回initData，用来初始化Fetch实例。

在Fetch实例被初始化后，执行所有的插件hooks，此时，会得到一个包含（onBrfore、onSuccess…）的数组。并将这些方法挂载到fetchInstance上。方便在各个时机使用。

const useRequestImplement = (service: Promise<any>, options, plugins: Array<Plugin>) => {// const { manual = false, ...rest } = options;// const fetchOptions = {// manual,// ...rest,// };// const serviceRef = useLatest(service);// const update = useUpdate();const fetchInstance = useCreation(() => {// 在Filter方法中的Boolean可以当成一个转换函数，用来筛选掉空的initData。const initState = plugins.map((p) => p?.onInit?.(fetchOptions)).filter(Boolean);// 将初始化的initState传给构造函数Fetch。return new Fetch(se