我们讲下 ahooks 的核心 hook —— useRequest。
useRequest 简介
根据官方文档的介绍,useRequest 是一个强大的异步数据管理的 Hooks,React 项目中的网络请求场景使用 useRequest ,这就可以。
useRequest通过插件式组织代码,核心代码极其简单,并且可以很方便的扩展出更高级的功能。目前已有能力包括:
自动请求/手动请求
轮询
防抖
节流
屏幕聚焦重新请求
错误重试
loading delay
SWR(stale-while-revalidate)
缓存
这样看起来 useRequest 的功能是不是非常的强大,要是会如何实现?也可以从介绍中看到官方的答案——插件化机制。
架构
如上图所示,我把整个 useRequest 分成了几个模块。
入口 useRequest。它负责的是初始化处理数据以及将结果返回。
Fetch。是整个 useRequest 的核心代码,它处理了整个请求的生命周期。
plugin。在 Fetch 中,会通过插件化机制在不同的时机触发不同的插件方法,拓展 useRequest 的功能特性。
utils 和 types.ts。提供工具方法以及类型定义。
useRequest 入口处理
先从入口文件开始,packages/hooks/src/useRequest/src/useRequest.ts。
function useRequest<TData, TParams extends any[]>( service: Service<TData, TParams>, options?: Options<TData, TParams>, plugins?: Plugin<TData, TParams>[], ) { return useRequestImplement<TData, TParams>(service, options, [ // 插件列表,用来拓展功能,一般用户不使用。文档中没有看到暴露 API ...(plugins || []), useDebouncePlugin, useLoadingDelayPlugin, usePollingPlugin, useRefreshOnWindowFocusPlugin, useThrottlePlugin, useAutoRunPlugin, useCachePlugin, useRetryPlugin, ] as Plugin<TData, TParams>[]); } export default useRequest;
这里第一(service 请求实例)第二个参数(配置选项),我们比较熟悉,第三个参数文档中没有提及,其实就是插件列表,用户可以自定义插件拓展功能。
可以看到返回了useRequestImplement方法。主要是对 Fetch 类进行实例化。
const update = useUpdate(); // 保证请求实例都不会发生改变 const fetchInstance = useCreation(() => { // 目前只有 useAutoRunPlugin 这个 plugin 有这个方法 // 初始化状态,返回 { loading: xxx },代表是否 loading const initState = plugins.map((p) => p?.onInit?.(fetchOptions)).filter(Boolean); // 返回请求实例 return new Fetch<TData, TParams>( serviceRef, fetchOptions, // 可以 useRequestImplement 组件 update, Object.assign({}, ...initState), ); }, []); fetchInstance.options = fetchOptions; // run all plugins hooks // 执行所有的 plugin,拓展能力,每个 plugin 中都返回的方法,可以在特定时机执行 fetchInstance.pluginImpls = plugins.map((p) => p(fetchInstance, fetchOptions));
实例化的时候,传参依次为请求实例,options 选项,父组件的更新函数,初始状态值。
这里需要非常留意的一点是最后一行,它执行了所有的 plugins 插件,传入的是 fetchInstance 实例以及 options 选项,返回的结果赋值给 fetchInstance 实例的pluginImpls。
另外这个文件做的就是将结果返回给开发者了,这点不细说。
Fetch 和 Plugins
接下来最核心的源码部分 —— Fetch 类。其代码不多,算是非常精简,先简化一下:
export default class Fetch<TData, TParams extends any[]> { // 插件执行后返回的方法列表 pluginImpls: PluginReturn<TData, TParams>[]; count: number = 0; // 几个重要的返回值 state: FetchState<TData, TParams> = { loading: false, params: undefined, data: undefined, error: undefined, }; constructor( // React.MutableRefObject —— useRef创建的类型,可以修改 public serviceRef: MutableRefObject<Service<TData, TParams>>, public options: Options<TData, TParams>, // 订阅-更新函数 public subscribe: Subscribe, // 初始值 public initState: Partial<FetchState<TData, TParams>> = {}, ) { this.state = { ...this.state, loading: !options.manual, // 非手动,就loading ...initState, }; } // 更新状态 setState(s: Partial<FetchState<TData, TParams>> = {}) { this.state = { ...this.state, ...s, }; this.subscribe(); } // 执行插件中的某个事件(event),rest 为参数传入 runPluginHandler(event: keyof PluginReturn<TData, TParams>, ...rest: any[]) { // 省略代码... } // 如果设置了 options.manual = true,则 useRequest 不会默认执行,需要通过 run 或者 runAsync 来触发执行。 // runAsync 是一个返回 Promise 的异步函数,如果使用 runAsync 来调用,则意味着你需要自己捕获异常。 async runAsync(...params: TParams): Promise<TData> { // 省略代码... } // run 是一个普通的同步函数,其内部也是调用了 runAsync 方法 run(...params: TParams) { // 省略代码... } // 取消当前正在进行的请求 cancel() { // 省略代码... } // 使用上一次的 params,重新调用 run refresh() { // 省略代码... } // 使用上一次的 params,重新调用 runAsync refreshAsync() { // 省略代码... } // 修改 data。参数可以为函数,也可以是一个值 mutate(data?: TData | ((oldData?: TData) => TData | undefined)) { // 省略代码... }
state 以及 setState
在 constructor 中,主要是进行了数据的初始化。其中维护的数据主要包含一下几个重要的数据以及通过 setState 方法设置数据,设置完成通过 subscribe 调用通知 useRequestImplement 组件重新渲染,从而获取最新值。
// 几个重要的返回值 state: FetchState<TData, TParams> = { loading: false, params: undefined, data: undefined, error: undefined, }; // 更新状态 setState(s: Partial<FetchState<TData, TParams>> = {}) { this.state = { ...this.state, ...s, }; this.subscribe(); }
插件化机制的实现
上文有提到所有的插件运行的结果都赋值给 pluginImpls。它的类型定义如下:
export interface PluginReturn<TData, TParams extends any[]> { onBefore?: (params: TParams) => | ({ stopNow?: boolean; returnNow?: boolean; } & Partial<FetchState<TData, TParams>>) | void; onRequest?: ( service: Service<TData, TParams>, params: TParams, ) => { servicePromise?: Promise<TData>; }; onSuccess?: (data: TData, params: TParams) => void; onError?: (e: Error, params: TParams) => void; onFinally?: (params: TParams, data?: TData, e?: Error) => void; onCancel?: () => void; onMutate?: (data: TData) => void; }
除了最后一个 onMutate 之外,可以看到返回的方法都是在一个请求的生命周期中的。一个请求从开始到结束,如下图所示:
如果你比较仔细,你会发现基本所有的插件功能都是在一个请求的一个或者多个阶段中实现的,也就是说我们只需要在请求的相应阶段,执行我们的插件的逻辑,就能完成我们插件的功能。
执行特定阶段插件方法的函数为 runPluginHandler,其 event 入参就是上面 PluginReturn key 值。
// 执行插件中的某个事件(event),rest 为参数传入 runPluginHandler(event: keyof PluginReturn<TData, TParams>, ...rest: any[]) { // @ts-ignore const r = this.pluginImpls.map((i) => i[event]?.(...rest)).filter(Boolean); return Object.assign({}, ...r); }
通过这样的方式,Fetch 类的代码会变得非常的精简,只需要完成整体流程的功能,所有额外的功能(比如重试、轮询等等)都交给插件去实现。这么做的优点:
符合职责单一原则。一个 Plugin 只做一件事,相互之间不相关。整体的可维护性更高,并且拥有更好的可测试性。
符合深模块的软件设计理念。其认为最好的模块提供了强大的功能,又有着简单的接口。试想每个模块由一个长方形表示,如下图,长方形的面积大小和模块实现的功能多少成比例。顶部边代表模块的接口,边的长度代表它的复杂度。最好的模块是深的:他们有很多功能隐藏在简单的接口后。深模块是好的抽象,因为它只把自己内部的一小部分复杂度暴露给了用户。
核心方法 —— runAsync
可以看到 runAsync 是运行请求的最核心方法,其他的方法比如run/refresh/refreshAsync最终都是调用该方法。
并且该方法中就可以看到整体请求的生命周期的处理。这跟上面插件返回的方法设计是保持一致的。
请求前 —— onBefore
处理请求前的状态,并执行 Plugins 返回的 onBefore 方法,并根据返回值执行相应的逻辑。比如,useCachePlugin 如果还存于新鲜时间内,则不用请求,返回 returnNow,这样就会直接返回缓存的数据。
this.count += 1; // 主要为了 cancel 请求 const currentCount = this.count; const { stopNow = false, returnNow = false, ...state // 先执行每个插件的前置函数 } = this.runPluginHandler('onBefore', params); // stop request if (stopNow) { return new Promise(() => {}); } this.setState({ // 开始 loading loading: true, // 请求参数 params, ...state, }); // return now // 立即返回,跟缓存策略有关 if (returnNow) { return Promise.resolve(state.data); } // onBefore - 请求之前触发 // 假如有缓存数据,则直接返回 this.options.onBefore?.(params);
进行请求——onRequest
这个阶段只有 useCachePlugin 执行了 onRequest 方法,执行后返回 service Promise(有可能是缓存的结果),从而达到缓存 Promise 的效果。
// replace service // 如果有 cache 的实例,则使用缓存的实例 let { servicePromise } = this.runPluginHandler('onRequest', this.serviceRef.current, params); if (!servicePromise) { servicePromise = this.serviceRef.current(...params); } const res = await servicePromise;
useCachePlugin 返回的 onRequest 方法:
// 请求阶段 onRequest: (service, args) => { // 看 promise 有没有缓存 let servicePromise = cachePromise.getCachePromise(cacheKey); // If has servicePromise, and is not trigger by self, then use it // 如果有servicePromise,并且不是自己触发的,那么就使用它 if (servicePromise && servicePromise !== currentPromiseRef.current) { return { servicePromise }; } servicePromise = service(...args); currentPromiseRef.current = servicePromise; // 设置 promise 缓存 cachePromise.setCachePromise(cacheKey, servicePromise); return { servicePromise }; },
取消请求 —— onCancel
刚刚在请求开始前定义了 currentCount 变量,其实为了 cancel 请求。
this.count += 1; // 主要为了 cancel 请求 const currentCount = this.count;
在请求过程中,开发者可以调用 Fetch 的 cancel 方法:
// 取消当前正在进行的请求 cancel() { // 设置 + 1,在执行 runAsync 的时候,就会发现 currentCount !== this.count,从而达到取消请求的目的 this.count += 1; this.setState({ loading: false, }); // 执行 plugin 中所有的 onCancel 方法 this.runPluginHandler('onCancel'); }
这个时候,currentCount !== this.count,就会返回空数据。
// 假如不是同一个请求,则返回空的 promise if (currentCount !== this.count) { // prevent run.then when request is canceled return new Promise(() => {}); }
最后结果处理——onSuccess/onError/onFinally
这部分也就比较简单了,通过 try...catch...最后成功,就直接在 try 末尾加上 onSuccess 的逻辑,失败在 catch 末尾加上 onError 的逻辑,两者都加上 onFinally 的逻辑。
try { const res = await servicePromise; // 省略代码... this.options.onSuccess?.(res, params); // plugin 中 onSuccess 事件 this.runPluginHandler('onSuccess', res, params); // service 执行完成时触发 this.options.onFinally?.(params, res, undefined); if (currentCount === this.count) { // plugin 中 onFinally 事件 this.runPluginHandler('onFinally', params, res, undefined); } return res; // 捕获报错 } catch (error) { // 省略代码... // service reject 时触发 this.options.onError?.(error, params); // 执行 plugin 中的 onError 事件 this.runPluginHandler('onError', error, params); // service 执行完成时触发 this.options.onFinally?.(params, undefined, error); if (currentCount === this.count) { // plugin 中 onFinally 事件 this.runPluginHandler('onFinally', params, undefined, error); } // 抛出错误。 // 让外部捕获感知错误 throw error; }
思考与总结
useRequest 是 ahooks 最核心的功能之一,它的功能非常丰富,可核心代码(Fetch 类)却很简便,这就是插件化机制优势,可以把特定功能交给特定的插件去实现,这样就只需负责主流程的设计,并暴露相应的执行时机即可。
组件/hook 封装真的作用十分大,当我们面对对一个复杂功能的抽象,可以尽可能保证对外接口简单。内部实现需要遵循单一职责的原则,通过类似插件化的机制,细化拆分组件,从而提升组件可维护性、可测试性。
希望大家都可以好好学习,多多实践操作。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/128266.html
大家会发现,自从 React v16.8 推出了 Hooks API,前端框架圈并开启了新的逻辑复用的时代,从此无需在意 HOC 的无限套娃导致性能差的问题,同时也解决了 mixin 的可阅读性差的问题。这里也有对于 React 最大的变化是函数式组件可以有自己的状态,扁平化的逻辑组织方式,更加友好地支持 TS 类型声明。 在运用Hooks的时候,除了 React 官方提供的,同时也支持我们...
摘要:什么样的对象容易找到静态变量和单例。在一个进程之内,静态变量和单例变量是相对不容易发生变化的,因此非常容易定位,而普通的对象则要么无法标志,要么容易改变。 前言 为了实现 App 的快速迭代更新,基于 H5 Hybrid 的解决方案有很多,由于 webview 本身的性能问题,也随之出现了很多基于 JS 引擎实现的原生渲染的方案,例如 React Native、weex 等,而国内一线...
摘要:执行完成后会返回如下图的结果,根据返回数据把源码和存储在的属性上的回调函数中调用类生成,并根据生成依赖后回调方法返回类。 webpack设计模式 一切资源皆Module Module(模块)是webpack的中的关键实体。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. 通过Loaders(模块转换器),用于把模块原内容按照需求转换成新模块内容. 事件驱动架构 we...
阅读 549·2023-03-27 18:33
阅读 736·2023-03-26 17:27
阅读 632·2023-03-26 17:14
阅读 591·2023-03-17 21:13
阅读 522·2023-03-17 08:28
阅读 1803·2023-02-27 22:32
阅读 1294·2023-02-27 22:27
阅读 2179·2023-01-20 08:28