{"id":1453,"date":"2014-12-09T13:15:41","date_gmt":"2014-12-09T11:15:41","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1453"},"modified":"2014-12-09T13:18:52","modified_gmt":"2014-12-09T11:18:52","slug":"make-me-a-promise","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/make-me-a-promise\/","title":{"rendered":"Make Me a Promise"},"content":{"rendered":"

If you haven\u2019t worked with JavaScript in over a decade, you might be surprised at the advances that have been made in this language. At one time, JavaScript was used mainly for swapping \u201cone image for another in response to user-generated mouse events\u201d [1]<\/a>, and now, it is a full-fledged language used for both front end and back end work.<\/p>\n

Since JavaScript is most often used on the web, we have to deal with asynchronous patterns often in daily use. Traditionally, if you have a bunch of asynchronous calls that need to be processed in order, you\u2019d get something that looked like this:
\n 
\n <\/p>\n

step1(function(value1) {\r\n    step2(value1, function(value2) {\r\n        step3(value2, function(value3) {\r\n            step4(value3, function(value4) {\r\n                \/\/ Do something with value4\r\n            });\r\n        });\r\n    });\r\n});<\/pre>\n
This is called the \u201cPyramid of Doom\u201d by some, a situation where your code marches to the right faster than it marches forward.[2]<\/a><\/p>\n
So, how do we harness the power of callbacks without the confusing mess of nested functions? Promises.<\/p>\n
What Are Promises?<\/h2>\n
A promise represents the eventual result (either a value or a thrown exception) of an asynchronous operation.<\/p>\n
The main way you interact with a promise is through its then<\/code> method, which registers a callback to receive either the promise\u2019s eventual value or the reason why the promise cannot be fulfilled [3]<\/a>.<\/p>\n
There are a number of different implementations of a promise framework in JavaScript. Some of the more well-known ones are jQuery\u2019s Deferred Object\u00a0[4]<\/a> and Q by Kris Kowal\u00a0[2]<\/a>. Limited support for promises is included in ECMAScript 6 (still a work in progress) and full support for them is expected in ECMAScript 7 (also, a work in progress)\u00a0[5]<\/a>.<\/p>\n
Tutorial<\/h2>\n
I\u2019m most familiar with the AngularJS implementation of promises, which is a subset of the functionality included with Q\u00a0[6]<\/a>, so I\u2019ll give some examples on how you might use promises in your AngularJS project.<\/p>\n
\/\/ for the purpose of this example let's assume that variable `$q`\r\n\/\/ is available in the current lexical scope (it could have been injected or passed in).\r\nfunction step1() {\r\n    var deferred = $q.defer();\r\n    longRunningCallWithCallback(function(error, response) {\r\n        if (error) {\r\n            deferred.reject(error);\r\n        } else {\r\n            deferred.resolve(response);\r\n        }\r\n    });\r\n    return deferred.promise;\r\n}\r\n\r\nvar resolvedValue;\r\nstep1().then(function(value) {\r\n    resolvedValue = value;\r\n}, function(reason) {\r\n    $log.error(reason)\r\n});<\/pre>\n
The above example shows how you might convert an existing function you rely on that has a callback function into a promise returning function.<\/p>\n
First, we create a Deferred<\/code> object that represents the task that will finish in the future. Then, inside our existing function\u2019s callback method, we either reject the promise when the callback returns an error or we resolve the promise with the returned value. In the last line of the function, we return the promise so it can be used by the callee to get access to the result of the deferred task when it completes.<\/p>\n
function eachItemInALoopCallsALongProcess() {\r\n    var promises = [];\r\n    angular.forEach(items, function(item) {\r\n        var deferred = $q.defer();\r\n        promises.push(deferred.promise);\r\n        longRunningFunction(item, function(error, response) {\r\n            if (error) {\r\n                deferred.reject(error);\r\n            } else {\r\n                deferred.resolve(response);\r\n            }\r\n        });\r\n    });\r\n    return $q.all(promises);\r\n}<\/pre>\n
This example shows a case where we have a bunch of items that we want to process that don\u2019t rely on each other, but we do want them to all complete before continuing. The $q.all<\/code> is the magic piece. It combines all of the promises in the array into a single promise that doesn\u2019t resolved until all of the promises in the array are resolved. If any of the promises are rejected, then the combined promise will also be rejected with that same rejection reason.<\/p>\n
Conclusion<\/h2>\n
Hopefully I\u2019ve given you a glimpse into the world of JavaScript promises and that you\u2019ll give them a shot when you come across a mess of callback in the future.<\/p>\n
In addition to the References listed below, there are also some links in the Resources section with more detailed information and examples of using promises across a wide variety of situations.<\/p>\n
References<\/h2>\n
    \n
  1. http:\/\/www.oreillynet.com\/pub\/a\/javascript\/2001\/04\/06\/js_history.html<\/a><\/li>\n
  2. http:\/\/documentup.com\/kriskowal\/q<\/a><\/li>\n
  3. https:\/\/promisesaplus.com\/<\/a><\/li>\n
  4. https:\/\/api.jquery.com\/category\/deferred-object\/<\/a><\/li>\n
  5. https:\/\/en.wikipedia.org\/wiki\/ECMAScript<\/a><\/li>\n
  6. https:\/\/docs.angularjs.org\/api\/ng\/service\/$q<\/a><\/li>\n<\/ol>\n
    Resources<\/h2>\n