JavaScript Chaining Promises : Calling next promise before previous has finished - Stack Overflow

admin 管理员组

文章数量: 1086019

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

Share Improve this question Follow edited Nov 2, 2015 at 4:28 Felix Kling 817k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Nov 2, 2015 at 2:46 Nick PinedaNick Pineda 6,4621111 gold badges5050 silver badges6969 bronze badges 10

• 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

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 7

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

本文标签： JavaScript Chaining PromisesCalling next promise before previous has finishedStack Overflow