javascript - 在 javascript 中将异步和同步工作与 async/await 和/或 Promise 混合在一起

Question

更新:我认为我关于 async/await 的问题比链接的建议更微妙，并且已更新问题的标题以希望更好地反射(reflect)这一点。我特别关心如何启动一些可能需要一段时间的异步工作，但不会影响需要按顺序发生的大部分页面逻辑，然后等待异步工作完成，然后再继续确实依赖于异步逻辑的页面逻辑子集。答案最终基本上是相同的( await Promise.all )，但是对我的问题所接受的答案所提供的清晰度对我来说比链接的答案更有值(value)(在使用 await Promise.all 之前将顺序逻辑抽象到它自己的异步函数中) .

我无法确定这在 javascript 中是否可行(开头标有“XXX”的注释 block 是我正在努力处理的代码(假设任务 1-4 必须按顺序执行，并且无法并行)):

document.addEventListener('DOMContentLoaded', () => {
  // Kick off some asynchronous piece of work that potentially takes some 
  // time (for instance, opening and upgrading an indexedDB) but that should
  // not hold up other work that should happen in the meantime (ie: executing
  // tasks 1-3).
  asynchronousSetup(); // 1000 - 1500 ms of work

  // Do a bunch of other stuff that should happen in sequence and as quickly
  // as possible (to enable meaningful user interaction in the client).
  executeTask1(); // 300 - 400 ms of work
  executeTask2(); // 300 - 400 ms of work
  executeTask3(); // 300 - 400 ms of work

  // XXX Wait for completion of asynchronousSetup() before proceeding with
  // any additional work that is also necessary for meaningful user
  // interaction in the client, but that requires that the work done in
  // asynchronousSetup() is completely finished.
  if (/* asynchronousSetup() complete */) {
    executeTask4(); // Relies on work done in tasks 1-3 and asynchronousSetup()
  }
});

我熟悉 javascript 中的 async/await 和 Promise，但我还没有看到任何演示它们能够完成此类事情，而无需设置间隔或设置间隔(对我来说感觉像是代码味道)在我想确保 asynchronousSetup() 的地方检查某些公共(public)变量的初始化超时在发射前已完成executeTask4() .

如果我能做到的话，那就太好了:

// ...Same initial code as above.

const initialized = asynchronousSetup();

// ...Same intervening code as above.

if (await initialized) {
  executeTask4();
}

假设asynchronousSetup()适本地装饰有 async :

async function asynchronousSetup() {
  // Logic of asynchronousSetup()
}

但我之前尝试过，但没有成功。

谢谢，如果这是一个显而易见的问题，抱歉；我的搜索或代码实验都没有运气。我有一种感觉，一旦有人指出如何实现这一目标，我会感到非常愚蠢……但我会接受打击；这感觉像是我理解中的一个重大障碍，在我编写能够产生良好用户体验的高性能 JavaScript 之前，我需要克服它；p

Answer 1

如果我没听错的话，您必须同时执行 asyncSetup 和 3 个任务(但这 3 个任务必须按顺序完成)。只有完成所有 4 个任务后，您才想继续执行最后一个任务。像这样的事情似乎可以满足您的要求:

//Provide an async function that does your 3 tasks in the correct order
const doTasks = async () => {
  await executeTask1(); // 300 - 400 ms of work
  await executeTask2(); // 300 - 400 ms of work
  await executeTask3(); // 300 - 400 ms of work
}
document.addEventListener('DOMContentLoaded', async () => {
  //Do the setup and the tasks concurrently
  await Promise.all([asynchronousSetup(), doTasks()])
  //Once all of the previous tasks are done, do the last task
  executeTask4()
});

这假设您的所有任务都是异步的，或者返回 Promises。