ahooks useRequest：揭秘其工作原理

2023-12-11 03:48:37

引言

在 React 生态系统中，ahooks 库提供了一系列实用且高效的 hooks，其中 useRequest 尤其引人注目。它简化了异步请求和数据获取的处理，大大提高了开发效率。本文将带你深入 ahooks 源码，探究 useRequest 的内部机制，帮助你更好地理解其工作原理，从而更有效地利用该 hook。

ahooks useRequest 的实现原理

useRequest hook 的实现主要依赖于以下几个关键插件：

createRequest: 创建请求函数。
createSuspense: 创建一个 Suspense 组件。
createCache: 创建一个缓存。
createError: 创建一个错误处理函数。

1. 创建请求函数

createRequest 函数负责创建实际的请求函数。它接收以下参数：

options: 请求选项，包括 URL、方法、正文等。
cache: 缓存实例。
error: 错误处理函数。

createRequest 函数内部主要做了以下几件事：

生成请求 ID，用于缓存和错误处理。
创建一个 fetcher 函数，用于执行实际的请求。
创建一个 run 函数，用于触发请求的执行。

2. 创建 Suspense 组件

createSuspense 函数创建一个 Suspense 组件，用于处理异步请求期间的悬浮状态。Suspense 组件内部主要做了以下几件事：

根据请求 ID 从缓存中获取数据。
如果数据存在，则直接渲染数据。
如果数据不存在，则显示一个加载指示器。
当数据获取成功时，更新缓存并渲染数据。
当数据获取失败时，抛出错误。

3. 创建缓存

createCache 函数创建一个缓存实例，用于存储请求结果。缓存实例主要做了以下几件事：

根据请求 ID 存储和检索数据。
提供过期策略，以确保缓存数据的及时性。
支持并发请求，避免重复请求。

4. 创建错误处理函数

createError 函数创建一个错误处理函数，用于处理请求失败的情况。错误处理函数主要做了以下几件事：

记录错误。
抛出错误。
触发错误边界。

useRequest hook 的使用

有了这些插件，useRequest hook 的实现就变得相对简单了。它主要做了以下几件事：

调用 createRequest 函数创建请求函数。
调用 createSuspense 函数创建 Suspense 组件。
将请求函数和 Suspense 组件暴露给用户。

用户可以使用 useRequest hook 来触发异步请求并获取数据。如果请求正在进行，Suspense 组件将显示加载指示器。当请求成功完成时，Suspense 组件将渲染请求结果。如果请求失败，Suspense 组件将抛出错误，触发错误边界。

示例代码

以下是一个使用 useRequest hook 的示例代码：

import { useRequest } from 'ahooks';

const Example = () => {
  const { data, loading, error } = useRequest(() => {
    return fetch('/api/data').then(res => res.json());
  });

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>{data}</div>;
};