用法
默认用法
第一参数是异步函数(接口),在组件初次加载时,会自动触发该函数执行。
const { data, error, loading } = useRequest(getUsername);
第二个参数,是一个配置选项(一个对象)
详解
useRequest
是 ahook
库中提供的一个强大工具,用于简化异步请求的管理。它使得在 React 组件中发起、管理、跟踪异步请求变得更加容易和直观。useRequest
封装了异步请求的状态管理和副作用处理,提供了更高效、更简洁的方式来处理数据获取逻辑。
useRequest
的主要功能
-
自动管理请求状态:
useRequest
自动处理请求的加载状态、错误状态和数据状态,使你可以轻松访问这些状态,而不需要手动编写大量的状态管理代码。 -
请求取消: 支持请求取消功能,避免在组件卸载时仍然处理请求的结果。
-
请求重试: 提供了请求重试的功能,能够在请求失败时自动重试请求。
-
缓存支持: 可以配置缓存策略,以减少不必要的网络请求。
-
分页与缓存: 支持分页请求和缓存机制,使得数据请求更加灵活和高效。
使用示例
以下是一个简单的示例,演示如何使用 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
,你可以更专注于业务逻辑,减少手动编写异步请求和状态管理的代码。