ahooks中的核心hook-useRequest（上）

news2024/9/24 15:03:59

前言

useRequest是一个异步数据管理的hooks，是ahooks Hooks库的核心hook，因为其通过插件式组织代码，大部分功能都通过插件的形式来实现，所以其核心代码行数较少，简单易懂，还可以支持我们自定义扩展功能。可以说，useRequest能处理React项目绝大多数的网络请求场景。

让咱自己写可能写不出来，那就先从模仿开始，通过阅读useRequest的代码，从中学习大佬们的代码逻辑和思维处理。

前置hook了解

在useRequest的源码实现中使用到了一些其他的hooks

useCreation：useMemo 或 useRef 的替代品。
useLatest：返回当前最新值的 Hook，可以避免闭包问题。
useMemoizedFn：useCallback的替代品。
useMount：只在组件初始化时执行的 Hook。
useUnmount：在组件卸载（unmount）时执行的 Hook。
useUpdate：强制组件重新渲染的hook。

实现最基础的useRequest Hook

const { data, error, loading, cancel} = useRequest(service);

useRequest通过定义一个class类Fetch 来维护相关的数据（data，loading等）和方法（run， refresh等）然后在useRequestImplement中创建Fetch实例，并返回实例属性和方法。

我对代码进行了拆分，保留了useRequest中核心的功能，该hook接收一个promise，需要返回data、error、loading、cancel状态。

const useRequestImplement = (service: Promise<any>) => {const serviceRef = useLatest(service);const update = useUpdate();const fetchInstance = useCreation(() => {return new Fetch(serviceRef, update);}, []);useMount(() => {// useCachePlugin can set fetchInstance.state.params from cache when initconst params = fetchInstance.state.params ?? [];// @ts-ignorefetchInstance.runAsync(...params);});useUnmount(() => {fetchInstance.cancel();});return {loading: fetchInstance.state.loading,data: fetchInstance.state.data,error: fetchInstance.state.error,params: fetchInstance.state.params || [],cancel: useMemoizedFn(fetchInstance.cancel.bind(fetchInstance)),};
};

export default class Fetch<TData, TParams extends any[]> {public count: number = 0;public state = {loading: false,params: undefined,data: undefined,error: undefined,};constructor(public serviceRef, public subscribe) {}setState(s) {this.state = {...this.state,...s,};this.subscribe();}async runAsync(...params: TParams): Promise<any> {this.count += 1;const currentCount = this.count;this.setState({loading: true,params,});try {const servicePromise = this.serviceRef.current(...params);const res = await servicePromise;if (currentCount !== this.count) {return new Promise(() => {});}this.setState({data: res,error: undefined,loading: false,});return res;} catch (error) {if (currentCount !== this.count) {// prevent run.then when request is canceledreturn new Promise(() => {});}this.setState({error,loading: false,});throw error;}}cancel() {this.count += 1;this.setState({loading: false,});}refreshAsync() {// @ts-ignorereturn this.runAsync(...(this.state.params || []));}
}

实现剩余核心功能

接收用户的自定义配置，包括manual(手动模式)和一些回调函数（onBefore,onSuccess, onError,onFinally）

const useRequestImplement = (service: Promise<any>, options) => {const { manual = false, ...rest } = options;const fetchOptions = {manual,...rest,};// const serviceRef = useLatest(service);// const update = useUpdate();// const fetchInstance = useCreation(() => {return new Fetch(serviceRef, fetchOptions, update);// }, []);fetchInstance.options = fetchOptions;useMount(() => {if (!manual) {const params = fetchInstance.state.params || options.defaultParams || [];// @ts-ignorefetchInstance.run(...params);}});// useUnmount(() => {// fetchInstance.cancel();// });return {// loading: fetchInstance.state.loading,// data: fetchInstance.state.data,// error: fetchInstance.state.error,// params: fetchInstance.state.params || [],// cancel: useMemoizedFn(fetchInstance.cancel.bind(fetchInstance)),refresh: useMemoizedFn(fetchInstance.refresh.bind(fetchInstance)),refreshAsync: useMemoizedFn(fetchInstance.refreshAsync.bind(fetchInstance)),run: useMemoizedFn(fetchInstance.run.bind(fetchInstance)),runAsync: useMemoizedFn(fetchInstance.runAsync.bind(fetchInstance)),mutate: useMemoizedFn(fetchInstance.mutate.bind(fetchInstance)),};
};

export default class Fetch<TData, TParams extends any[]> {
// public count: number = 0;
// 
// public state = {
// loading: false,
// params: undefined,
// data: undefined,
// error: undefined,
// };constructor(public serviceRef, public options, public subscribe) {this.state = {...this.state,loading: !options.manual,};}// setState(s) {// this.state = {// ...this.state,// ...s,// };// this.subscribe();// }
// async runAsync(...params: TParams): Promise<any> {
// this.count += 1;
// const currentCount = this.count;
// 
// this.setState({
// loading: true,
// params,
// });
// this.options.onBefore?.(params);
// try {
// const servicePromise = this.serviceRef.current(...params);
// const res = await servicePromise;
// if (currentCount !== this.count) {
// return new Promise(() => {});
// }
// this.setState({
// data: res,
// error: undefined,
// loading: false,
// });
// this.options.onSuccess?.(res, params);this.options.onFinally?.(params, res, undefined);
// 
// return res;
// } catch (error) {
// if (currentCount !== this.count) {
// // prevent run.then when request is canceled
// return new Promise(() => {});
// }
// this.setState({
// error,
// loading: false,
// });
// this.options.onError?.(error, params);this.options.onFinally?.(params, undefined, error);
// throw error;
// }
// }

// cancel() {
// this.count += 1;
// this.setState({
// loading: false,
// });
// }
// 
// refreshAsync() {
// // @ts-ignore
// return this.runAsync(...(this.state.params || []));
// }run(...params: TParams) {this.runAsync(...params).catch((error) => {if (!this.options.onError) {console.error(error);}});}refresh() {// @ts-ignorethis.run(...(this.state.params || []));}mutate(data?: TData | ((oldData?: TData) => TData | undefined)) {const targetData = isFunction(data) ? data(this.state.data) : data;this.setState({data: targetData,});}
}