All language subtitles for Part 5- Async and Await

welcome everyone to this tutorial all

about async and await we are going to be

exploring how these two keywords make

asynchronous programming easier by using

a lot of visual guides followed by code

examples async and away are quite new to

the world of javascript having been

added in ecma script 2017 they

essentially help promises look more

readable by making it look like the

old-school synchronous code think of

them as syntactical sugar for promises

if you will

there are two parts to using async and

await okay but let's look at the async

keyword just after our video sponsors

korea karma shout out who has made this

video today possible korea karma is

essentially a must-have for any aspiring

developer as it is one of the fastest

ways to break into a career in tech they

offer boot camp advice as well as some

immersive courses that are designed to

teach you the skills to get hired

quickly and i've helped over 1 million

workers navigate their career each month

through their community of like-minded

dads mentors and coaches

they even have live audio rooms in that

app hosted by people like me so come

join and hang out i have even been given

a link for you in which 1 000 of my

subscribers to sign up to queer karma

will get exclusive early access to korea

karma's new free mini coding bootcamp

where you'll learn the basics of html

css and javascript okay so thanks career

karma

now this video is part of a mini series

that i am doing about asynchronous

javascript and is in fact the last

episode of this series if you haven't

seen the others then please do check out

the playlist that i have linked in the

description below and as always i really

do appreciate that sub as this is the

way that i can continue to create free

content for everyone here

here we have a function just a standard

super boring function

now

i'm going to change this into an async

function how you ask

simply by adding the keyword async

before it just like that so just like

that i've turned it into an async

function but now if i run this code you

will see a promise is returned

it truly is an a sync function

i can of course also write this as a

function expression or in this case an

async function expression so you would

have seen me do this before if you watch

my other tutorials i'm simply using this

function and swapping around to a

function expression by using the arrow

function and assigning all of this to a

const

okay

now if i was a core print as we just

learned it would return a promise right

from the previous video on promises we

know that to consume the value returned

when the promise fulfills we can use a

then block

so i would simply chain it

so write then

followed by i'm going to use an arrow

function for this not a function

there we go i'm just going to

console.log the response

simple how easy was that so to recap the

async keyword is added to the function

to tell our code that this is an async

function and return a promise rather

than returning a value but we still need

to pair it with a weight

let's move on to how we would use a

weight in a similar way to make this

code more readable

a weight only works inside async

functions within regular javascript code

it can be put in front of any promise to

pause your code in that line until the

promise is fulfilled

let's have a look at this

encode

for this i'm going to go back to a

previous code example i used in the

video about promises in which we make a

fetch request to the countries api and

rewrite it with the knowledge we have to

make everything more readable

i'm just going to keep this up here so

you can compare the two

so as a recap what is happening here if

you remember or if you watched the

previous video is that we change some

promises together

this fetch here returns a promise we

then chained then to it and then call

this function when that promise resolved

then we've returned another promise and

waited for that one to resolve and then

ended it with a catch to catch all the

errors

it looks fine but let's get to using our

new async n08 keywords to really clean

it up and make it way more

readable so the first thing i'm going to

do is write a function and i'm going to

call it getdata

now let's make asynchronous based on

what we have learnt

so how do we do this again

that is right we simply write async in

front of it

so now we have an async function this is

going to return a promise

as we know from before

so let's try this out and call getdata

and wrap it in a console.log

okay

and

there we

go a promise is being returned

now we need to use a weight inside of it

this time i'm going to use fetch again

but instead of chaining it with then i'm

going to stick the word away in front of

it

this await essentially stops the fetch

from assigning a value to the response

until there is a response to be given or

in other words until the promise from

fetch has resolved

now we are not yet done

in the previous example here we had

another promise right

that's why we changed the then here

we need to deal with this second promise

so in other words we need to deal with

the return of what happens when we grab

response and use the json method which

is also asynchronous which means it also

returns a promise

so

how do you think we should do that

a clue is that we just did it

so once again we would grab the response

and use the json method on it to get the

data

now let's console.log the data and call

the async function of getdata

wonderful

okay so let's just do that

here

wonderful but we are not yet done

we want to be able to use this data

outside of the function so let's go

ahead and return it so when i call the

function this will get

returned

but once again this is not enough

why

surely if we call get data it will

return the data right well wrong

get data is an async function and what

do we know about async functions they

return promises

so now i'm actually going to go back to

using then for this so i'm going to

chain the get data with a callback that

looks like

this we chain this

as it is outside now of our async

functions we can't use a weight anymore

a weight needs to be inside the async

function as we said at the beginning

okay

so this is what the code will now look

like

we are now chaining using then and we

can of course also catch the errors

again by chaining the

catch and logging out the

errors

and

wonderful

i hope you've learned a lot in this

video i hope it was useful to you and

please do not forget that if something

doesn't make sense please do comment in

the description in the comments below as

it really is my goal to help you

understand all about asynchronous

javascript thanks very much for watching

this mini series i hope you can see the

difference in how we progress from the

beginning video to this very end one

once again all the videos will be

available in the description below as a

little miniseries