useRequest

用法

默认用法

第一参数是异步函数（接口），在组件初次加载时，会自动触发该函数执行。

const { data, error, loading } = useRequest(getUsername);

第二个参数，是一个配置选项（一个对象）

详解

useRequest 是 ahook 库中提供的一个强大工具，用于简化异步请求的管理。它使得在 React 组件中发起、管理、跟踪异步请求变得更加容易和直观。useRequest 封装了异步请求的状态管理和副作用处理，提供了更高效、更简洁的方式来处理数据获取逻辑。

useRequest 的主要功能

1. 自动管理请求状态: useRequest 自动处理请求的加载状态、错误状态和数据状态，使你可以轻松访问这些状态，而不需要手动编写大量的状态管理代码。

2. 请求取消: 支持请求取消功能，避免在组件卸载时仍然处理请求的结果。

3. 请求重试: 提供了请求重试的功能，能够在请求失败时自动重试请求。

4. 缓存支持: 可以配置缓存策略，以减少不必要的网络请求。

5. 分页与缓存: 支持分页请求和缓存机制，使得数据请求更加灵活和高效。

使用示例

以下是一个简单的示例，演示如何使用 useRequest 来发起一个异步请求并管理其状态：

import React from 'react';
import { useRequest } from 'ahook';

// 模拟一个异步请求函数
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function MyComponent() {
  // 使用 useRequest 来管理请求
  const { data, error, loading, run } = useRequest(fetchData, {
    manual: true, // 手动触发请求
  });

  // 触发请求的函数
  const handleFetchData = () => {
    run();
  };

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

  return (
    <div>
      <button onClick={handleFetchData}>Fetch Data</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default MyComponent;

配置选项

useRequest 提供了一些配置选项来定制请求行为：

• manual: 是否手动触发请求，默认为 false，即组件挂载时自动发起请求。设置为 true 时，需要手动调用 run 函数来发起请求。
• onSuccess: 请求成功后的回调函数。
• onError: 请求失败后的回调函数。
• cacheKey: 请求缓存的 key，用于缓存管理。
• retryCount: 请求失败时自动重试的次数。

总结

useRequest 提供了一种简化异步请求的方式，帮助开发者更高效地处理请求状态、错误处理和数据缓存等问题。通过使用 useRequest，你可以更专注于业务逻辑，减少手动编写异步请求和状态管理的代码。