使用多个 ES6 映射并使其异步

Question

const eventBarData = data.map(obj => prepareEventBar(obj.calendar))
const mapToSpaceData = eventBarData.map(obj => ({
  space_name: obj.space.display.name,
  ...obj
}))

上面的代码不起作用，因为两者都同时运行？ 如何确保事件BarData完成处理然后运行另一个地图？ 我必须在地图中包装地图吗？我不想在 prepareEventBar 函数中使用回调。

Answer 1

prepareEventBar返回一个承诺。然后你可以只使用Promise.all：

const eventBarDataPromises = data.map(obj => prepareEventBar(obj.calendar))
Promise.all(eventBarDataPromises)
  .then(eventBarData => eventBarData.map(obj => ...))
  .then(mapToSpaceData => ...

或者，如果您的环境支持它，或者您使用的是转译器，则async函数可能会更简洁一些：

// this code must be wrapped in an async function
const eventBarData = await Promise.all(
  data.map(obj => prepareEventBar(obj.calendar))
);
const mapToSpaceData = eventBarData.map(obj => ...);