Mastering the Promise Pattern in JavaScript: Clean Async Code Made Easy

What is the Promise pattern

In scenario A makes an Ajax request and in its callback calls B, which also makes an Ajax request. This nested callback style leads to poor readability and bad user experience because each request blocks the next step.

Using new Promise(A).done(B); expresses that B should run after A completes, allowing the rest of the code to continue executing while A is pending.

Promise is part of the CommonJS specification and helps control code flow, avoiding deep nesting. It enables non‑blocking, asynchronous logic without passing callbacks directly.

Promise has three states:

unfulfilled (pending)

resolved (fulfilled successfully)

rejected (failed)

How to use the Promise pattern

(1) promise.js

promise.js is a lightweight 2 KB implementation of the Promise pattern. It is simple to use.

(2) jQuery Deferred

jQuery 1.5 introduced Deferred, which follows the Promise pattern. Deferred rewrites the Ajax module, allowing concise asynchronous calls:

$.ajax("/test")
  .done(function(){ alert("ok"); })
  .fail(function(){ alert("err"); });

Deferred also permits adding multiple callbacks that execute in the order they were added:

$.ajax("/test")
  .done(function(){ alert("ok"); })
  .fail(function(){ alert("err"); })
  .done(function(){ alert("ok 2"); });

Ajax already uses Deferred internally; when not using Ajax you can create your own Deferred object.