Home / Questions / 38597
Accepted
hubman
Asked: 2020-12-11 22:12:46 +0800 CST 2020-12-11 22:12:46 +0800 CST

What is the order of execution using this promise structure?

  • 772

Given this code:

let promise =new Promise(function(resolve,reject){
    console.log("uno");
    resolve();
});
promise.then(function(){
    var cont=1;
    promise.then(function(){
        for (var i = 0; i < 100; i++) {
            cont++;
        };
        console.log(5);
    });
    promise.then(function(){
        console.log("dos");
        console.log("tres");
    });
});
promise.then(function(){
    console.log("cuatro");
})

The order of execution I expect is:

  1. "uno" (let the for be executed)
  2. "five"
  3. "two and three"
  4. "four"

Note: I did test my code and it runs:

uno->cuatro->cinco->dos->tres

I understand that before resolve() is sent, the execution time of the tasks before resolve is respected, for example:

var p = new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log('cinco');
        resolve('cinco');
      }, 5000);
    })

After 5 seconds have passed, it proceeds to execute the then (and it is what I was looking for, here the order of execution is respected)

but in .then, if one of them lasts longer than the others, it is executed at the end, I already understand that from the explanations, but isn't there any way to respect a then after it finishes, proceed through the other then?

.then(function (res) {
      // res es igual a 'cinco'
setTimeout(function () {
      console.log("dos");
},2000);
      return 'dos';
    })
.then(function (res) {
      // res es igual a 'dos'
      console.log("tres");
      return 'tres';
    });

the return is "three"->"two"

modification: new example with settimeout modifications in .then

var promise = new Promise(function (resolve, reject) {
  console.log('uno');
  resolve('uno');
});
promise.then(function (res) {
    // res es igual a 'uno'
    var p = new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log('cinco');
        resolve('cinco');
      }, 5000);
    })

    // Este then SI esta encadenado
    .then(function (res) {
      // res es igual a 'cinco'
      setTimeout(function () {
      console.log("dos");
  },2000);
      return 'dos';
    })
    // Este then NO esta encadenado al then anterior
    .then(function (res) {
      // res es igual a 'dos'
      console.log("tres");
      return 'tres';
    });
    // Acá le estamos indicando que todos los `then` encadenados
    // esperen a que se resuelva esta nueva promesa
    return p;
  })
  // Este then SI esta encadenado al then anterior
  .then(function (res) {
    // res es igual a 'dos', porque 'tres' no esta encadenado
    console.log('cuatro: ' + res);
  });

does not respect the order of execution in the

.then(function (res) {
          // res es igual a 'cinco'
          setTimeout(function () {
          console.log("dos");
      },2000);
          return 'dos';
        })
javascript

3 Answers

  1. Best Answer

    // Mistake:

    The error lies in the misinterpretation in the execution flow.

    What each statement thendoes is poner en colathe passed function.

    This would be your code, with some small modifications, so that the execution flow is better understood.

    let promise = new Promise(f1);
promise.then(f2);
promise.then(f3);

//

function f1(resolve, reject) {
  console.log("uno");
  resolve();
}

function f2() {
  var cont = 1;
  promise.then(f4);
  promise.then(f5);

  //

  function f4() {
    for (var i = 0; i < 100; i++) {
      cont++;
    };
  }

  function f5() {
    console.log("dos");
    console.log("tres");
  }
}

function f3() {
  console.log("cuatro");
}

    As you can see, the functions will be executed in the order that they were puestas en cola, first f1, f2, f3and when executed f2, the functions f4 y f5are puestas en cola, that is, after f3.

    // Solution:

    the order of execution that I expect is: "one"->"that the for is executed"->"five"->"two"-"three"->"four".

    let promise = new Promise(function(resolve, reject) {
  console.log("uno");
  resolve();
});
promise.then(function() {
  var cont = 1;

  for (var i = 0; i < 100; i++) {
    cont++;
  }
  console.log(5);
  console.log("dos");
  console.log("tres");
});
promise.then(function() {
  console.log("cuatro");
});

    // Update( sin eliminar una función)

    how would your code be without removing a function???

    let promise =new Promise(function(resolve,reject){
  console.log("uno");
  resolve();
});
promise.then(function(){
  var cont=1;
  promise.then(function(){
    for (var i = 0; i < 100; i++) {
      cont++;
    };
    console.log(5);
  });
  promise.then(function(){
    console.log("dos");
    console.log("tres");
  });
  promise.then(function(){
    console.log("cuatro");  
  });
});

    // Update( timeout)

    I want it to follow the same order, since the timeout can mean a for or some task that takes time

    Chaining promises ( Chaining promises), that is, each one thenreceives the value returned by the previous one.

    Using this property, it can be solved like this:

    var promise = new Promise(function (resolve, reject) {
  console.log('uno');
  resolve('uno');
});
promise.then(function (res) {
  // res es igual a 'uno'
  var p = new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log('cinco');
      resolve('cinco');
    }, 2000);
  })
  // Este then SI esta encadenado
  .then(function (res) {
    // res es igual a 'cinco'
    console.log("dos");
    return 'dos';
  });
  // Este then NO esta encadenado al then anterior
  p.then(function (res) {
    // res es igual a 'dos'
    console.log("tres");
    return 'tres';
  });
  // Acá le estamos indicando que todos los `then` encadenados
  // esperen a que se resuelva esta nueva promesa
  return p;
})
// Este then SI esta encadenado al then anterior
.then(function (res) {
  // res es igual a 'dos', porque 'tres' no esta encadenado
  console.log('cuatro: ' + res);
});

    Important : Doing is not the same promise.thenas .then()(that is, doing chaining).

    // Update( nueva pregunta)

    Isn't there any way that a then is respected, after it is finished, proceed through the other then?

    Yes, using chaining, as I already demonstrated in the Update of thetimeout

    To solve dosyou should do the same as in cinco, you should create one promiseto wait for the response of the timeout(asynchronous pseudo-event) and make the one returnof this new promise.

    • 5

  2. The "problem" lies in the asynchrony of nodeJS: although in certain scenarios it is a great advantage, in this one it harms you since you are looking for a sequential execution of the functions.

    Through the use of promises you can achieve this if you chain them one after another, but they are designed for just the opposite: promises are launched so as not to block the execution thread.

    • 3

  3. I don't know exactly what you need to do but you can get the execution order you want by simply chaining the promises with the function then:

    function doSomethingAsync() {
  return new Promise(function(resolve, reject) {
    var counter = 0;
    resolve(counter);
  });
}

doSomethingAsync()
  .then(function(counter) {
    console.log(++counter);      // 1
    return counter;
  })
  .then(function(counter) {
    console.log(++counter);      // 2
    return counter;
  })
  .then(function(counter) {
    console.log(++counter);      // 3
    return counter;
  })
  .
  .
  .

    What you return inside the thenprevious function will be received as an argument of the next function thenthat is chained.

    • 2