异步/等待函数的行为

Question

我在使用 async/await 运行某些我无法解决的函数时看到意外输出。

代码如下：

const delayToRun = async() => {
  console.log('first delay');
  let p = await new Promise((resolve, reject) => {
    setTimeout(() => resolve('Done'), 2000);
  });
  console.log('second delay');
  return p;
};

const start = async() => {
  for (let i = 0; i < 2; i++) {
    const res = await delayToRun();
    console.log(res);
    console.log('--------------------------------');
  }
};

start();
start();

输出：

first delay
first delay
second delay
Done
--------------------------------
first delay
second delay
Done
--------------------------------
first delay
second delay
Done
--------------------------------
second delay
Done
--------------------------------

对我来说，所有块都显示是有意义的：第一，第二，完成。 但是第一个似乎是从头开始然后在最后完成。

有人能解释一下吗？

谢谢

Answer 1

你没有

await

-ing你的

start()

功能，所以

start()

的第二个实例在第一个实例之后立即被触发。

比较：

delayToRun = async() => {
  console.log("first delay");
  let p = await new Promise((resolve, reject) => {
    setTimeout(() => resolve("Done"), 2000)
  });
  console.log("second delay");
  return p;
}

start = async() => {
  for (let i = 0; i < 2; i++) {
    const res = await delayToRun();
    console.log(res);
    console.log("--------------------------------");
  }
}

(async () => {
  await start();
  await start();
})();

Answer 2

你正在运行

start()

两次，独立地，并发地，因为他们不等待对方。通过打印每个日志行的来源以更好地区分它们可能有助于理解行为：

async function delayToRun(source) {
  console.log(`${source} before delay`);
  const done = await new Promise((resolve, reject) => {
    setTimeout(() => resolve("Done"), 200);
  });
  console.log(`${source} after delay`);
  return done;
};

async function start(source) {
  for (let i = 0; i < 2; i++) {
    const res = await delayToRun(`${source}, i=${i}`);
    console.log(`${source}, i=${i}: ${res}`);
  }
};

start("task=1");
start("task=2");

但是第一个似乎是从头开始然后在最后完成。

从输出中，您可以看到它们实际上是同步执行的。