While loops using Await Async.

Question

This Javascript function seems to use the while loop in an asynchronous way. Is it the correct way to use while loops with asynchronous conditions?

 var Boo;
 var Foo = await getBar(i)
 while(Foo) {
    Boo = await getBar3(i)
    if (Boo) {
      // something
    }
    Foo = await getBar(i)
    i++
  }

What I think it does is this:

var Boo;
var Foo;
getBar(i).then( (a) => {
  Foo = a;
  if(Foo) {
    getBar3(i).then( (a) => {
      Boo = a
      if(Boo) {
        //something
        i++;
        getBar(i).then( (a} => { Repeat itself...} 
      }
   }
  }
})

If that's totally false could you show another way to do it with async await + while loop?

Thanks!!

Answer 1

Is it the correct way to use while loops with asynchronous conditions?

Yes. async functions simply suspend their execution on every await until the respective promises fulfills, and any control structures continue to work as before.

Answer 2

Yep, it's fine to do it like this:

let stopped = false
        
// infinite loop
while(!stopped) {
    let res = await fetch('api link') 
    if (res.something) stopped = true // stop when you want
}

But be careful not to get infinite loop

Answer 3

Is it the correct way to use while loops with asynchronous conditions?

Yes, provided that getBar and getBar3 are asynchronous functions (marked as async or just returning a Promise).

Of course the execution should be inside an asynchronous context (inside async function)

A possible issue that I can see is that initially there are 2 executions of getBar with the same i and the rest of executions use a mismatched i between while and if. If this is not the desired behavior perhaps a more correct version would be:

    (async ()=>{
     while(await getBar(i)) {    
        if (await getBar3(i)) {
          //do something
        }
        i++;
      }
    })();

See a mocked example here

Answer 4

A simple way would be:

// returns a delayed promise 
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

// performs a specific (mathematical) operation every "ms" (milliseconds)
const dec = async (i, ms) => (await delay(ms), --i)

const foo = async () => {
  let i = 5;
  
  // runs an async operation which decreases "i" by 1 every 500ms
  while(i = await dec(i, 500)) 
    // prints 4, 3, 2, 1 with a delay 
    console.log(i) 
}

foo()

Here's my GIST if you need to star it to save for later.

Alternatively, you can count up:

// returns a delayed promise 
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

// performs a specific (mathematical) operation every "ms" (miliseconds)
const inc = async (i, ms) => (await delay(ms), ++i)

const foo = async () => {
  let i = 0;
  
  // runs an async operation which increases "i" by 1 every 500ms
  while((i = await inc(i, 500)) < 5) {
    // prints 1,2,3,4 with a delay 
    console.log(i) 
  }
}

foo()

Answer 5

Based on this example, we see that using await in the while loop triggers SYNCHRONOUS code execution. In other words, until one iteration of the loop is completed, the SECOND one WILL NOT BE STARTED

let counter = 0;

const promise = () =>
  new Promise((resolve, reject) =>
    setTimeout(() => {
      resolve(1);
    }, 2000)
  );

(async() => {
  console.log("Start")
  console.time('allTime');
  while (counter < 3) {
    await promise();
    console.log('Resolve promise', counter);
    counter++;
  }
  console.timeEnd('allTime');
})();

Answer 6

Since while loop body works synchronously, we need to move our code out of the body.
This solution might help someone:

while(await (async () => {
  Boo = await getBar3(i)
  if (Boo) {
    // something
  }
  Foo = await getBar(i)
  i++
  return Foo; // you must return the condition that the loop depends on it
})()); // Adding this semicolon is crucial

Answer 7

Its been awhile since this question was asked. I am new to js after many years of other languages (starting with punch cards and paper tape) and needed to solve this problem. Here is my answer:

var loopContinue = true;
var n = 0;

async function  Managework() {
  while (loopContinue) {  //seemingly an infinite loop
    //await (doWork(n));
    await (doWork(n).catch(() => { loopContinue=false; }));
    n++;
    console.log(`loop counter ${n}`);
  }
  console.log(`loop exit n=${n} loopContinue=${loopContinue}`);
 }

Managework();

function doWork(n) {
 return new Promise((resolve, reject) => {
    console.log(`dowork(${n})`);
    if (n > 5) {
      //loopContinue = false;
      reject(`done`);
    }
    setTimeout(() => {
      resolve('ok');
    }, 1000);
  });
}

As desired the loop breaks after the 5th iteration. 'loopContinue' global can either be set in the work function or in the catch (or could be the then) of the promise. I tired just using 'break' in the then or catch but I get an error.

If you want to do it in doWork you can eliminate the catch and and just call doWork() and uncomment the // loopContinue= false in doWork. Either way works. This was tested with node.js

I found stuff on nextTick but this seems much easier.