如何兑现承诺

Question

In this simplified example, I am calling three functions when the first promise gets resolved.

var test = new Promise(function (res, err) { setTimeout(res, 3000) })

test.then( () => { console.log("A") });
test.then( () => { 
    return new Promise(function(res, err) { 
        setTimeout(()=> { console.log("C"); 
        res() }, 3000) 
    }); 
});

test.then( () => { console.log("B") });

The output as expected is ABC .

Let's suppose that I want to invoke the third .then to console B only when the second promise gets resolved.

If I try to store the second promise ( myProm ) in global and attach a .then function on it, I'll get (reasonably) a TypeError because at compile time myProm is still undefined.

var test = new Promise(function (res, err) { setTimeout(res, 3000) })
var myProm;

test.then( () => { console.log("A") });
test.then( () => { 
    myProm = new Promise(function(res, err) { 
        setTimeout(()=> { console.log("C"); 
        res() }, 3000) 
    })
    return myProm;
});

myProm.then( () => { console.log("B") });

How do I proceed? What's the best way to chain two promises together so that the returned Promise obj from one .then needs to get resolved before we can execute the next then .

In this scenario, the output I'd like to have would be ACB

Answer 1

then returns a promise that resolves when the indicated function has run and the value it returned has resolved (this is a slight oversimplification, but sufficient for the task here).

Therefore, to chain a promise on the result of a then . Just tack on another .then :

 var test = new Promise(function (res, err) { setTimeout(res, 3000) }) test.then( () => { console.log("A") }); test .then( () => { return new Promise(function(res, err) { setTimeout(()=> { console.log("C"); res() }, 3000); }); }) .then( () => { console.log("B") }); 

Answer 2

Each time you call .then , you create a new Promise that resolves when the Promise returned by that .then resolves. You should assign the result of the myProm -containing .then to a variable, and then call .then on that variable:

 var test = new Promise(function (res, err) { setTimeout(res, 500) }) var myProm; test.then( () => { console.log("A") }) .then( () => { myProm = new Promise(function(res, err) { setTimeout(()=> { console.log("C"); res() }, 500) }) return myProm; }) .then( () => { console.log("B") }); 

Most of the time when using Promises , you should be chaining .then s like this. Only do prom.then(...) ... prom.then(...) when you want to initialize two completely separate asynchronous operations when the prom resolves.