useRequest-蚂蚁中台标准请求 Hooks，为开发者打造便捷开发环境

前端

2023-12-01 01:03:56

引言

在现代 Web 开发中，随着应用复杂性的增加，如何有效地处理网络请求成为开发中的关键问题之一。useRequest 是蚂蚁金服中台标准请求 Hook，它简化了异步操作和数据获取过程，为开发者提供了强大而灵活的工具。

`useRequest` 的核心功能

统一管理 API 请求：使用 useRequest 可以方便地发起网络请求，并自动处理状态更新。
错误捕获与重试机制：当请求失败时，可以配置重试逻辑，确保数据获取的可靠性。
缓存控制：支持自定义缓存策略，减少重复请求的数据冗余。

使用 `useRequest` 的场景

在日常开发中，开发者常常会遇到以下挑战：

网络请求错误处理复杂且不易维护。
代码分散，难以统一管理多个 API 请求的状态。
缺乏标准化的错误捕获和重试机制。

使用 useRequest 可以有效解决这些问题。通过封装网络请求逻辑，开发者可以更专注于业务实现，减少不必要的编码负担。

安装与配置

安装 useRequest 使用 npm 或 yarn:

npm install @umijs/use-request
# 或者
yarn add @umijs/use-request

引入并使用 useRequest：

import { useRequest } from '@umijs/use-request';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

function Component() {
  const { data, error, loading, run } = useRequest(fetchData);

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

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

高级用法

自定义重试策略

通过 retryCount 和 retryInterval 参数可以自定义重试逻辑：

const { data, error } = useRequest(fetchData, {
  retryCount: 3,
  retryInterval: 1000 // 单位：毫秒
});

缓存控制

使用 cacheTime 属性设置缓存有效期，单位为毫秒：

const { data } = useRequest(fetchData, {
  cacheTime: 60 * 60 * 1000 // 单位：毫秒
});

异步取消请求

在某些情况下，比如组件卸载时需要取消正在执行的异步操作，useRequest 提供了取消功能：

function Component() {
  const { cancel } = useRequest(fetchData, {
    manual: true // 需要手动调用 run 方法触发请求
  });

  useEffect(() => {
    return () => cancel(); // 组件卸载时取消请求
  }, []);

  // ...
}