{"id":683,"date":"2024-01-07T18:57:00","date_gmt":"2024-01-07T18:57:00","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=683"},"modified":"2024-02-05T10:33:38","modified_gmt":"2024-02-05T10:33:38","slug":"promises-in-javascript","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/promises-in-javascript\/","title":{"rendered":"Promises in JavaScript"},"content":{"rendered":"\n<p>Promises in JavaScript provide a way to handle asynchronous operations. They represent a value that may be available now, or in the future, or never. Promises are widely used in modern JavaScript for handling asynchronous code in a more organized and readable manner. Here&#8217;s an overview of how promises work:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Promise:<\/h3>\n\n\n\n<p>You create a promise using the <code>Promise<\/code> constructor, which takes a function as its argument. This function, called the executor, accepts two parameters: <code>resolve<\/code> and <code>reject<\/code>. Inside the executor, you perform the asynchronous operation, and then call <code>resolve<\/code> when the operation is successful or <code>reject<\/code> when it fails.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let myPromise = new Promise((resolve, reject) =&gt; {\n  \/\/ Asynchronous operation\n  setTimeout(() =&gt; {\n    let success = true;\n    if (success) {\n      resolve('Operation successful');\n    } else {\n      reject('Operation failed');\n    }\n  }, 2000);\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Handling Promise Results:<\/h3>\n\n\n\n<p>You use the <code>then()<\/code> method to handle the result of a promise. It takes two optional callbacks as arguments: one for the success case (fulfilled) and one for the failure case (rejected).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>myPromise.then(\n  result =&gt; {\n    console.log('Success:', result);\n  },\n  error =&gt; {\n    console.error('Error:', error);\n  }\n);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Chaining Promises:<\/h3>\n\n\n\n<p>You can chain promises using the <code>then()<\/code> method, which allows you to perform sequential asynchronous operations.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>getUserData()\n  .then(user =&gt; getUserPosts(user))\n  .then(posts =&gt; processPosts(posts))\n  .then(result =&gt; console.log(result))\n  .catch(error =&gt; console.error(error));<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Promise.all():<\/h3>\n\n\n\n<p>The <code>Promise.all()<\/code> method takes an array of promises as input and returns a single promise that resolves when all of the input promises have resolved, or rejects with the reason of the first promise that rejects.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let promises = &#91;promise1, promise2, promise3];\nPromise.all(promises)\n  .then(results =&gt; console.log(results))\n  .catch(error =&gt; console.error(error));<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Promise.race():<\/h3>\n\n\n\n<p>The <code>Promise.race()<\/code> method takes an array of promises as input and returns a single promise that resolves or rejects as soon as one of the input promises resolves or rejects.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let promises = &#91;promise1, promise2, promise3];\nPromise.race(promises)\n  .then(result =&gt; console.log(result))\n  .catch(error =&gt; console.error(error));<\/code><\/pre>\n\n\n\n<p>Promises provide a cleaner and more organized way to handle asynchronous code in JavaScript compared to traditional callback functions. They are a core feature of modern JavaScript and are widely used in web development for handling AJAX requests, fetching data from servers, and performing other asynchronous operations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Promises in JavaScript provide a way to handle asynchronous operations. They represent a value that may be available now, or<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-683","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=683"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/683\/revisions"}],"predecessor-version":[{"id":684,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/683\/revisions\/684"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}