1 00:00:00,139 --> 00:00:04,883 [MUSIC] 2 00:00:04,883 --> 00:00:09,625 JavaScript continues to provide new and improved ways to do the exact same thing. 3 00:00:09,625 --> 00:00:12,501 Working with promise space code is one of those things. 4 00:00:12,501 --> 00:00:16,853 So far you've experienced the progression of asynchronous code from callbacks 5 00:00:16,853 --> 00:00:18,137 to promises and fetch. 6 00:00:18,137 --> 00:00:24,273 ES 2017 introduced async/await to further simplify how you work with promises. 7 00:00:24,273 --> 00:00:27,268 In this stage, you'll learn how the keywords Async and 8 00:00:27,268 --> 00:00:30,899 Await together provide a special syntax to work with promises, and 9 00:00:30,899 --> 00:00:33,333 with that feels more intuitive and concise. 10 00:00:33,333 --> 00:00:36,998 Async/await and promises are fundamentally the same under the hood. 11 00:00:36,998 --> 00:00:41,844 So you should understand how promises work before working with async/await. 12 00:00:41,844 --> 00:00:45,885 Now that you are familiar with using promises, I'll quickly show you how 13 00:00:45,885 --> 00:00:49,355 async/await works then we'll begin using it in our project. 14 00:00:49,355 --> 00:00:54,037 It all happens with two special keywords async and await. 15 00:00:54,037 --> 00:00:57,517 The keyword async defines an asynchronous function. 16 00:00:57,517 --> 00:01:00,963 You can mark any JavaScript function with async like so. 17 00:01:00,963 --> 00:01:03,979 This function, for example, is going to make a fetch request. 18 00:01:03,979 --> 00:01:09,420 Inside of an async function, you use the await keyword to wait for a promise. 19 00:01:09,420 --> 00:01:11,833 The fetch method, for instance, returns a promise. 20 00:01:11,833 --> 00:01:14,298 By placing await in front of fetch, 21 00:01:14,298 --> 00:01:18,749 the function is awaiting a resolved promise returned by fetch. 22 00:01:18,749 --> 00:01:22,779 Once resolved, the fulfilled value, which is the response object, 23 00:01:22,779 --> 00:01:25,043 is assigned to the variable response. 24 00:01:25,043 --> 00:01:28,144 The next step is to parse the response to json. 25 00:01:28,144 --> 00:01:31,767 This task is also asynchronous and returns a promise. 26 00:01:31,767 --> 00:01:37,349 So in parsing the response, include the await keyword in front of response.json. 27 00:01:37,349 --> 00:01:42,232 Once the awaited promise is resolved the json gets stored in the variable data, so 28 00:01:42,232 --> 00:01:44,299 data is returned by the function. 29 00:01:44,299 --> 00:01:48,338 The await keyword pauses the execution of the async function and 30 00:01:48,338 --> 00:01:50,817 waits for the resolution of a promise. 31 00:01:50,817 --> 00:01:54,969 It then resumes execution and returns the resolved value. 32 00:01:54,969 --> 00:01:58,889 Pausing the execution, however, is not going to cause any blocking behavior. 33 00:01:58,889 --> 00:02:00,684 The JavaScript engine can run and 34 00:02:00,684 --> 00:02:03,704 execute other tasks in the meantime via the event loop. 35 00:02:03,704 --> 00:02:08,562 And keep in mind that the await keyword is valid only inside functions marked as 36 00:02:08,562 --> 00:02:09,087 async. 37 00:02:09,087 --> 00:02:13,201 If you use await outside of an async function, you will get a syntax error. 38 00:02:13,201 --> 00:02:17,050 And notice how no then methods are used to return a promise. 39 00:02:17,050 --> 00:02:19,241 Instead it looks like a regular function. 40 00:02:19,241 --> 00:02:21,659 That's where the power of async await lies. 41 00:02:21,659 --> 00:02:25,550 It lets you write asynchronous promise-based code that looks more like 42 00:02:25,550 --> 00:02:26,643 synchronous code. 43 00:02:26,643 --> 00:02:32,405 Also, it's important to remember that an async function always returns a promise. 44 00:02:32,405 --> 00:02:36,814 That promise resolves with the value the async function returns or 45 00:02:36,814 --> 00:02:40,527 rejects with an error thrown from within the function. 46 00:02:40,527 --> 00:02:41,355 For example, 47 00:02:41,355 --> 00:02:45,363 the data returned by the fetchData function is wrapped in a promise. 48 00:02:45,363 --> 00:02:49,731 One way to access the data is to chain a then method onto the function call, 49 00:02:49,731 --> 00:02:53,970 just like you normally would when working with promises or a fetchAPI. 50 00:02:53,970 --> 00:02:57,936 You're going to learn more about combining async/await with promise chains, 51 00:02:57,936 --> 00:03:01,623 along with common ways to handle errors when using async/await and more. 52 00:03:01,623 --> 00:03:03,979 Now that we've covered some of the basics, 53 00:03:03,979 --> 00:03:08,386 we'll begin converting many of our project's promise chains to async/await.