为何无法在loadData()函数外部访问field_count变量？

核心原因 #

你代码里的await loadData()如果是在非async函数的顶层作用域执行，在很多环境（比如传统浏览器脚本、非ES模块的Node.js环境）里不支持顶层await，此时await会被直接忽略，代码会跳过等待loadData执行完成，直接运行后面的alert(field_count)——这时候fetch请求还没拿到数据，field_count自然还是undefined。

就算环境支持顶层await，也要确保脚本被标记为ES模块（比如浏览器里加type="module"），否则顶层await依然无效。

解决办法 #

方法1：把代码放到async函数里执行 #

将顶层代码包裹进async函数，确保await能正常生效：

var field_count;

async function init() {
  await loadData();
  alert(field_count); // 现在能拿到正确值
}

async function loadData() {
  var response = await fetch('/get_data');
  var data = await response.json();

  field_count = data.field_count;
  alert(field_count); // 显示正确数据
}

init(); // 启动初始化流程

方法2：用.then()链式调用替代await #

如果不想用async函数包裹，也可以借助Promise的.then()方法，确保在数据加载完成后再访问变量：

var field_count;

function loadData() {
  return fetch('/get_data')
    .then(response => response.json())
    .then(data => {
      field_count = data.field_count;
      alert(field_count); // 显示正确数据
    });
}

loadData().then(() => {
  alert(field_count); // 数据加载完成后执行，能拿到正确值
});

方法3：将脚本设置为ES模块（支持顶层await） #

如果你的环境支持ES模块（现代浏览器、Node.js 14.8+），可以直接启用顶层await：

• 浏览器中，给script标签添加type="module"：

<script type="module">
var field_count;
await loadData();

async function loadData() {
  var response = await fetch('/get_data');
  var data = await response.json();

  field_count = data.field_count;
  alert(field_count);
}

alert(field_count); // 现在能正常获取值
</script>

• Node.js中，把文件后缀改为.mjs，或者在package.json里设置"type": "module"。

额外建议 #

尽量避免使用全局变量，你可以让loadData直接返回数据，代码逻辑会更清晰，也不会有全局变量的副作用：

async function init() {
  const field_count = await loadData();
  alert(field_count); // 直接使用返回的值
}

async function loadData() {
  var response = await fetch('/get_data');
  var data = await response.json();
  alert(data.field_count);
  return data.field_count; // 返回数据
}

init();

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