NextJS中useEffect结合fetch与setState时，async/await与.then的边缘问题对比

先说明：本文不讨论JavaScript中async/await和.then的通用区别，只聚焦在React useEffect钩子内执行Fetch请求并调用setState这个特定场景下的边缘情况处理。

下面这两种在useEffect里发起请求的写法，哪一种更能应对常见边缘情况？我们的目标是：

• 选更稳、更具前瞻性的写法
• 明确这个场景下需要留意的常见边缘情况

两种写法代码如下：

// Method 1
useEffect(() => {
    const response = fetch('/api/tacos', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },
    })
        .then((response) => response.json())
        .then(({ data }) => {
            console.log('Success:', data);
            setTacosArray(() => data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
}, []);

// Method 2
useEffect(() => {
    const fetchData = async () => {
        try {
            const response = await fetch('/api/tacos', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
            const { data } = await response.json();
            console.log('Success:', data);
            setTacosArray(() => data);
        } catch (error) {
            console.error('error', error);
        }
    };

    fetchData();
}, []);

两种写法的边缘情况处理能力对比 #

两种写法本质都是基于Promise，但在这个特定场景下，Method 2（async/await）更能应对边缘情况，核心原因是它的线性结构让逻辑更清晰、维护和扩展更方便，具体看下面这些常见场景：

常见边缘情况及表现 #

• 请求中途组件卸载（内存泄漏风险）
  当请求还在进行时组件被卸载，两种写法都会出现「调用已卸载组件的setState」的警告，但async/await写法更容易结合清理函数解决问题。比如搭配AbortController取消请求，逻辑衔接更自然：

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;
  
    const fetchData = async () => {
      try {
        const response = await fetch('/api/tacos', {
          method: 'GET',
          headers: { 'Content-Type': 'application/json' },
          signal
        });
        const { data } = await response.json();
        setTacosArray(data);
      } catch (error) {
        // 忽略取消请求的错误
        if (error.name !== 'AbortError') {
          console.error('请求错误:', error);
        }
      }
    };
  
    fetchData();
  
    // 组件卸载时取消请求
    return () => controller.abort();
  }, []);
  

  虽然.then写法也能实现同样逻辑，但链式结构容易让清理逻辑和请求逻辑脱节，增加遗漏风险。

• 多步骤异步操作的错误处理
  如果请求后还要执行其他异步操作（比如再调用另一个API），.then链式写法很容易陷入嵌套（回调地狱），而async/await的线性结构可以用单个try/catch覆盖所有异步步骤，不会漏掉某个环节的错误捕获，代码可读性也更高。

• HTTP状态码非2xx的处理
  Fetch API只有网络错误才会触发catch，像404、500这类HTTP错误不会进入catch。两种写法都需要手动判断response.ok，但async/await能把判断逻辑和请求逻辑放在同一块，更连贯：

  const response = await fetch('/api/tacos');
  if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`);
  }
  const { data } = await response.json();
  

  这种写法比在.then里单独加判断更不容易出错。

• 调试效率
  调试异步代码时，async/await的线性结构可以直接按顺序断点，追踪每一步执行；而.then链式写法需要在每个回调里单独断点，调试起来更麻烦。

结论 #

在React useEffect结合Fetch请求的场景下，Method 2（async/await）是更优的选择，它的线性结构让代码更易维护、错误处理更集中，也更方便扩展复杂逻辑。另外，一定要搭配AbortController的清理函数，这是避免内存泄漏的关键步骤。

内容的提问来源于stack exchange，提问作者Octo Palm Tree