Using jQuery Deferred Objects and Promises Instead of Callbacks

Home > Blogs > Developer Visual Studio / ASP.NET > Using jQuery Deferred Objects and Promises Instead of Callbacks

Using jQuery Deferred Objects and Promises Instead of Callbacks

Like This Blog 0 Dan Wahlin
Added by March 8, 2013

In a previous post jQuery Tip #7 – Consolidating jQuery Ajax Calls I talked about how Ajax calls can be consolidated into a JavaScript object to promote re-use and simplify maintenance. In that post I showed how the Revealing Module Pattern can be used to provide a more structured approach and how a callback can be passed into functions within the object. Once individual Ajax calls complete the callback can be invoked so that the caller is able to access the returned data.

The following code shows an example of a simple object named dataService that follows the Revealing Module Pattern and has several Ajax functions in it. Note that each function accepts a callback as a parameter and that the callback is invoked to return the data to the caller.

Although this code works fine, by forcing a callback to be passed as a parameter the parameter signature of each function is polluted somewhat. Even worse, no error callback is defined so if an error occurs the caller of the dataService object may be left in the dark which will more than likely leave the user in the dark as well if something goes wrong.

JavaScript libraries such as jQuery, Q.js, and others support the concept of a deferred object and allow access to a promise. For example, jQuery's getJSON()function automatically returns a deferred object/promise to callers. That means that the caller receives an object immediately after calling an asynchronous Ajax function and can use it to handle the success and error callback functionality themselves rather than relying on the function to invoke a callback as in the previous code.

The following code shows an improved version of the callback code shown earlier. Notice that no callback parameter is passed into the different functions and that the result of the getJSON() call (a deferred object) is returned instead.

Consumers of the dataService object can now call functions, handle the deferred object that's returned and then wire up success and error functions. An example of doing that is shown next:

These two calls handle the success callback but don't handle errors. To do that you can chain a fail() function onto the previous code as shown next:

By using deferred objects and promises you can handle asynchronous callbacks in a more standardized way and provide a better to process success and error situations. You can also clean up the parameter signature of any Ajax methods that you may call and re-use throughout an application.

Enjoy!
Dan Wahlin Microsoft MVP
.NET Developer Instructor
Interface Technical Training

Videos You May Like

How to Build in a PSMethod to your PowerShell Code

0 59 0

In this video, PowerShell instructor Jason Yoder shows how to add Methods (PSMethod) to your code using free software that’s added into the PSObject. For instructor-led PowerShell courses, see our course schedule. Microsoft Windows PowerShell Training Download the Building Methods PowerShell script</a> used in this video. <# ╔══════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ Building Methods ║ ╟──────────────────────────────────────────────────────────────────────────────╢ … Continue reading How to Build in a PSMethod to your PowerShell Code

Agile Methodology in Project Management

0 172 0

In this video, you will gain an understanding of Agile and Scrum Master Certification terminologies and concepts to help you make better decisions in your Project Management capabilities. Whether you’re a developer looking to obtain an Agile or Scrum Master Certification, or you’re a Project Manager/Product Owner who is attempting to get your product or … Continue reading Agile Methodology in Project Management

The Value of Adding AngularJS to your Development Stack by Dan Wahlin

0 52 0

AngularJS is one the hottest JavaScript group frameworks available today. Is it worth adding it to your development stack? That’s what we’re going to address in this video. What’s so compelling about AngularJS anyway? First, it’s a client-side JavaScript framework with one core script. You won’t have to integrate a ton of third‑party scripts into … Continue reading The Value of Adding AngularJS to your Development Stack by Dan Wahlin

Write a Comment

Share your thoughts...

Please fill out the comment form below to post a reply.