{"id":575,"date":"2020-08-27T15:18:47","date_gmt":"2020-08-27T15:18:47","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=575"},"modified":"2020-09-11T19:18:34","modified_gmt":"2020-09-11T19:18:34","slug":"what-is-promise-in-javascript","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/what-is-promise-in-javascript\/","title":{"rendered":"What is Promise in JavaScript"},"content":{"rendered":"\n
\"What<\/figure>\n\n\n\n

A Promise<\/code><\/strong> is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promise<\/strong> can either be fulfilled<\/em> with a value, or rejected<\/em> with a reason (error). A promise may be in one of 3 possible states: fulfilled<\/strong>, rejected<\/strong>, or pending<\/strong>. Promises can be attached to callbacks to handle the fulfilled value or the reason for rejection.<\/p>\n\n\n\n

The Syntax:<\/strong><\/p>\n\n\n\n

let promise = new Promise(function(resolve, reject) {\n  \/\/ Executor\n});<\/code><\/pre>\n\n\n\n
The function passed to new Promise<\/strong><\/code> is called the executor<\/em>. When new<\/strong> Promise<\/strong><\/code> is created, the executor runs automatically and attempts to perform a job . When it is finished with the attempt, it calls resolve<\/strong><\/code> if it was successful or reject<\/code><\/strong> if there was an error.  The arguments resolve<\/strong><\/code> and reject<\/strong><\/code> in the executor are callbacks provided by JavaScript itself. Our code will be only inside the executor. <\/p>\n\n\n\n
Consuming Promises:<\/strong><\/p>\n\n\n\n
A Promise object serves as a link between the executor and the consuming functions which will receive the result or error. A promise can be consumed using the .then()<\/code> method. The anonymous functions passed as arguments (callbacks) will handle the promise response. You may learn more about callbacks here<\/a>. <\/p>\n\n\n\n
promise.then(\n  function(response) { \n      \/\/ handle successful response \n      \/\/ This block of code execute only after receiving response  \n  },\n  function(error) {\n     \/\/ handle error \n  }\n);<\/code><\/pre>\n\n\n\n
Example:<\/p>\n\n\n\n
let getPromise = new Promise((resolve, reject) => {\n  \n \/\/ In this example, we use setTimeout() method to simulate async code. \n \/\/ In reality, you will be using consuming API.\n  \n\/\/ Returns \"Success!\" after a sec\nsetTimeout( function() {\n    resolve(\"Success!\"); \n  }, 1000) \n}) \n\ngetPromise.then((response) => {\n  \/\/ response is whatever we passed in the resolve() function above.\n  console.log(\"Promise response: \" + response);\n}, (error){\n  console.log(\"Promise Error: \" + error);\n});<\/code><\/pre>\n\n\n\n
Inclusion of async\/await<\/code><\/strong> feature in recent JavaScript edition ES8 <\/strong>has made working working with async functions and promises much more easier. You can learn more about async\/await here: What is async\/wait in JavaSript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promise can either be fulfilled with a value, or rejected with a reason (error). A [ … ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[195,176,200,217],"class_list":["post-575","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-es6-promise-example","tag-javascript","tag-new-promise","tag-what-is-promise-in-js","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=575"}],"version-history":[{"count":22,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/575\/revisions"}],"predecessor-version":[{"id":883,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/575\/revisions\/883"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}