如何在JavaScript中获取Promise结果并赋值为全局变量

你遇到的问题是因为async函数调用后返回的是Promise对象，而不是直接返回异步操作的结果，所以直接赋值给data得到的是Promise，不是TXT文本内容。要让全局变量存储最终的字符串结果，可以用以下两种方法：

方法一：使用顶层async函数（现代环境支持） #

先声明一个全局变量，然后在自执行的async函数里完成fetch操作，把结果赋值给全局变量：

// 声明全局变量
let data;

// 自执行异步函数完成读取并赋值
(async () => {
  const response = await fetch(file);
  data = await response.text();
  // 此时data已经是TXT内容的字符串，可以正常使用
  console.log(data);
})();

注意：如果在全局作用域直接在这段代码后面写console.log(data)，大概率会输出undefined——因为异步操作还没完成，要确保使用data的代码在异步完成后执行。

如果你的环境支持顶层await（比如现代浏览器的ES模块、Node.js 14.8+），可以更简洁：

// 直接在顶层await获取结果并赋值给全局变量
let data = await (await fetch(file)).text();
console.log(data);

方法二：使用.then()回调（兼容旧环境） #

通过Promise的链式回调，把读取到的文本赋值给全局变量：

// 声明全局变量
let data;

fetch(file)
  .then(response => response.text())
  .then(textContent => {
    data = textContent;
    console.log(data); // 这里可以正常使用全局的data
  });

不管用哪种方法，都要记住：异步操作是异步完成的，在fetch的结果返回之前，全局的data会是undefined，所有依赖data的代码都要放在异步完成后的逻辑里（比如async函数内部、.then()回调里）。

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