Как async / await и Promise работают в TypeScript

Question

У меня есть небольшая функция, чтобы узнать, как работает асинхронность, ожидание и обещание.

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

Вы должны await для asyncAwait() звонить:

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");
}

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

main();

Answer 2

Так работают асинхронные вызовы.

Как вы думаете, на что похоже выполнение кода:

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');
  });
}

Так что если вычтобы консольный файл ("D") выполнялся после асинхронной функции, вы должны ожидать asyncFunction.Но чтобы использовать await, вы должны быть в асинхронной функции:

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

asyncFunc2();

Answer 3

Это ведет себя так, потому что под капотом ваш код такой:

function equivalentFunction() {
    console.log("A");
    setTimeout(
        function() {
            console.log("B");
            setTimeout(
                function() {
                    console.log("C");
                }
            ,1000)
        }
    ,1000)
}

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