How to Chain JavaScript Promises – Intro Tutorial to JavaScript Promises

What are JavaScript promises?

In it’s new ECMA 6 version, JavaScript allows you to create a new type of object called a Promise. Promises are used for asynchronous or deferred computations, and can be an alternative to the usual callback approach.

Promises can be used both on the browser (support is still not universal but it’s getting there) or in Node.js apps.

ON SALE – FINAL DAYS
BUILD GAMES
BUILD YOUR OWN GAMES

‚úď 250+ coding courses

‚úď Interactive lessons

‚úď Guided learning paths

‚úď Help from expert mentors

GET IT ALL FOR JUST
$1

Promises can either resolve or get rejected. Inside of a promise, you are free to call the “resolve” and “reject” method whenever you see fit.

Example of a promise:

var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('some asynchronous task just completed');
         resolve({data: '123'});
      }, 2000);
  });

What’s wrong with using just callbacks?

Nothing, but there are times (specially on Node.js apps) when you are performing multiple operations and you need to wait for the result of one in order to move to the next. In these cases you enter what’s called the “callback hell”, when you have several callbacks inside of other callbacks.

For example, you need to do the following: read a MongoDB collection, call an external API, call some other API, save some data in MongoDB. In each step you need the result of the previous step. Using callbacks can make your code very messy.

This is an example when using JavaScript promises and chaining them together would make things easier

How do you chain JavaScript promises?

The following example shows how you can chain JavaScript native promises using the then keyword.

Imagine you have three methods that do asynchronous operations (example: Ajax calls, calls to API, Mongo operations, writing to disk, etc). You want to call “secondMethod” when “firstMethod” completes, and when “secondMethod” completes you then want to call “thirdMethod”.

See how easy this becomes with promises:

var firstMethod = function() {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('first method completed');
         resolve({data: '123'});
      }, 2000);
   });
   return promise;
};


var secondMethod = function(someStuff) {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('second method completed');
         resolve({newData: someStuff.data + ' some more data'});
      }, 2000);
   });
   return promise;
};

var thirdMethod = function(someStuff) {
   var promise = new Promise(function(resolve, reject){
      setTimeout(function() {
         console.log('third method completed');
         resolve({result: someStuff.newData});
      }, 3000);
   });
   return promise;
};

firstMethod()
   .then(secondMethod)
   .then(thirdMethod);

Learn JavaScript ES6 online at your own pace

Check out the online course Learn JavaScript ES6 on Zenva Academy for more information. You can also learn more about why JavaScript is a great programming language to master in this article.