为何提示fetch函数从未被await？已用await仍报错的异步请求问题

嘿，这个问题我帮好多开发者排查过，大概率是这几个常见场景之一，你对照着自己的代码看看：

1. await 出现在非 async 函数里 #

这是最容易踩的坑！await 只能在 async 标记的函数 或者 ES模块的顶层作用域 里使用。如果你的代码是在普通函数里用了await，JS引擎会直接报错，这时候你写的await fetch(...)其实根本没生效，自然会提示你fetch没被await。

举个错误例子：

function getMyData() {
  // 这里直接报错：await is only valid in async functions and the top level bodies of modules
  const res = await fetch('/api/user');
  const data = await res.json();
  return data;
}

修正方法很简单，给函数加上async关键字：

async function getMyData() {
  const res = await fetch('/api/user');
  const data = await res.json();
  return data;
}

2. 只await了后续的json()，没await fetch本身 #

有时候你可能会不小心把await只加在了response.json()上，而忽略了fetch()本身。虽然json()返回的也是Promise，但fetch()返回的Promise没被await的话，JS还是会提示你“fetch从未被await”，而且还可能因为fetch还没完成就调用json()导致潜在问题。

错误示例：

async function getMyData() {
  // 这里fetch没加await！
  const res = fetch('/api/user');
  // 虽然这里await了json，但fetch本身的Promise没被处理
  const data = await res.json();
  return data;
}

修正就是给fetch()也加上await：

async function getMyData() {
  const res = await fetch('/api/user');
  const data = await res.json();
  return data;
}

3. 循环/分支里的fetch漏了await #

比如在forEach循环里调用fetch，哪怕你在循环内部的函数里加了async，forEach也不会等待这些Promise完成，而且如果没显式await的话，也会触发“fetch未被await”的提示。

错误示例：

async function fetchAllPosts() {
  const postIds = [1,2,3];
  postIds.forEach(id => {
    // 这里的fetch没被await，forEach也不会处理这个Promise
    fetch(`/api/posts/${id}`);
  });
}

如果要串行请求（一个接一个），用for...of循环：

async function fetchAllPosts() {
  const postIds = [1,2,3];
  for (const id of postIds) {
    const res = await fetch(`/api/posts/${id}`);
    const post = await res.json();
    console.log(post);
  }
}

如果要并行请求（同时发起），用Promise.all：

async function fetchAllPosts() {
  const postIds = [1,2,3];
  // 先把所有fetch请求转成Promise数组
  const postPromises = postIds.map(id => 
    fetch(`/api/posts/${id}`).then(res => res.json())
  );
  // 等待所有Promise完成
  const allPosts = await Promise.all(postPromises);
  console.log(allPosts);
}

4. 顶层await的环境不支持 #

如果你在脚本顶层直接用await fetch(...)，但环境不支持顶层await的话，也会报错，导致fetch的await没生效。比如：

• 在浏览器里，普通脚本标签（没有type="module"）不支持顶层await；
• Node.js版本低于14.8，或者没启用ES模块（比如没加"type": "module"在package.json里）。

错误示例（浏览器）：

<script>
  // 报错：await is only valid in async functions and the top level bodies of modules
  const res = await fetch('/api/user');
</script>

修正方法：把脚本改成模块类型：

<script type="module">
  const res = await fetch('/api/user');
  const data = await res.json();
  console.log(data);
</script>

内容的提问来源于stack exchange，提问作者vishal choudhary