title: JavaScript Chaining Promises : Calling next promise before previous has finished
body: <p>Tools: JavaScript ES6</p>
  
  <p>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. :) </p>
  
  <p>My Issue is that I want to call this in a synchronous order <code>getPosts---&gt;getThreads---&gt;initializeComplete()</code></p>
  
  <p>Here is what I am doing.</p>
  
  <pre><code>userPromise.then(getPostsPromise).then(getThreadsPromise).then(initializeComplete());
  </code></pre>
  
  <ul>
  <li><strong>userPromise</strong> is Promise obj I returned from another part of the code</li>
  <li><strong>getPostsPromise</strong> returns a Promise and makes a fetch to the server for posts </li>
  <li><strong>getThreadsPromise</strong> returns a Promise and makes a fetch to the server for threads</li>
  <li><strong>initializeComplete</strong> is a callback to tell my program that it is initialized.</li>
  </ul>
  
  <p>Here is an example of one of the promises in the chain:</p>
  
  <pre><code>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);
          }); 
        });
  }
  </code></pre>
  
  <p>But <code>initializeComplete()</code> is being called before <code>getPostsPromise</code> and <code>getThreadsPromise</code> have a chance to finish fetching.</p>
  
  <p>Why is that happening and how do I write the promises to execute in order?</p>