React开发中是否所有API调用都需要使用异步方式？

没有适用于所有场景的标准答案，但99%的React业务场景下你都应该用异步方式发起API调用，同步请求基本属于需要极力避免的反模式，只有极其边缘的历史遗留场景才会被迫使用，且这类场景大多已经有更优的异步替代方案。

本质原因是浏览器的JS运行在单线程上，同步发起的网络请求会直接阻塞主线程：请求发出去到收到响应的这段时间里，React的组件渲染、用户点击/输入响应、CSS动画全都会被卡住，连加载提示都转不动，用户体感和页面崩溃没有区别。
以下是绝对适合用异步调用的典型场景：

• 常规业务数据拉取：比如商品列表加载、个人中心信息拉取、表单提交等待返回结果，搭配async/await语法、React状态管理加载/错误态，或者用SWR、React Query这类成熟请求库做缓存、重试，体验流畅不卡页。
• 无强依赖的上报类请求：比如用户行为埋点、操作日志上报，异步发送不需要等待接口响应，用户点击后可以立刻跳转、弹窗，不会有延迟感。
• 懒加载类请求：比如滚动到底部加载下一页、鼠标hover才拉取预览信息、按需加载模块的配套接口，不会阻塞首屏的渲染和交互。
• 多请求编排场景：比如首屏需要同时拉取用户信息、导航配置、首页Banner，用Promise.all异步并行发请求，比同步串行等待的速度快数倍。

很多人觉得需要用同步的场景，本质上是把「业务流程上需要等待接口返回才能走下一步」和「技术实现上必须用同步阻塞请求」搞混了。

比如你要做“提交表单时不允许用户重复点击、必须等接口返回才跳转到结果页”，完全可以在异步请求发起时给按钮加loading态、弹全局透明遮罩拦截点击，等请求结束再做跳转，体验远好于同步请求把整个页面卡死。

真正会考虑同步请求的场景极其有限，且基本都有更好的替代：

• 页面关闭前的强送达请求：早期用户关闭/刷新页面前要提交未保存的草稿时，会用同步XHR保证请求不被页面销毁中断，但现在现代浏览器已经开始限制beforeunload阶段的同步请求，更推荐用navigator.sendBeacon实现——这个API是异步的，但会由浏览器保证在页面销毁后把请求发出去，不会阻塞页面关闭。
• 十年以上历史遗留的老旧内部系统：这类系统没有做前端工程化，甚至连加载态都懒得写，会用同步请求凑功能，但这属于历史债务，不是值得参考的实践。

反例，绝对不要在React里这么写：

// 同步XHR会直接卡主线程，请求期间页面完全无响应
const xhr = new XMLHttpRequest();
// 第三个参数传false代表开启同步模式
xhr.open('GET', '/api/current-user', false);
xhr.send();
const userInfo = JSON.parse(xhr.responseText);

常规的React异步请求写法：

import { useState, useEffect } from 'react';

function UserProfile() {
  const [userInfo, setUserInfo] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await fetch('/api/current-user');
        setUserInfo(await res.json());
      } catch (err) {
        console.error('拉取用户信息失败', err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (loading) return <div>加载中...</div>;
  return <div>欢迎回来，{userInfo.name}</div>;
}

内容的提问来源于stack exchange，提问作者Kelden Mayer