{"id":1301,"date":"2018-12-27T02:48:44","date_gmt":"2018-12-27T02:48:44","guid":{"rendered":"http:\/\/frowningbear.com\/codebase\/?p=1301"},"modified":"2022-09-08T03:50:29","modified_gmt":"2022-09-08T03:50:29","slug":"javascript-promises","status":"publish","type":"post","link":"https:\/\/frowningbear.com\/codebase\/2018\/12\/27\/javascript-promises\/","title":{"rendered":"Javascript Promises"},"content":{"rendered":"\n<p>My collected notes on the topic of Promises in Javascript.<\/p>\n\n\n\n<p>A <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\"><code>Promise<\/code><\/a> is an object representing the eventual completion or failure of an asynchronous operation. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.<\/p>\n\n\n\n<p>A promise in JavaScript is an abstraction around the idea of an  asynchronous callback that supports chaining. This makes the code read  to the humans like it is procedural. Do step #1 then step #2 then step  #3 all while allowing the computer to handle all the asynchronicity in  the all the calls. <\/p>\n\n\n\n<p>But the most immediate benefit of promises is chaining. <\/p>\n\n\n\n<p>Basically promises are much more composable + predictable than callbacks. <\/p>\n\n\n\n<p>\u2026modern functions return a promise you can attach your callbacks to instead.<br><\/p>\n\n\n\n<p>Unlike &#8220;old-style&#8221;, passed-in callbacks, a promise comes with some guarantees:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Callbacks will never be called before the completion of the current run of the JavaScript event loop.  <\/li><li>Callbacks added with then() even after the success or failure of the  asynchronous operation, will be called, as above. <\/li><li>Multiple callbacks may  be added by calling then() several times. Each callback is executed one  after another, in the order in which they were inserted. <\/li><\/ul>\n\n\n\n<p>At their most basic, promises are a bit like event listeners except:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa.<\/li><li>If a promise has succeeded or failed and you later add a success\/failure callback, the correct callback will be called, even though the event took place earlier.<\/li><\/ul>\n\n\n\n<p>This is extremely useful for async success\/failure, because you&#8217;re less interested in the exact time something became available, and more interested in reacting to the outcome.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">var myp = new Promise(function(resolve, reject) {\n  setTimeout(function(){\n  \tvar x = 1 + 6;\n  \tresolve(x);\n  \tconsole.log(x);\n  }, 3000)\n});\nmyp.then(function(result) {\n\treturn new Promise(function(resolve, reject) {\n\t\tsetTimeout(function() {\n\t\t\tvar y = result + 12;\n\t\t\tresolve(y);\n\t\t\tconsole.log(y);\n\t\t}, 3000);\n\t})\n}).then(function(result2) {\n\tconsole.log(result2 + 11);\n}).then(function() {\n\tconsole.log(\"Finished\");\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Resources<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Using_promises\">Using Promises (MDN)<\/a><\/li><li><a href=\"https:\/\/javascript.info\/promise-basics\">Promise Basics (javascript.info)<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"JavaScript Promises: an Introduction (opens in a new tab)\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/promises\" target=\"_blank\">JavaScript Promises: an Introduction<\/a><\/li><li><a href=\"https:\/\/scotch.io\/tutorials\/javascript-promises-for-dummies\">JavaScript Promises for Dummies<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Write Better JavaScript with&nbsp;Promises  (opens in a new tab)\" href=\"https:\/\/davidwalsh.name\/write-javascript-promises\" target=\"_blank\">Write Better JavaScript with&nbsp;Promises <\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"An incremental tutorial on promises in javascript (opens in a new tab)\" href=\"https:\/\/www.sohamkamani.com\/blog\/2016\/08\/28\/incremenal-tutorial-to-promises\/\" target=\"_blank\">An incremental tutorial on promises in javascript<\/a><\/li><li><a href=\"https:\/\/qntm.org\/files\/promise\/promise.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Learn JavaScript promises in about 70 minutes (opens in a new tab)\">Learn JavaScript promises in about 70 minutes<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"JavaScript - Chained Promises Before &amp; After Example (opens in a new tab)\" href=\"http:\/\/scotthannen.org\/blog\/2016\/03\/01\/chained-promises-before-and-after.html\" target=\"_blank\">JavaScript &#8211; Chained Promises Before &amp; After Example<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>My collected notes on the topic of Promises in Javascript. A Promise is an object representing the eventual completion or failure of an asynchronous operation.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1301","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/comments?post=1301"}],"version-history":[{"count":9,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1301\/revisions"}],"predecessor-version":[{"id":1391,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/posts\/1301\/revisions\/1391"}],"wp:attachment":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/media?parent=1301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/categories?post=1301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/tags?post=1301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}