为何React中调用async函数需额外async/await，纯JS却无需？

核心结论：async函数始终返回Promise，两个场景的差异在于你处理数据的位置和方式，而非环境本身。

纯JS场景的本质 #

你在纯JS文件里的代码逻辑是这样的：

const fetchData = async () => {
  const res = await fetch('https://601caf791a9c220017060c02.mockapi.io/api/v1/Events');
  const data = await res.json();
  console.log(data); // 数据处理和打印都在函数内部完成
}

fetchData()

这里你根本没关心fetchData()返回的Promise——因为你要的打印操作已经在async函数内部通过await拿到数据后执行了。调用fetchData()只是触发这个异步流程，你不需要从外部获取它的返回值，所以不需要额外的async/await。

React场景的问题 #

你的React代码把fetchData改成了返回数据的函数：
api.js：

export const fetchData = async () => {
  const res = await fetch(
    "https://601caf791a9c220017060c02.mockapi.io/api/v1/Events"
  );
  const data = await res.json();
  return data; // 函数返回的是被Promise包裹的数据
};

App.js里调用时：

useEffect(() => {
  const results = fetchData();
  console.log(results); // 直接打印了fetchData返回的Promise对象
}, [])

因为async函数的特性，不管你内部return的是什么值，最终都会被自动包裹成Promise返回。你直接打印这个返回值，自然看到的是Promise，而非实际数据。

为什么加async/await就可以？ #

要拿到Promise内部的数据，必须用await去解析它。在useEffect里可以这么写：

useEffect(() => {
  // 定义内部async函数处理异步逻辑
  const loadData = async () => {
    const results = await fetchData();
    console.log(results); // 这里拿到的就是实际数据
  };
  loadData();
}, [])

注意：不能直接把useEffect的回调设为async函数，因为React要求useEffect的回调要么返回清理函数，要么不返回任何值，返回Promise会触发控制台警告。

总结 #

• 纯JS场景：你在async函数内部完成了数据处理，不需要依赖函数返回值，所以看起来“不用额外async/await”。
• React场景：你需要从async函数的返回值里拿数据，就必须用await解析它返回的Promise，才能拿到实际内容。

内容的提问来源于stack exchange，提问作者JavaScript Rookie