useRequest 里面的loading是怎么实现的

useRequest function simplification

function useRequest(asyncFn, options) {

const [loading, setLoading] = useState(false);

const run = async () => {

setLoading(true);

try {

await asyncFn();

} catch (error) {

// Handle error if necessary

} finally {

setLoading(false);

}

};

useEffect(() => {

if (options.manual) {

return; // If manual option is true, don't trigger the request automatically

}

run(); // Trigger the request automatically

}, []);

return { run, loading };

}

In this example, the useRequest hook uses the useState hook to manage the loading state, which starts as false. When the run function is called, it sets loading to true before executing the asyncFn asynchronously. After the asyncFn completes (either successfully or with an error), the loading state is set back to false using the finally block.

The useEffect hook is used to automatically trigger the request when the component using useRequest mounts (empty dependency array []). However, if the manual option is set to true, the request won't be triggered automatically, and it's up to the consumer of the hook to call run manually when desired.

So, in this example, the loading state is managed internally by the useRequest hook. It is set to true before the async function is called and then set to false once the async function completes, regardless of whether it returns a value or not.