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，你可以更专注于业务逻辑，减少手动编写异步请求和状态管理的代码。