JavaScript Chaining Promises：在上一个完成之前调用下一个promise

Question

Tools: JavaScript ES6

I haven't seen a good succinct answer about the syntax of chaining multiple promises to execute in order. I thought this would be a good nail in the coffin question for all promise newbies out there. :)

My Issue is that I want to call this in a synchronous order getPosts--->getThreads--->initializeComplete()

Here is what I am doing.

userPromise.then(getPostsPromise).then(getThreadsPromise).then(initializeComplete());

• userPromise is Promise obj I returned from another part of the code
• getPostsPromise returns a Promise and makes a fetch to the server for posts
• getThreadsPromise returns a Promise and makes a fetch to the server for threads
• initializeComplete is a callback to tell my program that it is initialized.

Here is an example of one of the promises in the chain:

var getPostsPromise = function(){
    //Firebase is just a simple server I'm using
    var firebasePostsRef = new Firebase("https://myfburl.firebaseio.com/posts");
    var postsRef = firebasePostsRef.child(localPlace.key);

    return new Promise(function(resolve, reject) {
      //Below is a Firebase listener that is called when data is returned
      postsRef.once('value', function(snap,prevChild) {
            var posts = snap.val();
            AnotherFile.receiveAllPosts(posts);
            resolve(posts);
        }); 
      });
}

But initializeComplete() is being called before getPostsPromise and getThreadsPromise have a chance to finish fetching.

Why is that happening and how do I write the promises to execute in order?

Answer 1

initializeComplete is getting called right away because you are invoking it when passing it to then . You have to omit the parentheses, just like you did for getPostsPromise and getThreadsPromise

userPromise.then(getPostsPromise).then(getThreadsPromise).then(initializeComplete);

Answer 2

While yts's answer is correct (the issue is you're invoking initializeComplete instead of passing the function), I'd rather format the calls a bit differently. Having each callback function call the next function is a bit against the design of promises. I'd rather each function return a promise, and then call then on the returned promise:

userPromise
.then(function(){
  return getPostsPromise()
}).then(function(){
  return getThreadsPromise()
}).then(function(){
  return initializeComplete();
});

or to pass the actual returned objects and not have to do any additional intermediate processing:

userPromise
.then(getPostsPromise)
.then(getThreadsPromise)
.then(initializeComplete);