Обещание асинхронного вызова

Question

Я новичок в узле js и пытаюсь понять, как делать асинхронные вызовы. Я пытаюсь обернуть функцию в обещание, чтобы сделать ее асинхронной. Для простоты функция представляет собой просто цикл, который требует времени:

var p = new Promise(resolve => {
    for (let i=0;i<999999999;i++){}
    resolve('foo')
});

p.then(function (value) { console.log(value);});
console.log('bar');

Я ожидаю увидеть:

полоса // печатается сразу

foo // напечатано после окончания цикла

Вместо этого они оба печатаются после завершения цикла. Как заставить цикл работать асинхронно?

Ps. Извиняюсь за отступ / форматирование, мне пришлось написать это с телефона.

Спасибо

Answer 1

Кажется, вы предполагаете, что «асинхронный код» подразумевает параллелизм в том смысле, что код будет одновременно выполняться в другом потоке. Это не относится к делу. Если вы не запустите другой поток по назначению, сам JS будет работать в одном потоке. Поэтому независимо от того, что вы делаете с обещаниями: либо сначала запускается цикл, а затем запускаются журналы, либо сначала запускаются журналы, а затем запускается цикл.

Вы также можете достичь одновременного выполнения с помощью многозадачности: если вы остановите цикл между ними, тем временем может выполняться другой код:

 (async function() {
    while(true) {
       console.log("loop");
       await Promise.resolve();
    }
 })();

 console.log("in the meantime");

Answer 2

Но в вашем обещании нет ничего асинхронного. Создание обещания запускает выполнение функции, а JS всегда выполняется до завершения.

Как правило, обещание используется для инициирования чего-то асинхронного, такого как вызов API или даже простой setTimeout, который запускает вне потока JS. Ваш код, однако, будет проходить через пустой цикл bajillion раз, и только после будут выполняться любые следующие строки.

Замените пустую строку тайм-аутом, и она станет асинхронной:

var p = new Promise(resolve => {
  setTimeout(() => resolve("foo"), 2000);
});

p.then(function(value) {
  console.log(value);
});
console.log('bar');