深入解读ahooks中的useRequest实现原理

在 React 中，处理异步请求通常是应用开发的重要组成部分，useEffect 通常会用来发起请求并管理请求的生命周期。为了简化异步请求的管理和处理，ahooks 提供了一个强大的 useRequest Hook。它不仅封装了异步请求的逻辑，还提供了如节流、防抖、轮询、缓存等功能。

本文将通过源码解读，深入剖析 useRequest 的实现原理，并探讨它如何通过一套灵活的机制来管理复杂的异步逻辑。

1. useRequest 概述

useRequest 是 ahooks 提供的用于管理异步请求的 Hook，解决了 React 中常见的异步操作问题。它不仅可以自动处理请求的状态变化，还提供了多种高级功能，如轮询、节流、错误重试、请求缓存等。

1.1 使用示例

在介绍源码之前，我们先看一下如何使用 useRequest。

tsx

代码解读

复制代码

import { useRequest } from 'ahooks'; const getUserInfo = () => { return fetch('/api/user').then(res => res.json()); }; const UserInfo = () => { const { data, error, loading } = useRequest(getUserInfo); if (loading) { return <div>Loading...</div>; } if (error) { return <div>Error: {error.message}</div>; } return <div>User: {data.name}</div>; };

useRequest 接收一个异步函数 getUserInfo，并返回 loading、error、data 等状态。这种模式使得异步请求的处理变得非常简单和直观。

2. useRequest 的核心结构

要理解 useRequest 的工作机制，我们需要从源码的核心结构开始分析。

2.1 useRequest 的初始化

在 ahooks 中，useRequest 是一个高阶 Hook，内部通过使用多个 Hooks 来实现复杂的逻辑。核心逻辑主要围绕请求的状态管理、生命周期控制以及结果的处理展开。

以下是 useRequest 的核心初始化部分：

tsx

代码解读

复制代码

const useRequest = (service, options) => { // 初始化参数和状态 const { manual = false, ...restOptions } = options || {}; // 使用 useState 管理请求的状态 const [state, setState] = useState({ loading: !manual, data: undefined, error: undefined, }); // 发起请求的核心函数 const run = async (...args) => { try { setState((prevState) => ({ ...prevState, loading: true })); const result = await service(...args); setState({ data: result, loading: false, error: undefined, }); return result; } catch (err) { setState({ error: err, loading: false, data: undefined, }); throw err; } }; return { ...state, run, }; };

2.2 参数说明

• service：这是一个异步函数，用于发起实际的请求。
• options：配置项，用于定制 useRequest 的行为，例如是否手动触发请求（manual）、缓存、节流、轮询等。

在 useRequest 的初始化过程中，会根据 manual 参数判断是否立即发起请求。如果 manual 为 true，则不会自动执行请求，而是通过返回的 run 方法手动触发。

2.3 run 函数

run 是发起异步请求的核心函数。每次执行该函数时，都会更新 loading 状态，表示请求正在进行中。请求成功时，会将返回的数据更新到 state，并设置 loading 为 false。如果请求失败，则会捕获错误并将其存储到 error 状态中。

这个过程看似简单，但 useRequest 还提供了大量额外的功能，这些功能也基于 run 的执行逻辑进行扩展。

3. 高级功能解读

useRequest 的强大之处在于，它不仅仅是一个简单的异步请求 Hook，还内置了许多实用功能，如轮询、节流、防抖等。这些功能都是通过在 run 函数中扩展实现的。

3.1 轮询（Polling）

useRequest 允许通过 pollingInterval 参数设置轮询间隔，以实现定期请求的功能。轮询功能的实现非常灵活，可以手动停止和重新启动。

tsx

代码解读

复制代码

const useRequest = (service, options) => { const { pollingInterval } = options || {}; const run = async (...args) => { try { setState((prevState) => ({ ...prevState, loading: true })); const result = await service(...args); setState({ data: result, loading: false, error: undefined, }); if (pollingInterval) { setTimeout(() => { run(...args); }, pollingInterval); } return result; } catch (err) { setState({ error: err, loading: false, data: undefined, }); throw err; } }; return { ...state, run, }; };

通过 pollingInterval，useRequest 可以在请求完成后，延时再次调用 run 函数，实现轮询效果。

3.2 防抖与节流

在高频率触发请求的场景中（例如搜索建议或实时数据更新），防抖和节流机制可以有效减少请求次数，减轻服务器和前端的负载。useRequest 通过配置 debounceWait 和 throttleWait 参数来支持防抖与节流。

tsx

代码解读

复制代码

const useRequest = (service, options) => { const { debounceWait, throttleWait } = options || {}; const debouncedRun = useMemo(() => { if (debounceWait) { return debounce(run, debounceWait); } return run; }, [debounceWait]); const throttledRun = useMemo(() => { if (throttleWait) { return throttle(run, throttleWait); } return run; }, [throttleWait]); return { ...state, run: debouncedRun || throttledRun, }; };

在这个实现中，通过 debounce 和 throttle 函数对 run 进行封装。debounce 会在用户停止操作后的指定时间内发起请求，而 throttle 则会在指定时间内确保请求只触发一次。

3.3 请求缓存

useRequest 还支持通过 cacheKey 对请求结果进行缓存，避免重复请求相同的数据。在首次请求后，缓存会存储请求的结果，后续相同的请求会直接从缓存中读取结果，而不是再次发起网络请求。

tsx

代码解读

复制代码

const cache = new Map(); const useRequest = (service, options) => { const { cacheKey } = options || {}; const run = async (...args) => { if (cacheKey && cache.has(cacheKey)) { setState({ data: cache.get(cacheKey), loading: false, error: undefined, }); return cache.get(cacheKey); } try { setState((prevState) => ({ ...prevState, loading: true })); const result = await service(...args); cache.set(cacheKey, result); setState({ data: result, loading: false, error: undefined, }); return result; } catch (err) { setState({ error: err, loading: false, data: undefined, }); throw err; } }; return { ...state, run, }; };

通过 cacheKey，useRequest 实现了请求结果的缓存机制，缓存可以大幅减少不必要的网络请求。

4. 总结

useRequest 是一个功能丰富且灵活的异步请求管理 Hook，通过源码解读，我们可以看到它的核心逻辑是围绕请求的状态管理展开，并通过多种配置项扩展功能，包括轮询、防抖、节流、缓存等。在实际项目中，useRequest 可以大幅简化复杂的异步操作，并提供强大的性能优化支持。

在开发大型 React 应用时，合理运用 useRequest，能够提升开发效率、减少重复代码，并确保应用的响应速度和用户体验达到最佳状态。

---

通过深入理解 useRequest 的源码，我们可以更好地掌握其背后的设计思路，并在需要时自行扩展或自定义类似的异步请求管理逻辑。

原文链接：https://juejin.cn/post/7416560533439316006