Пытанне:

Што ўбачым у кансолі?

З задачамі такога тыпа многія памыляюцца, таму не спяшайцеся даваць адказ.

console.log(1);

async function foo() {
  console.log(2);

  await console.log(3);
  console.log(4);
}

foo();

console.log(5);

Кароткі адказ:

1
2
3
5
4

Падрабязны адказ:

Чаму лікі вярнуліся ў гэтым парадку? Давайце разбірацца.

З "1", думаю, усё зразумела. У сінхронным кодзе першы радок адпрацоўвае першым.

Далей будзе цікавей!

Нягледзячы на тое, што перад функцыяй ужыта async, гэта не робіць функцыю асінхроннай. Таму яна працягвае выконвацца сінхронна. І мы бачым у кансолі "2".

Але ж мы ведаем, што функцыя з async/await з'яўляецца аналагам Promise і дазваляе пісаць асінхронны код. Чаму тады ў кансолі наступны мы бачым лік "3"?

Код, напісаны ў await будзе ўсё яшчэ выконвацца сінхронна, нібыта ў целе Promise.

Усё, што ідзе за await, трапляе ў асінхронны код (мікратаску), таму мы спачатку ўбачым усё, што павінна выканацца сінхронна ("5"), а потым "4".

Аналагам гэтага кода будзе з'яўляцца наступны:

console.log(1);

function foo() {
  console.log(2);

  return new Promise((resolve, reject) => {
      console.log(3);
      resolve();
  });
}

foo().then(() => console.log(4));

console.log(5);