异步操作与 useEffect Hook

在 React 中，我们经常需要处理异步操作，如从服务器获取数据、发送请求等等。通常情况下，我们使用回调函数或 Promise 等来处理异步操作。而 useEffect Hook 则可以让我们在函数组件中处理异步操作。本文将介绍如何在 useEffect 中使用 async/await 和 fetch 来处理异步操作。

使用 async/await 处理异步操作

在 useEffect 中使用 async/await 可以方便地处理异步操作。我们可以将 useEffect 声明为 async 函数，然后在函数内部使用 await 来等待异步操作完成。下面是一个例子：

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

function App() {
  const [data, setData] = useState(null);

  useEffect(async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    setData(json);
  }, []);

  return (
    <div>
      {data ? <p>{JSON.stringify(data)}</p> : <p>Loading...</p>}
    </div>
  );
}

export default App;

在上面的例子中，我们使用 async/await 来获取服务器上的数据。由于 useEffect 中不能直接使用 async 函数，我们需要将 useEffect 包装在一个立即调用的 async 函数中。

使用 fetch 发送请求

fetch 是一种现代的网络请求 API，可用于向服务器发送 GET/POST 等请求。在 useEffect 中，我们可以使用 fetch 来发送请求。下面是一个例子：

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

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return (
    <div>
      {data ? <p>{JSON.stringify(data)}</p> : <p>Loading...</p>}
    </div>
  );
}

export default App;

在上面的例子中，我们使用 fetch 来获取服务器上的数据。由于 fetch 返回 Promise，我们使用 then 方法来处理异步操作。setData 将服务器返回的数据保存在本地 state 中。

总结

在 useEffect 中使用 async/await 和 fetch 可以方便地处理异步操作。我们可以将 useEffect 声明为 async 函数，使用 await 来等待异步操作完成，或者使用 fetch 来发送请求。这些方法都是现代的、可靠的方式来处理异步操作。