承诺链订单

Question

I use the following code and there is something that a bit confuse me if I put in the timeout 1000ms I see that the promise called in the right order but if I change it to the following

  This is step 3 
  This is step 2 
  This is step 1

I guess that this happen since when the function is resolved then he proceed to the next function am I correct ? if this is true how can I do this chain that when the first is finished then he proceed to the second etc but without using the promise hell :-)

https://jsfiddle.net/2yym400j/

var step1 = function(ms) {
   return new Promise(function(resolve, reject) {
      setTimeout(function() {
         console.log("This is step 1");
         resolve();
      }, ms);
   })
}
var step2 = function(ms) {
   return new Promise(function(resolve, reject) {
      setTimeout(function() {
         console.log("This is step 2");
         resolve();
      }, ms);
   })
};
var step3 = function(ms) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
         console.log("This is step 3");
         resolve();
      }, ms);
   })
};


step1(500)
   .then(step2(300))
   .then(step3(200))
   .catch(function(err) {
      console.log(err);
   });

Answer 1

Just pass a function instead of the result of the steps.

step1(500)
   .then(function() { return step2(300); })
   .then(function() { return step3(200); })
   .catch(function(err) {
      console.log(err);
   });

Without this, you are just calling each step without "blocking" for the previous step to resolve.

Answer 2

I know you've already gotten an answer as to why your original code didn't work, but I thought I'd show another way to approach it that is a bit more DRY than what you were doing. You can create a single function that returns a function and then you can use that in the fashion you were using because it returns a function that will be called later which is what .then() wants. So, you can do something like this:

function delay(t, msg) {
   return function() {
       return new Promise(function(resolve) {
           setTimeout(function() {
              console.log(msg);
              resolve();
           }, t);
       });
   }
}


delay(500, "This is step 1")()
   .then(delay(300,"This is step 2"))
   .then(delay(200, "This is step 3"))
   .catch(function(err) {
      console.log(err);
});

Working demo here: https://jsfiddle.net/jfriend00/mbpq4g8m/

Answer 3

Daniel White's comment and answer are correct, but I thought an additional explanation might help.

Your original code broke two rules:

1. then can't take a Promise, but it can take a function that returns a Promise. If you pass in anything except a function, it will be ignored, just like you passed in null instead.
2. As soon as you call new Promise(someFunction) , the someFunction executes asynchronously without waiting for anything. This means you can call new Promise from within a then function, but if you call it early then it won't have the delayed behavior you're expecting.

So given that each call to stepN returns a newly-constructed promise, I've inlined everything that happens synchronously and renamed the results constructAndReturnPromiseN and constructedPromiseThatStepNReturns . That makes your original code looks like this so all the promises happen at once:

constructedPromise1ThatStep1Returns
   .then(constructedPromise2ThatStep2Returns)  // BAD: Don't pass promises into then.
   .then(constructedPromise3ThatStep3Returns)  // BAD: Don't pass promises into then.
   .catch(function(err) {
      console.log(err);
   });

...where Daniel White's code does this:

constructedPromise1ThatStep1Returns
   // GOOD: The then function returns a promise that is *constructed inside* the function.
   .then(function() { return constructAndReturnPromise2(300); })
   .then(function() { return constructAndReturnPromise3(200); })
   .catch(function(err) {
      console.log(err);
   });