如何让async/await声明的变量在多个JavaScript文件间共享？

问题本质 #

get_data 是异步函数，调用后会立刻执行后续代码，此时 fetch 请求还未完成，data 变量仍未赋值；而 homepage.js 加载执行时，异步请求大概率也还在处理中，所以两处 console.log 都拿不到有效值。

方案一：用共享 Promise 统一等待数据 #

把异步请求的 Promise 暴露出来，所有需要使用数据的地方都通过 await 等待这个 Promise 完成：

修改 common.js：

// common.js
// 直接保存fetch的Promise，供所有脚本共享
const dataPromise = fetch('/get-data').then(res => res.json());

async function get_data() {
  const data = await dataPromise;
  console.log(data); // 正常输出
}
get_data();

// 顶层打印：用立即执行异步函数包裹
(async () => {
  console.log(await dataPromise); // 现在能拿到数据
})();

修改 homepage.js：

// homepage.js
(async () => {
  console.log(await dataPromise); // 正常输出数据
})();

方案二：用回调函数监听数据就绪 #

维护一个回调数组，数据加载完成后触发所有已注册的回调，确保任何脚本都能在数据就绪时拿到值：

修改 common.js：

// common.js
let data;
// 存储所有等待数据的回调
const dataReadyCallbacks = [];

async function get_data() {
  data = await fetch('/get-data').then(res => res.json());
  console.log(data); // 正常输出
  // 通知所有回调数据已就绪
  dataReadyCallbacks.forEach(cb => cb(data));
}
get_data();

// 顶层打印：注册回调
dataReadyCallbacks.push(loadedData => {
  console.log(loadedData); // 正常输出
});

修改 homepage.js：

// homepage.js
// 注册回调等待数据
dataReadyCallbacks.push(loadedData => {
  console.log(loadedData); // 正常输出
});

方案三：使用 ES 模块（现代浏览器推荐） #

如果你的项目目标浏览器支持 ES 模块，可以直接用顶层 await 简化代码：

修改 HTML 脚本引入：

<html>
  <!-- ... (其他页面内容) ... -->
  <script type="module" src="common.js"></script>
  <script type="module" src="homepage.js"></script>
</html>

修改 common.js：

// common.js
// 顶层await直接获取数据并导出
export const data = await fetch('/get-data').then(res => res.json());
console.log(data); // 正常输出

修改 homepage.js：

// homepage.js
// 导入已加载完成的数据
import { data } from './common.js';
console.log(data); // 正常输出

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