如何让JavaScript后续代码等待fetch请求执行完成后再运行

方案1：使用async/await语法（最推荐） #

这是ES2017推出的异步语法，完全消除回调嵌套，代码逻辑和同步写法完全一致，可读性极高：

// 将依赖接口数据的逻辑统一封装到异步函数中
async function main() {
  const response = await fetch('php/get_comm.php');
  // fetch内置json()方法，无需手动转text再parse，减少冗余代码
  const communities = await response.json();

  // 原来写在continueScript里的所有逻辑，直接在这里写即可
  console.log(communities);
  // ... 剩余脚本代码
}

main().catch(err => {
  // 统一捕获请求、JSON解析、业务逻辑的异常
  console.error('脚本执行出错：', err);
});

如果你的运行环境支持顶层await（现代浏览器、Node.js 14.8+以上版本），甚至不需要额外封装async函数，直接在脚本顶层写即可：

const response = await fetch('php/get_comm.php');
const communities = await response.json();
// 后续逻辑直接写在后面

方案2：封装Promise复用逻辑（适合多场景调用） #

如果多个地方需要用到这份接口数据，可以把请求逻辑封装成独立的返回Promise的方法，按需调用：

// 单独封装请求方法，复用性更高
function fetchCommunities() {
  return fetch('php/get_comm.php').then(res => res.json());
}

// 需要用到数据的地方直接调用即可
fetchCommunities()
  .then(communities => {
    // 业务逻辑写在这里
    console.log(communities);
    // ...
  })
  .catch(err => {
    console.error('获取社区数据失败：', err);
  });

额外优化提示：你原来的实现没有加异常捕获逻辑，一旦网络请求失败、接口返回非JSON格式数据，会直接导致脚本抛出未捕获异常，建议所有异步逻辑都加上catch做异常降级处理。

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