My software relies on a sophisticated database structure with numerous foreign key constraints, leading to multiple callback handlers in my JavaScript code. One simple action like creating a new order might require three XHRs to submit all the required data for processing.
Currently, I am managing this process in what I consider to be a somewhat clumsy and inefficient manner...
/** -- 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 */
}
});
I understand that an alternative approach could involve having all requests trigger a single callback method, which would then execute specific code...
myOrder.save({callback: executeAfterRequests});
myOrderContents.store.sync({callback: executeAfterRequests});
myOtherObject.save({callback: executeAfterRequests});
executeAfterRequests: function()
{
if(requestA.isComplete() && requestB.isComplete() && requestC.isComplete())
{
/** Execute some code after all requests have been completed... */
}
}
Since ExtJS developers strongly discourage synchronous requests, should I consider extending the base AJAX class and implementing a queue? Or should I embrace the asynchronous nature of AJAX and continue using nested success functions?
Thank you for your insights.