如何成功地在承诺链中间循环

Question

I'm putting together a promise chain, new to this so apologies. What I want to do is, for any errors in any particular function, I want to wait a second and try again until it succeeds, then continue with the promise chain as per the original plan.

I tried an if statement that called the function again if there was an error message and resolved if there was not, but this would not continue with the promise chain on a success.

I then worked a solution that included a for loop built into the function, as below:

var firstMethod = function() {
    var promise = new Promise(function(resolve, reject){
       setTimeout(function() {
          console.log('first method completed');
          resolve();
       }, 1000);
    });
    return promise;
 };

var secondMethod = function(someStuff) {
    var promise = new Promise(function(resolve, reject){
        for(let randomNumber ; randomNumber < .9||randomNumber == null ;  )
            {   
                setTimeout(function() {
                    randomNumber = Math.random();
                    console.log('the number wasn\'t big enough');
                    if (randomNumber>.9)
                    {  
                        console.log("got a number big enough");
                        resolve();
                    }
                }, 1000)
            }
        });
    return promise;
};

var thirdMethod = function(someStuff) {
    var promise = new Promise(function(resolve, reject){
       setTimeout(function() {
          console.log('third method completed');
          resolve();
       }, 1000);
    });
    return promise;
 };

 firstMethod()
    .then(secondMethod)
    .then(thirdMethod);

It completes firstMethod and then hangs when I try to run it. If I comment out the setTimeout in the secondMethod it works, but I feel this is not emulating the real case scenario I want to use this for.

Where am I going wrong? Is there a better way to loop mid promise chain until you achieve a particular result, then continue with the promise chain?

Answer 1

You can replace the secondMethod with

var secondMethod = function (someStuff) {
    var promise = new Promise(function (resolve, reject) {
        let randomNumber;
        (function doItUntilGetEnoughBigNumber() {
            setTimeout(function () {
                randomNumber = Math.random();

                if (randomNumber > .9) {
                    console.log("got a number big enough", randomNumber);
                    resolve();
                } else { // edited: message moved her  
                    console.log('the number wasn\'t big enough', randomNumber);
                    doItUntilGetEnoughBigNumber();
                }
            }, 1000)
        })()
    });
    return promise;
};

The reason your code doesn't work, because the condition to stop for loop is in asynchronous, so it will be deferred, so the for loop will go forever.

Update Without using IIFE

var secondMethod = function (someStuff) {
    var promise = new Promise(function (resolve, reject) {
        let randomNumber;
        function doItUntilGetEnoughBigNumber() {
            setTimeout(function () {
                randomNumber = Math.random();
                if (randomNumber > .9) {
                    console.log("got a number big enough", randomNumber);
                    resolve();
                } else {
                    console.log('the number wasn\'t big enough', randomNumber);
                    doItUntilGetEnoughBigNumber();
                }
            }, 1000)
        }
        doItUntilGetEnoughBigNumber();
    });
    return promise;
};

Answer 2

The important thing about async events (eg when setTimeout finishes) is that the handler is not called directly, but the event is put into the so called event queue. The javascript engine (the event loop) takes one event after another out of it and executes it, when its done it takes the next one. At first it will execute your for loop and set all the timeouts. Then when its done and one second passed it will start executing the setTimeout handlers. But as your for loop is infinite, it will never reach this step.

---

The easiest would be to use the async syntax:

  const timer = ms => start => new Promise(res => setTimeout(res, ms));

  async function loop(){
    while(true){
      await timer(1000)();
      if(Math.random() > 0.9) return;
   }
 }

 timer(1000)()
    .then(loop)
    .then(timer(1000))
    .then(() => console.log("done"));

Alternatively you could use a recursive async function:

async function loop(){
  await timer(1000)();
  if(Math.random() > 0.9)
     return true;
  else
     return loop();
}