实现一个简单的 useAsync

2024-02-20 23:09:32

作为一名技术博客创作专家，我经常需要撰写关于复杂主题的文章。虽然我精通互联网语言并具备丰富的词汇量，但我也明白简洁和易懂的重要性。因此，当涉及到编写有关 useAsync 的文章时，我的目标是提供一个既全面又通俗易懂的指南。

useAsync 是一个 React Hook，可用于异步获取数据。与 useRequest 和 useSWR 等其他流行的联网 Hook 不同，useAsync 更加灵活且可定制。在本文中，我将向你展示如何实现一个简单的 useAsync Hook，并解释其工作原理。

实现

要实现一个简单的 useAsync Hook，可以使用以下步骤：

创建一个 React 组件来包装你的异步函数：

import React, { useState, useEffect } from 'react';

const AsyncWrapper = ({ asyncFunction, onSuccess, onError }) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    asyncFunction()
      .then(res => {
        setData(res);
        setLoading(false);
        if (onSuccess) onSuccess(res);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
        if (onError) onError(err);
      });
  }, [asyncFunction]);

  return { data, loading, error };
};

在你的 React 组件中使用 AsyncWrapper ：

import { AsyncWrapper } from './AsyncWrapper';

const MyComponent = () => {
  const asyncFunction = () => fetch('https://example.com/api/data');

  const { data, loading, error } = AsyncWrapper({
    asyncFunction,
    onSuccess: (res) => console.log('Data fetched successfully'),
    onError: (err) => console.log('Error fetching data'),
  });

  return (
    <>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <p>{JSON.stringify(data)}</p>}
    </>
  );
};

工作原理

useAsync Hook 的工作原理如下：

AsyncWrapper 组件使用 useState 和 useEffect hook 来管理数据、加载状态和错误状态。
当 useAsync Hook 被调用时，它会创建一个 AsyncWrapper 组件实例并返回其状态。
AsyncWrapper 组件在挂载时调用 asyncFunction 。
asyncFunction 返回一个 Promise。如果 Promise resolved，data 状态将更新为 Promise 的结果，loading 状态将变为 false 。
如果 Promise rejected，error 状态将更新为 Promise 的错误对象，loading 状态将变为 false 。
onSuccess 和 onError 回调函数在 Promise resolved 或 rejected 时调用。