{"id":499,"date":"2022-02-05T20:48:20","date_gmt":"2022-02-05T20:48:20","guid":{"rendered":"http:\/\/codebitshub.com\/?p=499"},"modified":"2022-02-27T09:59:48","modified_gmt":"2022-02-27T09:59:48","slug":"javascript-await-async","status":"publish","type":"post","link":"https:\/\/codebitshub.com\/javascript-await-async\/","title":{"rendered":"Why Is Javascript Await Async So Famous?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In this article, we are going to see through examples, some use cases of asynchronous programming in Javascript, and why the usage of <strong>async-await<\/strong> pattern in Javascript is so famous and convenient to use while coding.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">The <strong>async-await<\/strong>\u00a0pattern is a common syntactic pattern that many programming languages are using. It allows the execution of asynchronous, non-blocking code as if it was synchronous.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As a concept is related to the coroutine concept and it provides the ability to a piece of code to execute a different snippet of code while waiting for a long-running, asynchronous task to complete.<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#Synchronous_vs_Asynchronous\" >Synchronous vs Asynchronous<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#Callback_functions\" >Callback functions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#Error_Handling_with_callback_functions\" >Error Handling with callback functions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#Callback_Hell\" >Callback Hell<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#Promises\" >Promises<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#How_to_create_a_Promise\" >How to create a Promise<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#How_to_consume_a_Promise\" >How to consume a Promise<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#Error_handling_with_promises\" >Error handling with promises<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#How_to_handle_callback_hell_with_promises\" >How to handle callback hell with promises<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#Async_Await\" >Async Await<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Synchronous_vs_Asynchronous\"><\/span><span style=\"font-weight: 400;\">Synchronous vs Asynchronous<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In a synchronous programming model, each task is performed one at a time sequentially. So in order for a step to execute the previous step has to be complete.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As a result, <strong>long-running<\/strong> operations will block the rest of the program until the synchronous operations are complete.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">On the other hand in the asynchronous programming model, operations take place in a non-sequential manner. <\/span><span style=\"letter-spacing: 0.1px;\">Asynchronous non-blocking operations do not wait for other operations to complete.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Once an asynchronous operation is complete, successfully or unsuccessfully, it raises an event that notifies the rest of the code with the results and that is ready for the next step to take control.<\/span><\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Callback_functions\"><\/span><span style=\"font-weight: 400;\">Callback functions<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">One way to approach asynchronous programming is using callback functions.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">A callback is a function that will execute from another function when a specific event occurs. The callback function will be passed as a value to the caller function.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see some common examples of callback functions<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">A common use case scenario of callback functions is with <a href=\"https:\/\/www.w3schools.com\/jsref\/dom_obj_event.asp\" target=\"_blank\" rel=\"noopener\"><strong>DOM<\/strong><\/a> events<\/span><\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"RwjoYWo\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/RwjoYWo\"><br \/>\ncallbacks with dom events<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>In the code above I am waiting for the <strong>DOMContentLoaded<\/strong> event to fire.<\/p>\n<p>Next, I am getting the div element from the HTML document and changing its styles when the mouse enters and exits the div element using the <strong>mouseover<\/strong> and <strong>mouseout<\/strong> events.<\/p>\n<p>Moreover, I am using the addEventListener method to add the callback functions to these events.<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">The invocation of a callback function could take place for any kind of event not only DOM events even <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/Creating_and_triggering_events\"><span style=\"font-weight: 400;\">custom<\/span><\/a><span style=\"font-weight: 400;\"> events or after a time period ends.\u00a0<\/span><\/p>\n<p>Let&#8217;s see an example with timers.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"LYObJeZ\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/LYObJeZ\"><br \/>\ncallback with timers<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In the code above, as you see in the logs the callback function will be executed after the expiration of the defined time period.<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Error_Handling_with_callback_functions\"><\/span><span style=\"font-weight: 400;\">Error Handling with callback functions<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Traditionally errors are handled in callback functions as <strong>arguments<\/strong> that are passed in the callback functions.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let&#8217;s see an example of reading a file that does not exist in the <strong>NodeJS<\/strong> environment.<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/call-back-errors-in-node-js-cdlw9?module=index.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>As you can see in the code above I am attempting to read a file that does not exist in the system.<\/p>\n<p>As a result of this, an error object will be sent to the callback function that I can detect and log as you see below.<\/p>\n<p class=\"note\">Received error [Error: ENOENT: no such file or directory, open &#8216;a_file_that_does_not_exist.txt&#8217;] {<br \/>\nerrno: -2,<br \/>\ncode: &#8216;ENOENT&#8217;,<br \/>\nsyscall: &#8216;open&#8217;,<br \/>\npath: &#8216;a_file_that_does_not_exist.txt&#8217;<br \/>\n}<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Callback_Hell\"><\/span><span style=\"font-weight: 400;\">Callback Hell<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Callback functions traditionally are great to use for simple cases. The problem is that they can introduce multiple levels of nesting that can real quick make your code hard to understand and maintain.<\/span><\/p>\n<p>It is more likely to face it when you are working with tasks that are asynchronous by nature like working with APIs, reading files from disk, retrieving data from the database, or downloading files from the internet.<\/p>\n<p>Let&#8217;s see an example working with fake user data that are provided from the <a href=\"https:\/\/gorest.co.in\/\" target=\"_blank\" rel=\"noopener\">gorest.co.in<\/a> API.<\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/callback-hell-example-e8v7p?file=\/src\/index.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>In the example above I am using the GET endpoint <strong>https:\/\/gorest.co.in\/public\/v2\/users\/{user_id}<\/strong> in order to retrieve a user&#8217;s data.<\/p>\n<p>My goal is to get the data for three users and log them into the console.<\/p>\n<p>For that purpose, I am using the <a href=\"https:\/\/www.npmjs.com\/package\/xmlhttprequest\" target=\"_blank\" rel=\"noopener\"><strong><span style=\"color: #333333;\">XMLHttpRequest<\/span><\/strong><\/a><span style=\"color: #333333;\"> npm package to retrieve the data in the NodeJS environment.<\/span><\/p>\n<p>As soon as I get the data for <strong>user2349<\/strong> I am triggering a second XMLHttpRequest to get the data for user2350. The same logic is applied for <strong>user2352.<\/strong><\/p>\n<p>Finally, when all the requests are complete I am logging their data to the console.<\/p>\n<p>Now you can see that even if I am getting the data only for three users the code is very clean and cannot be read easily.<\/p>\n<p>Even if I split the callback functions in separate declarations the improvement is not significant as you can see in the file<strong> not_nested.js<\/strong> in the previous example.<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Often this problem is mentioned as <\/span><b>callback hell<\/b><span style=\"font-weight: 400;\"> and can be a serious issue when you are developing large applications.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Nowadays the use of <strong>Promise<\/strong> and of the syntax <strong>async\/await<\/strong> provide a much cleaner way to write asynchronous code in Javascript.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see some examples in the next sections.<\/span><\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Promises\"><\/span><span style=\"font-weight: 400;\">Promises<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Promises are special objects that are used to handle asynchronous tasks. It is defined as a proxy for a value that is not currently available but it will become as soon as a specific task is complete.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">You can use them in order to avoid the <\/span><b>callback hell<\/b><span style=\"font-weight: 400;\"> that I described in the previous section.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">A Javascript promise object has two properties named state and result. The state property can have the values \u2018<strong>pending<\/strong>\u2019, \u2018<strong>fulfilled<\/strong>\u2019 and \u2018<strong>rejected<\/strong>\u2019. Depending on the state value the result property is modified accordingly as you can see in the table below.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>state<\/b><\/td>\n<td><b>result<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">pending<\/span><\/td>\n<td><span style=\"font-weight: 400;\">undefined<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">fulfilled<\/span><\/td>\n<td><span style=\"font-weight: 400;\">a result value<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">rejected<\/span><\/td>\n<td><span style=\"font-weight: 400;\">an error object<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Since this article is about <strong>async\/await<\/strong> and why it is famous, I will just give some basic examples of creating and using Promises in order to keep it as short as possible.<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"How_to_create_a_Promise\"><\/span><span style=\"font-weight: 400;\">How to create a Promise<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">You can initialize a promise object using the <strong>Promise<\/strong> constructor that the Promise API exposes and the syntax <strong>new Promise()<\/strong>.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">The Promise constructor accepts two functions as parameters named <strong>resolve<\/strong> and <strong>reject<\/strong>.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">At first, when you create the Promise object will be in a pending state. Then depending on which function will be called the promise will be either <\/span><b>fulfilled<\/b><span style=\"font-weight: 400;\"> or <\/span><b>rejected<\/b><span style=\"font-weight: 400;\"> with the <strong>value\/error<\/strong> that is passed in the functions resolve\/reject respectively.<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"How_to_consume_a_Promise\"><\/span><span style=\"font-weight: 400;\">How to consume a Promise<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">A promise can be consumed using the methods <\/span><b>then<\/b><span style=\"font-weight: 400;\"> and <\/span><b>catch<\/b><span style=\"font-weight: 400;\"> following the syntax below.<\/span><\/p>\n<p class=\"note\"><span style=\"font-weight: 400;\">.then((value) =&gt; {&#8230;}).catch((error)=&gt;{&#8230;})<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Each of these methods accepts a callback function that will return the value in which the promise is fulfilled or rejected.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see an example<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/promise-example-7brqi?file=\/src\/index.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>As you can see in the code above after 3 seconds the message &#8220;I am done&#8221; will appear in the console which is the resolved value.<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Another important property of promises is chaining. So if the first then() method returns another promise object it can be chained with a second then() method.\u00a0<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Error_handling_with_promises\"><\/span><span style=\"font-weight: 400;\">Error handling with promises<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Errors in promises can be handled with the usage of the catch method as we saw above. When a promise fails or is rejected the catch method will take control and its callback will be executed.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see an example<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/promise-error-handling-z4o4g?file=\/src\/index.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>As you can see in the code above after 3 seconds the message &#8220;An error occurred&#8221; will appear in the console which is the rejected value.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"How_to_handle_callback_hell_with_promises\"><\/span><span style=\"font-weight: 400;\">How to handle callback hell with promises<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Now that you have a picture of promises, let\u2019s see an example of how you can handle the <\/span><b>callback hell<\/b><span style=\"font-weight: 400;\"> issue using <strong>promises<\/strong>.<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/promises-callback-hell-handling-w6m3c?file=\/src\/index.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In the code above I am using the node-fetch package to call a RESTful endpoint in order to retrieve data from an API.\u00a0<\/span><\/p>\n<p>In the first <strong>then()<\/strong> method I am returning the value of the text method which again is a promise. Finally in the third <strong>then()<\/strong> method I can log the data for the user2349.<\/p>\n<p>I repeat the same process for each user and I am saving the user data in an array named users.<\/p>\n<p>In the final step, I can log the data that I stored for all the users.<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As you can see it is more readable and less complex. <\/span>If you need more information about promises you can read <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Async_Await\"><\/span><span style=\"font-weight: 400;\">Async Await<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Async\/await syntax was introduced in <\/span><b>ECMAScript 2017 <\/b>of Javascript<span style=\"font-weight: 400;\"> and is built on top of promises. It is <strong>syntactic sugar<\/strong> that helps to write and maintain easier asynchronous code.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">It will make asynchronous code looks synchronous and maintain the asynchronous nature of the code at the same time.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Also, it will help you to avoid the callback hell issue that I described in the previous section.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">So let\u2019s see some examples of how you can use it.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In order to use it, you should write the keyword async in front of a function declaration. This will convert the function to asynchronous and it will return a promise.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Next in order to get the resolved or rejected value you should use the keyword <\/span><b>await<\/b><span style=\"font-weight: 400;\"> in front of the async function invocation.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">This will force the javascript engine to wait for the promise to resolve or to reject.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Following the <strong>async-await<\/strong>\u00a0syntax will help you to avoid chaining of <strong>then()<\/strong> methods in promises and write more readable code that will look synchronous.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see our previous example with the callback hell issue and how it looks like using the async\/await approach.<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/async-await-callback-handling-z7pyg?file=\/src\/index.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>As you can see, the code is much cleaner and easy to read compared to the Promises approach. Also, it is shorter and easier to maintain.<\/p>\n<p>This is the benefit that you earn using the async\/await syntax and the main reason why this approach is popular and famous among javascript developers.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span><span style=\"font-weight: 400;\">Summary<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s summarize what we have seen in this article<\/span><\/p>\n<ul style=\"text-align: justify;\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">What synchronous and asynchronous programming is<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How to approach asynchronous programming with callback functions<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">What a callback hell is<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How to avoid callback hell using promises and async\/await syntax<\/span><\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Thank you for reading this long article. I hope it will help you to understand better the topic of async\/await syntax.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As I mentioned before, the reason that the syntax <strong>async-await<\/strong><\/span><span style=\"font-weight: 400;\">\u00a0is so famous in Javascript coding is that it will help you to avoid the callback hell issue, to write less code in a more readable and cleaner way.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Happy coding!<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we are going to see through examples, some use cases of asynchronous programming in Javascript, and why the usage of async-await pattern in Javascript is so famous and convenient to use while coding. The async-await\u00a0pattern is a common syntactic pattern that many programming languages are using. It allows the execution of asynchronous, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11],"tags":[17],"post_folder":[],"class_list":["post-499","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-languages","tag-javascript","post-list-post__standard"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Why Is Javascript Await Async So Famous? - codebitshub.com<\/title>\n<meta name=\"description\" content=\"Why Is Javascript Await Async So Famous? Using the async await syntax can help to avoid callback hell problems and write cleaner code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codebitshub.com\/javascript-await-async\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Is Javascript Await Async So Famous? - codebitshub.com\" \/>\n<meta property=\"og:description\" content=\"Why Is Javascript Await Async So Famous? Using the async await syntax can help to avoid callback hell problems and write cleaner code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codebitshub.com\/javascript-await-async\/\" \/>\n<meta property=\"og:site_name\" content=\"codebitshub.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-05T20:48:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-27T09:59:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1125\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myapos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myapos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/\"},\"author\":{\"name\":\"myapos\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\"},\"headline\":\"Why Is Javascript Await Async So Famous?\",\"datePublished\":\"2022-02-05T20:48:20+00:00\",\"dateModified\":\"2022-02-27T09:59:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/\"},\"wordCount\":1720,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"keywords\":[\"javascript\"],\"articleSection\":[\"Programming Languages\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/\",\"name\":\"Why Is Javascript Await Async So Famous? - codebitshub.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"datePublished\":\"2022-02-05T20:48:20+00:00\",\"dateModified\":\"2022-02-27T09:59:48+00:00\",\"description\":\"Why Is Javascript Await Async So Famous? Using the async await syntax can help to avoid callback hell problems and write cleaner code.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/javascript-await-async\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codebitshub.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why Is Javascript Await Async So Famous?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"name\":\"codebitshub.com\",\"description\":\"A blog about programming and coding\",\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codebitshub.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\",\"name\":\"codebitshub.com\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\",\"name\":\"myapos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"caption\":\"myapos\"},\"url\":\"https:\\\/\\\/codebitshub.com\\\/author\\\/myapos\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why Is Javascript Await Async So Famous? - codebitshub.com","description":"Why Is Javascript Await Async So Famous? Using the async await syntax can help to avoid callback hell problems and write cleaner code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codebitshub.com\/javascript-await-async\/","og_locale":"en_US","og_type":"article","og_title":"Why Is Javascript Await Async So Famous? - codebitshub.com","og_description":"Why Is Javascript Await Async So Famous? Using the async await syntax can help to avoid callback hell problems and write cleaner code.","og_url":"https:\/\/codebitshub.com\/javascript-await-async\/","og_site_name":"codebitshub.com","article_published_time":"2022-02-05T20:48:20+00:00","article_modified_time":"2022-02-27T09:59:48+00:00","og_image":[{"width":1920,"height":1125,"url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","type":"image\/jpeg"}],"author":"myapos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myapos","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codebitshub.com\/javascript-await-async\/#article","isPartOf":{"@id":"https:\/\/codebitshub.com\/javascript-await-async\/"},"author":{"name":"myapos","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61"},"headline":"Why Is Javascript Await Async So Famous?","datePublished":"2022-02-05T20:48:20+00:00","dateModified":"2022-02-27T09:59:48+00:00","mainEntityOfPage":{"@id":"https:\/\/codebitshub.com\/javascript-await-async\/"},"wordCount":1720,"commentCount":0,"publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"image":{"@id":"https:\/\/codebitshub.com\/javascript-await-async\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","keywords":["javascript"],"articleSection":["Programming Languages"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codebitshub.com\/javascript-await-async\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codebitshub.com\/javascript-await-async\/","url":"https:\/\/codebitshub.com\/javascript-await-async\/","name":"Why Is Javascript Await Async So Famous? - codebitshub.com","isPartOf":{"@id":"https:\/\/codebitshub.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codebitshub.com\/javascript-await-async\/#primaryimage"},"image":{"@id":"https:\/\/codebitshub.com\/javascript-await-async\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","datePublished":"2022-02-05T20:48:20+00:00","dateModified":"2022-02-27T09:59:48+00:00","description":"Why Is Javascript Await Async So Famous? Using the async await syntax can help to avoid callback hell problems and write cleaner code.","breadcrumb":{"@id":"https:\/\/codebitshub.com\/javascript-await-async\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codebitshub.com\/javascript-await-async\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/javascript-await-async\/#primaryimage","url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},{"@type":"BreadcrumbList","@id":"https:\/\/codebitshub.com\/javascript-await-async\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codebitshub.com\/"},{"@type":"ListItem","position":2,"name":"Why Is Javascript Await Async So Famous?"}]},{"@type":"WebSite","@id":"https:\/\/codebitshub.com\/#website","url":"https:\/\/codebitshub.com\/","name":"codebitshub.com","description":"A blog about programming and coding","publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codebitshub.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codebitshub.com\/#organization","name":"codebitshub.com","url":"https:\/\/codebitshub.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/","url":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},"image":{"@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61","name":"myapos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","caption":"myapos"},"url":"https:\/\/codebitshub.com\/author\/myapos\/"}]}},"_links":{"self":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":5,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/499\/revisions"}],"predecessor-version":[{"id":595,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/499\/revisions\/595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media\/24"}],"wp:attachment":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media?parent=499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/categories?post=499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/tags?post=499"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/post_folder?post=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}