插件化机制优雅封装你的hook请求使用方式_React_

function useRequest( service: Service, options?: Options, plugins?: Plugin[], ) { return useRequestImplement(service, options, [ // 插件列表，用来拓展功能，一般用户不使用。文档中没有看到暴露 API ...(plugins || []), useDebouncePlugin, useLoadingDelayPlugin, usePollingPlugin, useRefreshOnWindowFocusPlugin, useThrottlePlugin, useAutoRunPlugin, useCachePlugin, useRetryPlugin, ] as Plugin[]); } export default useRequest; 

const update = useUpdate(); // 保证请求实例都不会发生改变 const fetchInstance = useCreation(() => { // 目前只有 useAutoRunPlugin 这个 plugin 有这个方法 // 初始化状态，返回 { loading: xxx }，代表是否 loading const initState = plugins.map((p) => p?.onInit?.(fetchOptions)).filter(Boolean); // 返回请求实例 return new Fetch( serviceRef, fetchOptions, // 可以 useRequestImplement 组件 update, Object.assign({}, ...initState), ); }, []); fetchInstance.options = fetchOptions; // run all plugins hooks // 执行所有的 plugin，拓展能力，每个 plugin 中都返回的方法，可以在特定时机执行 fetchInstance.pluginImpls = plugins.map((p) => p(fetchInstance, fetchOptions)); 

export default class Fetch { // 插件执行后返回的方法列表 pluginImpls: PluginReturn[]; count: number = 0; // 几个重要的返回值 state: FetchState = { loading: false, params: undefined, data: undefined, error: undefined, }; constructor( // React.MutableRefObject —— useRef创建的类型，可以修改 public serviceRef: MutableRefObject>, public options: Options, // 订阅-更新函数 public subscribe: Subscribe, // 初始值 public initState: Partial> = {}, ) { this.state = { ...this.state, loading: !options.manual, // 非手动，就loading ...initState, }; } // 更新状态 setState(s: Partial> = {}) { this.state = { ...this.state, ...s, }; this.subscribe(); } // 执行插件中的某个事件（event），rest 为参数传入 runPluginHandler(event: keyof PluginReturn, ...rest: any[]) { // 省略代码... } // 如果设置了 options.manual = true，则 useRequest 不会默认执行，需要通过 run 或者 runAsync 来触发执行。 // runAsync 是一个返回 Promise 的异步函数，如果使用 runAsync 来调用，则意味着你需要自己捕获异常。 async runAsync(...params: TParams): Promise { // 省略代码... } // run 是一个普通的同步函数，其内部也是调用了 runAsync 方法 run(...params: TParams) { // 省略代码... } // 取消当前正在进行的请求 cancel() { // 省略代码... } // 使用上一次的 params，重新调用 run refresh() { // 省略代码... } // 使用上一次的 params，重新调用 runAsync refreshAsync() { // 省略代码... } // 修改 data。参数可以为函数，也可以是一个值 mutate(data?: TData | ((oldData?: TData) => TData | undefined)) { // 省略代码... } 

// 几个重要的返回值 state: FetchState = { loading: false, params: undefined, data: undefined, error: undefined, }; // 更新状态 setState(s: Partial> = {}) { this.state = { ...this.state, ...s, }; this.subscribe(); } 

export interface PluginReturn { onBefore?: (params: TParams) => | ({ stopNow?: boolean; returnNow?: boolean; } & Partial>) | void; onRequest?: ( service: Service, params: TParams, ) => { servicePromise?: Promise; }; 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; } 

// 执行插件中的某个事件（event），rest 为参数传入 runPluginHandler(event: keyof PluginReturn, ...rest: any[]) { // @ts-ignore const r = this.pluginImpls.map((i) => i[event]?.(...rest)).filter(Boolean); return Object.assign({}, ...r); } 

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); 

// replace service // 如果有 cache 的实例，则使用缓存的实例 let { servicePromise } = this.runPluginHandler('onRequest', this.serviceRef.current, params); if (!servicePromise) { servicePromise = this.serviceRef.current(...params); } const res = await servicePromise; 

// 请求阶段 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 }; },