title: ExtJS 4.1 - Handling XHR's in Sequence without using Synchronous Requests
body: <p>My application is backed by a complex database architecture, heavy in foreign key restraints which result in my JavaScript being riddled with <code>callback</code> handlers. For a single action, such as creating a new order, there may be as many as three XHR's required to submit all the necessary data for processing.</p>
  
  <p>Currently, I am handling this in what I feel is a rather ungraceful or at the very least, a bit sloppy means...</p>
  
  <pre><code>/** -- PSEUDO CODE -- */
  myOrder.save({
      success: function()
      {
           /** This request handled inserting the main attributes of the model
               into the database, which means it is safe to fire off additional
               requests */
           myOrderContents.store.sync({
                  success: function()
                  {
                      /** Possibly fire another request here, that is dependent on
                          the first two requests returning successfully, or maybe
                          execute code that is also dependent on these requests.
                        */
                  }
           });
      },
      failure: function()
      {
      /** Handle Failure Here */
      }
  });
  </code></pre>
  
  <p>I realize another viable approach would be something along the lines of all requests calling one callback method, which would then only execute a certain chunk of code....</p>
  
  <pre><code>myOrder.save({callback: executeAfterRequests});
  myOrderContents.store.sync({callback: executeAfterRequests});
  myOtherObject.save({callback: executeAfterRequests});
  
  executeAfterRequests: function()
  {
      if(requestA.isComplete() &amp;&amp; requestB.isComplete() &amp;&amp; requestC.isComplete())
      {
      /** Execute some code after all requests have been completed... */
      }
  }
  </code></pre>
  
  <p>Given that ExtJS dev's are strongly opposed to synchronous request, is my best bet here to extend the base AJAX class and implement a Queue? Or, accept the nature of AJAX and continue on my merry way with nested <code>success</code> functionality?</p>
  
  <p>Thank you for your input.</p>