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.