时间戳

首页 > 解决方案 > 在 useEffect 中使用异步函数的首选方式

reactjs - 在 useEffect 中使用异步函数的首选方式

问题描述

我知道在 useEffect 中使用异步函数的两种方法。我在某处读到第一种方法是错误的。你认为哪种方式更好？

第一种方法

async function fetchData() {
  const result = await axios(
    'https://hn.algolia.com/api/v1/search?query=react',
  );
  setData(result.data);
}

useEffect(() => {
  fetchData();
}, [miliko]);

第二种方法

useEffect(() => {
    async function fetchData() {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=react',
      );
      setData(result.data);
    }

    fetchData();
  }, [miliko]);

标签： reactjs

解决方案

两种解决方案都是正确的，只要 fetchData 使用的数据在其词法范围内，它们就可以工作

这两种方法的唯一区别是，fetchData在第一种情况下，每次渲染都会创建一个新的引用，而在第二种情况下，只会在初始渲染和miliko更改时创建一个新的引用

要将相关代码放在一起，您可以继续使用第二种方法，如果发出新请求，您可以更轻松地取消先前的请求，这样您就不会看到不一致的地方

useEffect(() => {

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    async function fetchData() {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=react', {
             cancelToken: source.token
         }
      );
      setData(result.data);
    }

  fetchData();

  return () => {
      source.cancel('Effect cleared');
  }
}, [miliko]);

推荐阅读