{"id":18670,"date":"2020-06-30T03:04:22","date_gmt":"2020-06-30T10:04:22","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18670"},"modified":"2023-12-01T03:36:13","modified_gmt":"2023-12-01T11:36:13","slug":"javascript-async-await","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/","title":{"rendered":"How to Use Async and Await in JavaScript"},"content":{"rendered":"\n<p>Introduced in ES6, Promises allow you to easily write asynchronous code without having to deal with different callback functions. With Promises, there\u2019s no need to worry about multi-level callback functions which are both difficult to write and maintain.<br><\/p>\n\n\n\n<p>There\u2019s another feature in JavaScript that makes it even easier to write asynchronous code using Promises: async\/await functions. These allow you to write code that looks synchronous but actually performs asynchronous routines.<br><\/p>\n\n\n\n<p>In this guide, we\u2019re going to discuss what the async\/await function is and how you can use it in your code. Let\u2019s begin!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Promises: A Refresher<\/h2>\n\n\n\n<p>Before we begin talking about async\/await functions, we need to recap Promises. A promise represents an asynchronous operation. It tells your code that an operation is going to be performed and, if the operation is successful, a value will be returned. Otherwise, an error will be returned to the rest of your program.<br><\/p>\n\n\n\n<p>A Promise represents a value that isn\u2019t known when the Promise is created. A Promise is just that: a promise that future values will be sent back to your code. Because Promise is an object, it must be capitalized.<br><\/p>\n\n\n\n<p>Consider this scenario. You need to retrieve a resource from an API. This will take a second or two for your request to process. Instead of making the user wait for the request to process, you can move your code into a Promise so that the rest of your program can keep running.<br><\/p>\n\n\n\n<p>This means that you could continue rendering part of your website\u2019s user interface while the data is being retrieved. As soon as a value is returned, the Promise will send it to your main program.<br><\/p>\n\n\n\n<p>Here\u2019s an example of a Promise:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>let sendCookies = new Promise(resolve =&gt; {\n\tsetTimeout(() =&gt; {\n\t\tresolve(\"Your cookies have been sent!\");\n\t}, 1000);\n});\nsendCookies.then(data =&gt; {\n\tconsole.log(data);\n})<\/pre><\/div>\n\n\n\n<p>Our code returns: Your cookies have been sent! When we execute the sendCookies.then() method, our Promise is initiated. Our program waits 1,000 milliseconds and then sends back the value \u201cYour cookies have been sent!\u201d to our main program.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Async and Await<\/h2>\n\n\n\n<p>In an async\/await function, an await statement blocks your code from executing within its async function until a Promise is returned. It\u2019s for this reason that developers often say that async\/await functions look synchronous but perform asynchronous tasks.<br><\/p>\n\n\n\n<p>Consider the following example:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>function sendCookies() {\n\treturn new Promise(resolve =&gt; {\n\t\tsetTimeout(() =&gt; {\n\t\t\tresolve(\"Your cookies have been sent!\");\n\t\t}, 1000);\n\t});\n}\nasync function main() {\n\tconst sendMessage = await sendCookies();\n\tconsole.log(sendMessage);\n}\nmain();<\/pre><\/div>\n\n\n\n<p>Our code returns: Your cookies have been sent! It takes 1,000 milliseconds for our sendCookies() function to return the value \u201cYour cookies have been sent\u201d. In this case, we have declared an async function so that our code waits for a promise to resolve or be rejected.<br><\/p>\n\n\n\n<p>The \u201casync\u201d keyword tells our code that we want to perform an asynchronous operation in our function. The \u201cawait\u201d keyword tells our code to wait for the return of the sendCookies() Promise before it continues executing our program.<br><\/p>\n\n\n\n<p>Async functions always return a Promise.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using Async and Await with Multiple Steps<\/h2>\n\n\n\n<p>Async\/await functions are most commonly used when there are multiple Promises that you need to work with. This is sometimes called Promises chaining. This is because your code will wait for a Promise to be returned by each step before moving onto the next one:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>function processOrder()  {\n\treturn new Promise(resolve =&gt; {\n\t\tsetTimeout(() =&gt; {\n\t\t\tresolve(\"Your cookie order is being processed...\");\n\t\t}, 1000);\n\t});\n}\nfunction sendCookies() {\n\treturn new Promise(resolve =&gt; {\n\t\tsetTimeout(() =&gt; {\n\t\t\tresolve(\"Your cookies have been sent!\");\n\t\t}, 1000);\n\t});\n}\nasync function main() {\n\tconst processingMessage = await processOrder();\n\tconsole.log(sendMessage);\n\tconst sendMessage = await sendCookies();\n\tconsole.log(sendMessage);\n}<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>Your cookie order is being processed\u2026\nYour cookies have been sent!<\/pre><\/div>\n\n\n\n<p>Each step takes 1,000 milliseconds to complete. Our sendCookies() function is not executed until the Promise from our processOrder() function has been returned.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Async Expressions<\/h2>\n\n\n\n<p>There are three ways you can use an async\/await function.<br><\/p>\n\n\n\n<p>The first way is the approach that we\u2019ve shown in our last examples: through declaring functions. In our examples we have declared functions that return a Promise, then we have used the \u201casync\u201d and \u201cawait\u201d keywords to execute those functions.<br><\/p>\n\n\n\n<p>You can also declare an async function using arrow functions:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const main = async () =&gt; {\n\tconst sendMessage = await sendCookies();\n\tconsole.log(sendMessage);\n}<\/pre><\/div>\n\n\n\n<p>This code returns: Your cookies have been sent! It\u2019s the same as our first example but instead of declaring a main() function, we have used an arrow function.<br><\/p>\n\n\n\n<p>Similarly, you can use the function expression syntax:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const main = async function() {\n\tconst sendMessage = await sendCookies();\n\tconsole.log(sendMessage);\n}<\/pre><\/div>\n\n\n\n<p>This code returns: Your cookies have been sent! As you can see, the output is once again the same. The only difference is the way that we\u2019ve declared our function.<br><\/p>\n\n\n\n<p>In fact, this syntax is very similar to our last example. We\u2019ve just used the \u201cfunction()\u201d keyword instead of using an arrow function.<br><\/p>\n\n\n\n<p>There is no best way to declare an async\/await function. It all depends on the program you\u2019re writing and what syntax you prefer. While you could argue that arrow functions are the most concise method, other ways of declaring an async\/await function may be better in other cases.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Processing Web Requests Using Async\/Await<\/h2>\n\n\n\n<p>One of the most common usages of the async\/await function is to process web requests with an API that is Promise-based, such as fetch(). You can read more about how to use the fetch() function in our beginner\u2019s guide to JavaScript fetch.<br><\/p>\n\n\n\n<p>Consider this example:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>async function retrieveComments() {\n\tconst res = await fetch('https:\/\/jsonplaceholder.typicode.com\/comments');\n\tvar comments = await res.json();\n\tcomments = comments.map(comment =&gt; comment.name);\n\tconsole.log(comments);\n}\nretrieveComments();<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>[\"id labore ex et quam laborum\", \"quo vero reiciendis velit similique earum\" \u2026]<\/pre><\/div>\n\n\n\n<p>When we execute our retrieveComments() function, we use the \u201cawait\u201d keyword to wait for our fetch() statement to run. This means that the rest of our program does not continue until our web request has been processed. This is because the fetch() function returns a Promise.<br><\/p>\n\n\n\n<p>When a Promise is returned by the fetch() function, we convert the value it has returned to JSON. Then we map through the object to retrieve a list of the names of all comments and print that list to the console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Handle an Error<\/h2>\n\n\n\n<p>Oh, how I wish that errors didn\u2019t happen in code. But they do, and it\u2019s something that us developers have to plan for. In an asynchronous function, error handling is done synchronously using a try&#8230;catch statement. Consider this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>async function retrieveCookies() {\n\tconst res = await fetch('https:\/\/thisapidoesnotexist.app\/cookies');\n\tvar cookieNames = await res.json();\n\tcookieNames = cookieNames.map(cookie =&gt; cookie.name);\n\tresolve(cookieNames);\n}\nasync function printCookies() {\n\tconst cookies = await retrieveCookies();\n\tconsole.log(cookies);\n}\nprintCookies().catch(res =&gt; console.log(res.message));<\/pre><\/div>\n\n\n\n<p>Our code returns: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>NetworkError when attempting to fetch resource. While our code is functional, the API we are trying to access does not exist. This means that our Promise cannot return any data, so it instead returns a rejected Promise.<\/pre><\/div>\n\n\n\n<p>In our example, we have used a .catch() statement to print out the error returned by our function if one is returned. In this case, we use reject(\u2018Error\u2019) to tell our code that an error has arisen.<br><\/p>\n\n\n\n<p>If this statement is executed, our .catch() statement springs into action and prints that error.<br><\/p>\n\n\n\n<p>Similarly, async functions can catch syntax errors:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>async function retrieveCookies() {\n\tconst res = await fetch('https:\/\/thisapidoesnotexist.app\/cookies');\n\tvar cookieNames = await res.json();\n\tcookieNames = cookieNames.map(cookie =&gt; cookie.name);\n\tresolve(cookieNames);\n}\nasync function printCookies() {\n\ttry {\n\t\tconst cookies = await retrieveCookies();\n\t\tconsole.log(cookies);\n\t} catch(error) {\n\t\tconsole.log(error);\n\t}\n}\nprintCookies();<\/pre><\/div>\n\n\n\n<p>Our code returns: NetworkError when attempting to fetch resource. In this example, we\u2019ve used a try\/catch statement to check if our await method has returned a successful Promise. Again, our API is not valid, which causes our program to reject our Promise. When this happens, the \u201ccatch\u201d statement in our try\/catch block is executed, which logs our error to the console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Async\/await functions help you write asynchronous operations in your code. When an async function is declared, you can use the \u201cawait\u201d keyword to wait for operations to resolve. The await keyword must be used with a function that returns a Promise.<br><\/p>\n\n\n\n<p>Now you\u2019re ready to start using async\/await JavaScript functions like an expert!<\/p>\n","protected":false},"excerpt":{"rendered":"Introduced in ES6, Promises allow you to easily write asynchronous code without having to deal with different callback functions. With Promises, there\u2019s no need to worry about multi-level callback functions which are both difficult to write and maintain. There\u2019s another feature in JavaScript that makes it even easier to write asynchronous code using Promises: async\/await&hellip;","protected":false},"author":240,"featured_media":18671,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-18670","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use Async and Await in JavaScript | Career Karma<\/title>\n<meta name=\"description\" content=\"Async\/await functions allow you to write Promise-based code like it was synchronous. On Career Karma, learn how to work with async\/await functions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-async-await\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Async and Await in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Async\/await functions allow you to write Promise-based code like it was synchronous. On Career Karma, learn how to work with async\/await functions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-async-await\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T10:04:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:36:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Use Async and Await in JavaScript\",\"datePublished\":\"2020-06-30T10:04:22+00:00\",\"dateModified\":\"2023-12-01T11:36:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/\"},\"wordCount\":1138,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/\",\"name\":\"How to Use Async and Await in JavaScript | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg\",\"datePublished\":\"2020-06-30T10:04:22+00:00\",\"dateModified\":\"2023-12-01T11:36:13+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Async\\\/await functions allow you to write Promise-based code like it was synchronous. On Career Karma, learn how to work with async\\\/await functions.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-async-await\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Async and Await in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use Async and Await in JavaScript | Career Karma","description":"Async\/await functions allow you to write Promise-based code like it was synchronous. On Career Karma, learn how to work with async\/await functions.","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:\/\/careerkarma.com\/blog\/javascript-async-await\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Async and Await in JavaScript","og_description":"Async\/await functions allow you to write Promise-based code like it was synchronous. On Career Karma, learn how to work with async\/await functions.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-30T10:04:22+00:00","article_modified_time":"2023-12-01T11:36:13+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Use Async and Await in JavaScript","datePublished":"2020-06-30T10:04:22+00:00","dateModified":"2023-12-01T11:36:13+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/"},"wordCount":1138,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-async-await\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/","url":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/","name":"How to Use Async and Await in JavaScript | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg","datePublished":"2020-06-30T10:04:22+00:00","dateModified":"2023-12-01T11:36:13+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Async\/await functions allow you to write Promise-based code like it was synchronous. On Career Karma, learn how to work with async\/await functions.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-async-await\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/caspar-camille-rubin-oI6zrBj3nKw-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-async-await\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Use Async and Await in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18670"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18670\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18671"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}