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

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

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

1. useRequest 概述

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

1.1 使用示例

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

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 的核心初始化部分：

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 参数设置轮询间隔，以实现定期请求的功能。轮询功能的实现非常灵活，可以手动停止和重新启动。

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 参数来支持防抖与节流。

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 对请求结果进行缓存，避免重复请求相同的数据。在首次请求后，缓存会存储请求的结果，后续相同的请求会直接从缓存中读取结果，而不是再次发起网络请求。

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 的源码，我们可以更好地掌握其背后的设计思路，并在需要时自行扩展或自定义类似的异步请求管理逻辑。