typescript - async/await 和 Promise 在 TypeScript 中如何工作

Question

我有一个小函数来学习 async、await 和 Promise 是如何工作的。

function delay(ms: number) {
    return new Promise<void>(function(resolve) {
       setTimeout(resolve, ms);
    });
}

async function asyncAwait() {
    console.log("A");

    await delay(1000);
    console.log("B");

    await delay(1000);
    console.log("C");
}

asyncAwait();
console.log("D");

我的理解，工作流程是这样的，

先调用asyncAwait();，然后打印A，然后等待1秒并打印B，然后再等待1秒并打印C 最后打印 D。

但我的输出是这样的，

A
D
B
C

我不知道为什么 console.log("D") 显示第二个。

谁能解释一下上面的代码吗？

提前致谢

Answer 1

这就是异步调用的工作原理。

你认为代码执行的样子:

function delay(ms: number) {
    return new Promise<void>(function(resolve) {
       setTimeout(resolve, ms);
    });
}

async function asyncAwait() {
    console.log("A");

    await delay(1000);
    console.log("B");

    await delay(1000);
    console.log("C");
}

asyncAwait();   // <-- 1st call
console.log("D");

然后在该函数内部:

async function asyncAwait() {
    console.log("A");  // <--- 1st print, as it is synchronous

    await delay(1000); // <--- await
    console.log("B");  // <--- 2nd print

    await delay(1000); // <-- await
    console.log("C");  // <-- 3rd print
}

最后

function delay(ms: number) {
    return new Promise<void>(function(resolve) {
       setTimeout(resolve, ms);
    });
}

async function asyncAwait() {
    console.log("A");

    await delay(1000);
    console.log("B");

    await delay(1000);
    console.log("C");
}

asyncAwait();
console.log("D"); // <-- last print

但是，异步函数是异步的。因此所有异步调用都会进入队列并稍后进行处理。

因此，首先执行同步调用:

console.log("A");
console.log("D");

然后是异步调用。

await 只能在 async 函数内部工作。

所以函数:

async function asyncFunc() {
  console.log("A");

  await delay(1000);
  console.log("B");
}

大致相当于:

asyncFunc() {
  console.log('A');
  delay().then(()=> {
     console.log('B');
  });
}

因此，如果您希望 console.log("D") 在 async 函数之后执行，您应该等待 asyncFunction。但要使用await，您必须处于异步函数中:

async function asyncFunc2() {
  await asyncAwait();
  console.log("D");
}

asyncFunc2();