{"id":685,"date":"2024-01-15T18:57:00","date_gmt":"2024-01-15T18:57:00","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=685"},"modified":"2024-02-05T10:37:20","modified_gmt":"2024-02-05T10:37:20","slug":"async-and-await-in-javascript","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/async-and-await-in-javascript\/","title":{"rendered":"Async and Await in JavaScript"},"content":{"rendered":"\n<p><code>async<\/code> and <code>await<\/code> are keywords introduced in ECMAScript 2017 (ES8) that provide syntactic sugar for working with asynchronous code, specifically for handling promises. They make asynchronous code look and behave more like synchronous code, which can make it easier to read and maintain. Here&#8217;s how <code>async<\/code> functions and <code>await<\/code> expressions work:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><code>async<\/code> Functions:<\/h3>\n\n\n\n<p>An <code>async<\/code> function is a function that operates asynchronously via the event loop, and always returns a promise. Inside an <code>async<\/code> function, you can use the <code>await<\/code> keyword to pause the execution of the function until a promise is settled (either fulfilled or rejected), and then resume the function&#8217;s execution.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function fetchData() {\n  \/\/ Asynchronously fetch data from a server\n  let data = await fetchDataFromServer();\n  console.log('Data received:', data);\n}\n\nfetchData();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><code>await<\/code> Expressions:<\/h3>\n\n\n\n<p>The <code>await<\/code> keyword can only be used inside an <code>async<\/code> function. It pauses the execution of the <code>async<\/code> function until the promise is settled (either fulfilled or rejected), and then resumes the function&#8217;s execution with the resolved value. If the promise is rejected, it throws an error that can be caught using a <code>try...catch<\/code> block.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function fetchData() {\n  try {\n    let data = await fetchDataFromServer(); \/\/ Wait for the promise to settle\n    console.log('Data received:', data);\n  } catch (error) {\n    console.error('Error:', error);\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Error Handling:<\/h3>\n\n\n\n<p>You can handle errors in <code>async<\/code> functions using <code>try...catch<\/code> blocks, just like synchronous code. If an error occurs inside an <code>async<\/code> function and is thrown from an <code>await<\/code> expression, the promise returned by the <code>async<\/code> function will be rejected with the thrown error.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function fetchData() {\n  try {\n    let data = await fetchDataFromServer();\n    console.log('Data received:', data);\n  } catch (error) {\n    console.error('Error:', error);\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Parallel Execution:<\/h3>\n\n\n\n<p>You can use <code>await<\/code> with multiple promises in parallel to wait for all of them to settle. By using <code>Promise.all()<\/code> with <code>await<\/code>, you can await an array of promises, and the <code>async<\/code> function will wait until all promises are settled.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function fetchDataParallel() {\n  let &#91;data1, data2] = await Promise.all(&#91;fetchData1(), fetchData2()]);\n  console.log('Data 1:', data1);\n  console.log('Data 2:', data2);\n}<\/code><\/pre>\n\n\n\n<p><code>async<\/code> functions and <code>await<\/code> expressions provide a more concise and readable way to work with asynchronous code, making it easier to write and understand complex asynchronous workflows. They are widely used in modern JavaScript for handling asynchronous operations, such as fetching data from servers, making API calls, and performing I\/O operations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>async and await are keywords introduced in ECMAScript 2017 (ES8) that provide syntactic sugar for working with asynchronous code, specifically<\/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-685","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/685","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=685"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"predecessor-version":[{"id":686,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions\/686"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}