如何在export导出变量时使用async await等待异步数据加载完成

问题原因 #

ES 模块的导出属于静态绑定，会在模块初始化阶段立即执行。你代码中调用的api()是异步函数，fetch请求还没返回结果的时候，export default INITIAL_EVENTS就已经执行了，此时INITIAL_EVENTS还是初始的空数组，所以导入方拿到的就是空值。即使后续异步执行完成往数组里插入了数据，同步使用该导出值的场景也感知不到后续的数组内容更新。

解决方案1：导出Promise（推荐） #

直接导出异步操作的Promise实例，导入方通过await即可拿到填充完成的数组：

let eventGuid = 0
let INITIAL_EVENTS = [];

function getDatas(){
  return fetch("http://localhost:3214/events")
    .then((data) => data.json())
    .catch((err) => console.log(err))
}

// 立即执行的异步函数，导出其Promise实例
export default (async function () {
  const datas = await getDatas();
  datas.forEach(element => {
    INITIAL_EVENTS.push(element)
  });
  return INITIAL_EVENTS
})()

export function createEventId() {
  return String(eventGuid++)
}

导入使用方式：

import initialEventsPromise from './你的模块文件名.js'

async function 你的业务函数() {
  const INITIAL_EVENTS = await initialEventsPromise
  // 此处即可拿到填充完数据的数组
}

解决方案2：导出getter方法（兼容同步场景） #

如果需要兼容现有同步使用的代码，可以导出获取数组的方法，调用时取最新的数组内容：

let eventGuid = 0
let INITIAL_EVENTS = [];

function getDatas(){
  return fetch("http://localhost:3214/events")
    .then((data) => data.json())
    .catch((err) => console.log(err))
}

async function api(){
  const datas = await getDatas();
  datas.forEach(element => {
    INITIAL_EVENTS.push(element)
  });
}
api()

// 导出获取数组的方法，调用时返回最新内容
export function getInitialEvents() {
  return INITIAL_EVENTS
}

export function createEventId() {
  return String(eventGuid++)
}

注意：使用该方案需要保证调用getInitialEvents()时，异步请求已经执行完成，否则拿到的还是空数组。

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