Understanding JavaScript Promises

<p>A promise represents the eventual result of an asynchronous operation. It is a placeholder into which the successful result value or reason for failure will materialize.</p> <h2><a class="anchor" href="http://ift.tt/1S6v34Q" id="user-content-why-use-promises" name="user-content-why-use-promises" target="_blank"></a>Why Use Promises?</h2> <p>Promises provide a simpler alternative for executing, composing, and managing asynchronous operations when compared to traditional callback-based approaches. They also allow you to handle asynchronous errors using approaches that are similar to synchronous <code>try/catch</code>.</p> <h2><a class="anchor" href="http://ift.tt/1V6518l" id="user-content-promise-states" name="user-content-promise-states" target="_blank"></a>Promise States</h2> <p>A promise can be in one of 3 states:</p> <ul> <li>Pending – the promise’s outcome hasn’t yet been determined, because the asynchronous operation that will produce its result hasn’t completed yet.</li> <li>Fulfilled – the asynchronous operation has completed, and the promise has a value.</li> <li>Rejected – the asynchronous operation failed, and the promise will never be fulfilled. In the rejected state, a promise has a <em>reason</em> that indicates why the operation failed.</li> </ul> <p>When a promise is pending, it can transition to the fulfilled or rejected state. Once a promise is fulfilled or rejected, however, it will never transition to any other state, and its value or failure reason will not change.</p> <p>Promises have been implemented in many languages, and while promise APIs differ from language to language, JavaScript promises have converged to the <a href="http://ift.tt/157YPzf" target="_blank">Promises/A+</a> proposed standard. EcmaScript 6 is slated to provide promises as a first-class language feature, and they will be based on the Promises/A+ proposal.</p> <h2><a class="anchor" href="http://ift.tt/1V6518n" id="user-content-using-promises" name="user-content-using-promises" target="_blank"></a>Using Promises</h2> <p>The primary API for a promise is its <code>then</code> method, which registers callbacks to receive either the eventual value or the reason why the promise cannot be fulfilled. Here is a simple “hello world” program that synchronously obtains and logs a greeting.</p> <div class="highlight highlight-source-js"> <pre> <span class="pl-k">var</span> greeting <span class="pl-k">=</span> sayHello(); <span class="pl-en">console</span><span class="pl-c1">.log</span>(greeting); <span class="pl-c">// 'hello world’</span> </pre></div> <p>However, if <code>sayHello</code> is asynchronous and needs to look up the current greeting from a web service, it may return a promise:</p> <div class="highlight highlight-source-js"> <pre> <span class="pl-k">var</span> greetingPromise <span class="pl-k">=</span> sayHello(); greetingPromise.then(<span class="pl-k">function</span> (<span class="pl-smi">greeting</span>) { <span class="pl-en">console</span><span class="pl-c1">.log</span>(greeting); <span class="pl-c">// 'hello world’</span> }); </pre></div> <p>The same message is printed to the console, but now other code can continue while the greeting is being fetched.</p> <p>As mentioned above, a promise can also represent a failure. If the network goes down and the greeting can’t be fetched from the web service, you can register to handle the failure using the second argument to the promise’s <code>then</code> method:</p> <div class="highlight highlight-source-js"> <pre> <span class="pl-k">var</span> greetingPromise <span class="pl-k">=</span> sayHello(); greetingPromise.then(<span class="pl-k">function</span> (<span class="pl-smi">greeting</span>) { <span class="pl-en">console</span><span class="pl-c1">.log</span>(greeting); <span class="pl-c">// 'hello world’</span> }, <span class="pl-k">function</span> (<span class="pl-smi">error</span>) { <span class="pl-en">console</span><span class="pl-c1">.error</span>(<span class="pl-s"><span class="pl-pds">'</span>uh oh: <span class="pl-pds">'</span></span>, error); <span class="pl-c">// 'uh oh: something bad happened’</span> }); </pre></div> <div class="ezAdsense adsense adsense-midtext" style="text-align:center;margin:12px;"><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="text/javascript"> </script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2979805726071943" data-ad-slot="7471922310" data-ad-format="auto"></ins> <script type="text/javascript"> //<![CDATA[ (adsbygoogle = window.adsbygoogle || []).push({}); //]]> </script></div> <p>If <code>sayHello</code> succeeds, the greeting will be logged, but if it fails, then the reason, i.e. error, will be logged using <code>console.error</code>.</p> <h2><a class="anchor" href="http://ift.tt/1S6v3la" id="user-content-transforming-future-values" name="user-content-transforming-future-values" target="_blank"></a>Transforming Future Values</h2> <p>One powerful aspect of promises is allowing you to transform future values by returning a new value from callback function passed to <code>then</code>. For example:</p> <div class="highlight highlight-source-js"> <pre> <span class="pl-k">var</span> greetingPromise <span class="pl-k">=</span> sayHello(); greetingPromise.then(<span class="pl-k">function</span> (<span class="pl-smi">greeting</span>) { <span class="pl-k">return</span> greeting <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">'</span>!!!!<span class="pl-pds">'</span></span>; }).then(<span class="pl-k">function</span> (<span class="pl-smi">greeting</span>) { <span class="pl-en">console</span><span class="pl-c1">.log</span>(greeting); <span class="pl-c">// 'hello world!!!!’</span> }); </pre></div> <h2><a class="anchor" href="http://ift.tt/1V652cg" id="user-content-sequencing-asynchronous-operations" name="user-content-sequencing-asynchronous-operations" target="_blank"></a>Sequencing Asynchronous Operations</h2> <p>A function passed to <code>then</code> can also return another promise. This allows asynchronous operations to be chained together, so that they are guaranteed to happen in the correct order. For example, if <code>addExclamation</code> is asynchronous (possibly needing to access another web service) and returns a promise for the new greeting:</p> <div class="highlight highlight-source-js"> <pre> <span class="pl-k">var</span> greetingPromise <span class="pl-k">=</span> sayHello(); greetingPromise.then(<span class="pl-k">function</span> (<span class="pl-smi">greeting</span>) { <span class="pl-k">return</span> addExclamation(greeting); <span class="pl-c">// addExclamation returns a promise</span> }).then(<span class="pl-k">function</span> (<span class="pl-smi">greeting</span>) { <span class="pl-en">console</span><span class="pl-c1">.log</span>(greeting); <span class="pl-c">// 'hello world!!!!’</span> }); </pre></div> <p>This can be written more simply as:</p> <div class="highlight highlight-source-js"> <pre> <span class="pl-k">var</span> greetingPromise <span class="pl-k">=</span> sayHello(); greetingPromise .then(addExclamation) .then(<span class="pl-k">function</span> (<span class="pl-smi">greeting</span>) { <span class="pl-en">console</span><span class="pl-c1">.log</span>(greeting); <span class="pl-c">// 'hello world!!!!’</span> }); </pre></div> <h2><a class="anchor" href="http://ift.tt/1S6v3lc" id="user-content-handling-errors" name="user-content-handling-errors" target="_blank"></a>Handling Errors</h2> <p>What if an error occurs while performing an asynchronous operation? For example, what if <code>sayHello</code>, or <code>addExclamation</code> fails? In synchronous code, you can use <code>try/catch</code>, and rely on exception propagation to handle errors in one spot. Here is a synchronous version of the previous example that includes <code>try/catch</code> error handling. If an error occurs in either <code>sayHello</code> or <code>addExclamation</code> (or <code>console.log</code> for that matter), the <code>catch</code> block will be executed:</p> <div class="highlight highlight-source-js"> <pre> <span class="pl-k">var</span> greeting; <span class="pl-k">try</span> { greeting <span class="pl-k">=</span> sayHello(); greeting <span class="pl-k">=</span> addExclamation(greeting); <span class="pl-en">console</span><span class="pl-c1">.log</span>(greeting); <span class="pl-c">// 'hello world!!!!’</span> } <span class="pl-k">catch</span>(error) { <span class="pl-en">console</span><span class="pl-c1">.error</span>(<span class="pl-s"><span class="pl-pds">'</span>uh oh: <span class="pl-pds">'</span></span>, error); <span class="pl-c">// 'uh oh: something bad happened’</span> } </pre></div> <p>When dealing with asynchronous operations, synchronous <code>try/catch</code> can no longer be used. However, promises allow handling asynchronous errors in a very similar way. This allows you not only to write asynchronous code that is similar in style to synchronous code, but also to reason about asynchronous control flow and error handling similarly to synchronous code.</p> <p>Here is an asynchronous version that handles errors in the same way:</p> <div class="highlight highlight-source-js"> <pre> <span class="pl-k">var</span> greetingPromise <span class="pl-k">=</span> sayHello(); greetingPromise .then(addExclamation) .then(<span class="pl-k">function</span> (<span class="pl-smi">greeting</span>) { <span class="pl-en">console</span><span class="pl-c1">.log</span>(greeting); <span class="pl-c">// 'hello world!!!!’</span> }, <span class="pl-k">function</span>(<span class="pl-smi">error</span>) { <span class="pl-en">console</span><span class="pl-c1">.error</span>(<span class="pl-s"><span class="pl-pds">'</span>uh oh: <span class="pl-pds">'</span></span>, error); <span class="pl-c">// 'uh oh: something bad happened’</span> }); </pre></div> <p>Notice that just like the synchronous example, you can use a single error handling block, in this case passed as the second parameter to the final call to <code>then</code>.</p> <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground"> <h3>Share This:</h3> <ul class="huge-it-share-buttons-list"> <li class=" nobackground"><a href="http://ift.tt/1LIxY7s" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1LIxY7s','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Understanding%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Understanding JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://ift.tt/1V652ck%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1V652ck JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://ift.tt/1LIxZZ0" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1LIxZZ0','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://ift.tt/1g6JGd7%20JavaScript%20Promises&mini=true&url=http://ift.tt/1LIxZZ4" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1g6JGd7 JavaScript Promises&mini=true&url=http://ift.tt/1LIxZZ4','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://ift.tt/1V651oG%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1V651oG JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://ift.tt/1S6v5tt%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1S6v5tt JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://ift.tt/1V651oI%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1V651oI JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px" target="_blank"></a></li> <li class=" nobackground"><a href="http://ift.tt/1LIxY7u" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1LIxY7u','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1S6v3lh%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1S6v3lh JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1V652co%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1V652co JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1o7SuTq" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1o7SuTq','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1S6v3lj%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1S6v3lj JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1o7SuTs" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1o7SuTs','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1V651oM%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1V651oM JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1S6v3ln%20JavaScript%20Promises&pic=&ralateUid=&" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1S6v3ln JavaScript Promises&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1V652cq%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1V652cq JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px" target="_blank"></a></li> <li class="none nobackground"><a href="http://ift.tt/1S6v5JQ%20JavaScript%20Promises" id="backforunical406" name="backforunical406" onclick="javascript:void window.open('http://ift.tt/1S6v5JQ JavaScript Promises','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px" target="_blank"></a></li> </ul> <div class="clear"></div> </div> View more at: <a href="http://yoursmart.mobi/">http://yoursmart.mobi</a>

Understanding JavaScript Promises

A promise represents the eventual result of an asynchronous operation. It is a placeholder into which the successful result value or reason ...

Read more »