Introduction to JavaScript - Async/Await


Introduction to JavaScript - Async/Await
Introduction to JavaScript - Async/Await

In this course, you will learn how to use the Async/Await syntax for the JavaScript Promise object.

Learning Objectives

  • Implement an asynchronous function using the Async keyword
  • Define the Await keyword
  • Implement the Await  keyword to resolve the promise object
  • Implement a try/catch block 
  • Learn how to convert a promise-based function to use Async/Await syntax

Intended Audience

  • This course is intended for anyone who wants to learn about JavaScript



Introduction to JavaScript Async/Await. ES6 introduce the promise object for handling asynchronous requests. As part of the promise object, a thin and catch statement would have to be used for resolving or rejecting the promise. With the ES8 standard was the introduction of async/await. Async/await is syntactic sugar for the promise object. Syntactic sugar is when a change has been made to a programming language that makes it either easier to read, write or understand. In this case, the promise keyword has been replaced with async and the await keyword is used in place of the thin statement to resolve the promise. Transition to the lab environment. On the screen, I have a function called getusers which uses the promise-based fetch API to request data from a third-party API server. To demonstrate this function in the terminal to the right, I will type node index.js. Pausing for a moment, there's a warning in the terminal that the fetch API is an experimental feature.

Quick disclaimer, the fetch API even though native to browsers for quite some time, only recently was incorporated into Node.js. Now, in the console is a response with all the users. So, the fetch API works in Node.js but it will carry this experimental flag for some time. Now I'm going to re-factor the getusers function to use async/await. Leaving the existing function above as a reference, I will begin by typing const getusers = async arrow function. The async keyword needs to be used in order to indicate that this is a promise-based function. Now, to handle the response, const response = await and I'm going to copy the fetch request from above and paste it after the await keyword. The await keyword tells the system to wait for the fetch request to resolve. Once it does resolve, I need to handle the response and return it as JSON. Const json= await response.json. On the following line, I will console.log JSON, and this finalizes the structure of the function to execute the same as above.

The await keyword has replaced the thin statements. To ensure that the fetch API does resolve properly, I need to use the await statement on each pending segment of the fetch requests. Now, this is already test out so I'm going to comment out the initial getusers function above and to the right, in the terminal, I will execute node on this file and there is the same response as earlier. Now, to emphasize the importance of the await statement as it is a replacement for the thin statement, I'm going to remove it from in front of the response.json execution. I will execute this file in the terminal again and now, there is a promise pending object. That is because the response.json method executed before the promise finish its settlement process. Now, I'm going to undo the await removal so this getusers function works properly. Now, for error handling, I need to use a catch statement but the structure is a little different. Within the getusers function, I need to incorporate a try-catch block.

Inside of the getusers function above the existing code, I'm going to add a try-catch snippet. Now, I'm going to move the existing code into the try statement. Inside of the catch statement, I'm going to console.log the error. So, as the name implies, the try statement is going to try this block of code. If there's an error, it will capture the error and place it in the console. I will execute this code in the terminal again and there is the fetch API response. And that's it, thanks for watching at Cloud Academy.


About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics