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("");
    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?

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./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?

• javascript
• promise
• ecmascript-6
• es6-promise

• 2 You have to return something from your promise chain to wait for finish each – baao Commented Nov 2, 2015 at 2:48
• @Michael what if someone doesn't need to transfer anything to the next promise and they just need to run in order(btw should I add that into the question?) – Nick Pineda Commented Nov 2, 2015 at 2:50
• 1 Doesn't matter, just do nothing with it, only the return part is important – baao Commented Nov 2, 2015 at 2:51
• 1 then(()=>getPostsPromise).then... – baao Commented Nov 2, 2015 at 2:59
• 2 For starters, you might want to try removing the parenthesis from initializeComplete()... – yts Commented Nov 2, 2015 at 3:14

2 Answers 2

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);

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);