javascript - Await 在异步函数上工作正常，但在 promises 上却不行

Question

我在玩 async/await 时发现行为中存在一些奇怪的差异，这取决于调用 await 的位置。

function test(msg) {
  return new Promise(accept => {
    console.log('in promise ', msg);
    setTimeout(() => {
      console.log('in timeout ', msg);
      accept();
    }, 1000)
  });
}

async function run() {
  await test('a');
  await test('b');
}

run();

输出

in promise  a 
in timeout  a 
in promise  B 
in timeout  B

，这是预期的。但是，如果我在“test”函数中移动 await，那么结果会以非常意外的方式发生变化:

async function test(msg) {
  const promise = new Promise(accept => {
    console.log('in promise ', msg);
    setTimeout(() => {
      console.log('in timeout ', msg);
      accept();
    }, 1000)
  });
  await promise;
}

function run() {
  test('a');
  test('B');
}

run();

输出

in promise  a
in promise  B
in timeout  a
in timeout  B

有人可以解释第二种情况下的行为吗？谢谢。

Answer 1

当您构造一个 Promise 时，该 Promise 的主体会立即执行。这就是为什么在第二段代码中，new Promise setTimeout 内的 console.log 发生的原因马上。

那么为什么在第一个例子中它没有做同样的事情呢？这是因为对 test 的第二次调用在第一次完成之前不会被调用。这两个 Promise 本质上是链接在一起的，就好像你这样写:

return test('a').then(() => test('B'));

如果你这样做了:

const promiseA = test('a');
const promiseB = test('B');
await Promise.all([promiseA, promiseB]);

...您会得到与第二个代码块相同的结果。