React网络请求场景使用 useRequest 就够了

2024-02-09 01:34:49

前言

灵感的起源始于 ahooks 的 useRequest 。

背景

我们先来看一个需求：做一个展示图片的页面。

img.tsx

手摸手第一版

我们想通过hooks改造它，此时， useRequest 就发挥作用了。

// img.tsx
import { useRequest } from "use-request";
const imgs = useRequest(() => fetch("/api/imgs"));
// ...

// api/imgs.js
module.exports = async (ctx, next) => {
  await new Promise((r) => setTimeout(r, 300));
  ctx.body = [
    { url: "1.png", desc: "图片1" },
    { url: "2.png", desc: "图片2" },
  ];
};

很轻松，我们实现了数据获取。

// img.tsx
const imgs = useRequest(() => fetch("/api/imgs"));
imgs.loading && <div>Loading...</div>;
imgs.error && <div>{imgs.error.message}</div>;
imgs.data && (
  <>
    <ul>
      {imgs.data.map(({ url, desc }) => (
        <li key={url}>
          <img src={url} alt={desc} />
          {desc}
        </li>
      ))}
    </ul>
  </>
);

useRequest 详解

useRequest 的参数和返回值类型都比较简单。

// 原型
export declare function useRequest<T>(request: UseRequestReturn<T>): UseRequestState<T>;

第一个参数 request 是一个异步函数，第二个参数是返回值，是一个对象。

返回值包含以下属性：

loading：一个布尔值，表示请求是否正在加载。
error：一个错误对象，如果请求失败，则为一个 Error 对象。
data：一个包含请求结果的数据。
run：一个函数，用于手动触发请求。

useRequest 会自动在组件挂载时触发请求，并在请求完成时更新组件状态。

useRequest 还支持一些高级用法，比如：

并发请求：可以使用 useRequest.all 来并发发送多个请求。
请求缓存：可以使用 useRequest.cache 来缓存请求结果。
轮询：可以使用 useRequest.polling 来定期轮询请求。

总结

useRequest 是一个非常强大和易用的 React Hooks，可以帮助你轻松实现网络请求。

如果你还没有尝试过 useRequest，我强烈建议你试试。

它一定会让你在 React 开发中受益匪浅。

在下面的代码示例中，我们将使用 useRequest 来创建一个展示图片的页面。

// img.tsx
import { useRequest } from "use-request";
const imgs = useRequest(() => fetch("/api/imgs"));
imgs.loading && <div>Loading...</div>;
imgs.error && <div>{imgs.error.message}</div>;
imgs.data && (
  <>
    <ul>
      {imgs.data.map(({ url, desc }) => (
        <li key={url}>
          <img src={url} alt={desc} />
          {desc}
        </li>
      ))}
    </ul>
  </>
);

// api/imgs.js
module.exports = async (ctx, next) => {
  await new Promise((r) => setTimeout(r, 300));
  ctx.body = [
    { url: "1.png", desc: "图片1" },
    { url: "2.png", desc: "图片2" },
  ];
};