彻底剖析useEffect中的异步请求执行方式，引领你成为React开发高手

2023-09-27 00:13:08

useEffect中的异步请求：提升React应用程序的动态性和交互性

一、异步请求在useEffect中的重要性

现代前端开发中，异步请求已成为不可或缺的一部分。它使我们能够从服务器动态获取数据，更新页面内容，从而带来更流畅、更交互性的用户体验。在React中，useEffect Hook是我们处理异步请求的利器，因为它允许我们在组件生命周期中执行副作用，例如发送请求和更新状态。

二、useEffect中执行异步请求的4种方式

使用异步函数表达式

最简单的方法是在useEffect中直接使用异步函数表达式。它允许我们在函数体内使用await，暂停执行直到异步请求完成。

useEffect(() => {
  async function fetchData() {
    const response = await fetch('https://example.com/api/data');
    const data = await response.json();
    setState(data);
  }

  fetchData();
}, []);

使用IIFE

立即执行函数表达式（IIFE）可以将异步请求与useEffect分离开来，提升代码可读性。

useEffect(() => {
  (async () => {
    const response = await fetch('https://example.com/api/data');
    const data = await response.json();
    setState(data);
  })();
}, []);

使用Promise.then

这是处理异步请求的经典方法。它允许我们在请求完成后执行回调函数。

useEffect(() => {
  fetch('https://example.com/api/data')
    .then((response) => response.json())
    .then((data) => setState(data));
}, []);

使用函数声明

函数声明可将异步请求封装为一个独立函数，然后在useEffect中调用它。

const fetchData = async () => {
  const response = await fetch('https://example.com/api/data');
  const data = await response.json();
  return data;
};

useEffect(() => {
  fetchData().then((data) => setState(data));
}, []);