{"id":4888,"date":"2017-05-09T20:00:18","date_gmt":"2017-05-09T20:00:18","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=4888"},"modified":"2017-05-09T20:00:18","modified_gmt":"2017-05-09T20:00:18","slug":"promises-in-javascripttypescript","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/promises-in-javascripttypescript\/","title":{"rendered":"Promises in JavaScript\/TypeScript"},"content":{"rendered":"<p>Promises, are analogous to futures or tasks (if you background is C#) and are used for asynchronous code.<\/p>\n<p>I&#8217;m using TypeScript at the moment (as part of learning Angular 2) but I&#8217;ll try to list code etc. in both JavaScript and TypeScript, solely to demonstrate the syntax. The underlying functionality will be exactly the same as (of course) TypeScript transpiles to JavaScript anyway.<\/p>\n<p>The syntax for a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\">promise in JavaScript<\/a> looks like this<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet promise = new Promise((resolve, reject) {\r\n   \/\/ carry out some async task\r\n   \/\/ then resolve or reject\r\n   \/\/ i.e. resolve(result);\r\n   \/\/ and\/or reject(&quot;Failed&quot;);\r\n});\r\n<\/pre>\n<p>As you can see in the above code, we can (in essence) return a success, with <em>resolve<\/em> or a failure, with <em>reject<\/em>. <\/p>\n<p>In some situations we might simply wish to immediately resolve or reject without actually executing any asynchronous code. <\/p>\n<p>In such situations we can use the methods Promises.resolve and\/or Promise.reject method calls, i.e.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ in JavaScript\r\nfunction getData() {\r\n   return Promise.resolve(data);\r\n   \/\/ or \r\n   return Promise.reject(&quot;Cannot connect&quot;);\r\n}\r\n\r\n\/\/ in TypeScript\r\ngetData(): Promise&lt;MyDataType&gt; {\r\n   return Promise.resolve(data);\r\n   \/\/ or\r\n   return Promise.reject(&quot;Connot connect);\r\n}\r\n<\/pre>\n<p>As you can see the difference between TypeScript and JavaScript (as one might expect) is the strong type checking\/expectations.<\/p>\n<p><strong>Using the results from a Promise<\/strong><\/p>\n<p>As a promise is potentially going to be taking some time to complete we need a way to handle continuations, i.e. what happens when it completes.<\/p>\n<p>In C# with have <em>ContinueWith<\/em>, in JavaScript we have <em>then<\/em>, hence our code having received a Promise might look like this<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet promise = getData();\r\n\r\npromise.then(result =&gt; {\r\n   \/\/ do something with the result\r\n}).catch(reason =&gt; {\r\n   \/\/ failure, so something with failure\r\n});\r\n<\/pre>\n<p>There are other Promise methods, see <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\">promise in JavaScript<\/a> but this should get us up and running with the basics.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Promises, are analogous to futures or tasks (if you background is C#) and are used for asynchronous code. I&#8217;m using TypeScript at the moment (as part of learning Angular 2) but I&#8217;ll try to list code etc. in both JavaScript and TypeScript, solely to demonstrate the syntax. The underlying functionality will be exactly the same [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,46],"tags":[],"class_list":["post-4888","post","type-post","status-publish","format-standard","hentry","category-javascript","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=4888"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4888\/revisions"}],"predecessor-version":[{"id":4914,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4888\/revisions\/4914"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=4888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=4888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=4888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}