Пытанне:

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

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

textCopy
1console.log(1);
2
3async function foo() {
4  console.log(2);
5
6  await console.log(3);
7  console.log(4);
8}
9
10foo();
11
12console.log(5);

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

textCopy
11
22
33
45
54

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

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

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

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

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

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

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

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

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

textCopy
1console.log(1);
2
3function foo() {
4  console.log(2);
5
6  return new Promise((resolve, reject) => {
7      console.log(3);
8      resolve();
9  });
10}
11
12foo().then(() => console.log(4));
13
14console.log(5);