{"id":28452,"date":"2019-12-15T14:57:28","date_gmt":"2019-12-15T09:27:28","guid":{"rendered":"https:\/\/techmasala.addastudents.com\/dev\/?p=28452"},"modified":"2020-06-11T09:01:12","modified_gmt":"2020-06-11T03:31:12","slug":"promises-in-javascript-tech2ez","status":"publish","type":"post","link":"https:\/\/techmasala.addastudents.com\/dev\/promises-in-javascript-tech2ez\/","title":{"rendered":"Promises In JavaScript-TECH2EZ"},"content":{"rendered":"\n<p>This article aims to provide the introduction of Promises in JavaScript.<br>A promise is an object which can be returned synchronously from an asynchronous function.<br>It will be in one of the 3 possible states: <br><strong>Fulfilled: <\/strong>onFulfilled() will be called (e.g., resolve() was called) <br><strong>Rejected:<\/strong> onRejected() will be called (e.g., reject() was called) <br><strong>Pending:<\/strong> not yet fulfilled or rejected <br>States of Promises are shown below :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/State.png\" alt=\"\" class=\"wp-image-28453\"\/><\/figure>\n\n\n\n<p> A promise is <strong>settled<\/strong> if it\u2019s not pending. Sometimes people use <em>resolved<\/em> and <em>settled<\/em> to mean the same thing, that it is <em>not pending<\/em>.<br>Once settled, a promise can not be resettled. Calling resolve() or reject() again will have no effect.  <br>Example:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"577\" src=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Promise.png\" alt=\"\" class=\"wp-image-28454\" srcset=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Promise.png 552w, https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Promise-287x300.png 287w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span style=\"text-decoration: underline;\">Rules<\/span><\/strong><\/li><li> A promise or \u201cthenable\u201d is an object that supplies a standard-compliant .then() method. <\/li><li> A pending promise may transition into a fulfilled or rejected state. <\/li><li>A fulfilled or rejected promise is settled, and must not transition into any other state.<\/li><li>Once a promise is settled, it must have a value (which may be undefined). That value must not change.<br>Change in this context refers to identity (===) comparison. An object may be used as the fulfilled value, and object properties may mutate.<br> Every promise must supply a .then() method with the following signature: <br> promise.then( <br> &nbsp;onFulfilled?: Function, <br> &nbsp;onRejected?: Function <br>) =&gt; Promise<\/li><li> Both onFulfilled() and onRejected() are optional. <\/li><li> If the arguments supplied are not functions, they must be ignored. <\/li><li> onFulfilled() will be called after the promise is fulfilled, with the promise\u2019s value as the first argument. <\/li><li> onRejected() will be called after the promise is rejected, with the reason for rejection as the first argument. The reason may be any valid JavaScript value, but because rejections are essentially synonymous with exceptions, I recommend using Error objects. <\/li><li>Neither onFulfilled() nor onRejected() may be called more than once.<\/li><li>.then() may be called many times on the same promise. In other words, a promise can be used to aggregate callbacks.<\/li><li> .then() must return a new promise, promise2. <\/li><li> If onFulfilled() or onRejected() return a value x, and x is a promise, promise2 will lock in with (assume the same state and value as) x. Otherwise, promise2 will be fulfilled with the value of x.<br>If either onFulfilled or onRejected throws an exception e, promise2 must be rejected with e as the reason.<br>If onFulfilled is not a function and promise1 is fulfilled, promise2 must be fulfilled with the same value as promise1.<br>If onRejected is not a function and promise1 is rejected, promise2 must be rejected for the same reason as promise1. <\/li><\/ul>\n\n\n\n<p><strong><span style=\"text-decoration: underline;\">Promise Chaining<\/span><\/strong><br> Because .then() always returns a new promise, it\u2019s possible to chain promises with precise control over how and where errors are handled. Promises allow you to mimic normal synchronous code\u2019s try\/catch behavior. <br>Below find the Example For Promise Chaining :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"402\" src=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Screenshot_1.png\" alt=\"\" class=\"wp-image-28465\" srcset=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Screenshot_1.png 657w, https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Screenshot_1-300x184.png 300w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Screenshot_2.png\" alt=\"\" class=\"wp-image-28466\" width=\"585\" height=\"348\" srcset=\"https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Screenshot_2.png 430w, https:\/\/techmasala.addastudents.com\/dev\/wp-content\/uploads\/2019\/12\/Screenshot_2-300x179.png 300w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><\/figure>\n\n\n\n<p><strong><span style=\"text-decoration: underline;\">Error Handling<\/span><\/strong><br>Note that promises have both a success and an error handler, and it\u2019s very common to see code that does this: <br> save().then( <br> &nbsp;handleSuccess, <br> &nbsp;handleError <br> ); <br> But what happens if handleSuccess() throws an error? The promise returned from .then() will be rejected, but there\u2019s nothing there to catch the rejection \u2014 meaning that an error in your app gets swallowed. Oops! <br>For that reason, some people consider the code above to be an anti-pattern, and recommend the following, instead: <br> save().then(handleSuccess).catch(handleError) ;<br> The difference is subtle, but important. In the first example, an error originating in the save() operation will be caught, but an error originating in the handleSuccess() function will be swallowed. <br><br><\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=1DHeOAAudKI\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This article aims to provide the introduction of Promises in JavaScript.A promise is an object which can be returned synchronously from an asynchronous function.It will be in one of the 3 possible states: Fulfilled: onFulfilled() will be called (e.g., resolve() was called) Rejected: onRejected() will be called (e.g., reject() was called) Pending: not yet fulfilled [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":32066,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[69,47,45,46],"class_list":["post-28452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-javascript-online","tag-69","tag-javascript","tag-js","tag-promises"],"_links":{"self":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/28452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/comments?post=28452"}],"version-history":[{"count":5,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/28452\/revisions"}],"predecessor-version":[{"id":28478,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/28452\/revisions\/28478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media\/32066"}],"wp:attachment":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media?parent=28452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/categories?post=28452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/tags?post=28452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}