国内知名设计网站昆明
用法
默认用法
第一参数是异步函数（接口），在组件初次加载时，会自动触发该函数执行。
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，你可以更专注于业务逻辑，减少手动编写异步请求和状态管理的代码。