All language subtitles for Async JavaScript Part 4- Promises

hello everyone in this video i'm going

to deep dive into what

promises are and how to use them using

javascript this video is part of a

little mini series that i am doing on

asynchronous javascript starting with

ajax

moving on to async versus synchronous

javascript

having a look at callbacks and now

moving on to

promises so what are promises

as we know there are two types of

asynchronous code styles you will come

across in javascript

those are the also callbacks and the

newest style

promises you will see promises used in

modern web apis

a great example of this is the fetch

api it is basically the modern

equivalent

of the xml http request you would have

seen if you watched my previous

video let's have a look at it in

code so here we have the fetch api in

action

all i'm doing it is using it in order to

get all the countries from this

rest api right here it is called

rest countries and i use it quite a lot

in these types of

tutorials i can also write it like this

it's the same thing and more widely

adopted so i'm just switching these

out for our functions like

so in this code fetch takes

one parameter which is a url if we look

at this url so i'm just going to take it

and copy it into my browser

it will show you some json which i

prettified using the json

prettifier chrome extension tool so we

can read it a little bit better

this jason is essentially a bunch of

objects that

are countries they have the country

name country flag and a bunch of other

stuff

to our disposal fetching this url will

return a

promise so if i simply comment this all

out and write this

so literally just use the fetch and pass

through the url

and console log out the response you

will see a

promise is returned

the promise is an object representing

the completion or failure of the async

operation

it represents an intermediate state

it is essentially the browser's way of

saying hey

i promise i will get back to you as soon

as possible

so essentially if you ever see this you

know you are dealing with an

async operation this is why we need

other code blocks

chained onto the end of fetch

first we have a then block as you would

probably have noticed by

now it contains a callback function that

will run if the previous operation

is successful it will then receive the

result of the previous operation

in this case we want the responses jason

and once

that is complete we move on to the next

block of code this also actually

contains a callback

function i am getting the return of the

previous successful operation and i'm

assigning it

to the variable countries and console

logging it so we can see it in our

console okay so a lot of callbacks going

on

in there if you watch the previous video

on callbacks this will all be making a

lot more

sense each then block is essentially

returning another

promise so essentially multiple

asynchronous operations are being made

that are being made to run in order one

after

the other so in other words all the

async operations or promises

are being put into an event queue

this event queue will run after the main

thread has finished processing so that

they do not

block the other javascript code from

running and finally we have the catch

block

this block is put at the end and once in

any of the

then blocks fail it works in a similar

way to the synchronous

try catch blocks but that is something

that we will leave for now and learn

about

more of this in the async 08 video

now time for a little pop quiz

what if i display the first flag on the

first country in our browser

so i add this code

i am creating an image and then

appending it

to the body of my document next i'm

gonna just go

into the json let's return and get the

first object and get its

flag and assign this to the image that

we just made

source i'm also gonna add console.log

flag

added so we can see what is going on

under the hood

let's do the same for console.log done

so after

everything has run and up here

console.log let's go

now if i run this code what order would

you expect the console logs to appear in

the console

have a think about it you would see

let's go done flag added

the browser will begin executing the

code sequentially

the first block of code is the

console.log with

let's go so that will be executed

next we will move on to the fetch block

so this one right here this however will

be executed

asynchronously without blocking anything

else

so we carry on we then execute the

done console log as that is next

note how all the other code right

here is chained to the batch

so it's part of the same code block as

the fetch so once the fetch block has

finished running

and delivered the result we will then

see the flag and of course

also console.log flag

so hopefully this will now make sense if

i wanted to actually

get the flag source down here so when we

console log

done and you should hopefully now

understand why if we run this

we would not get the flag source we will

get an error because everything else is

still being run we are still fetching

all that

data if this confuses you let's have a

look at something similar

but smaller so i'm just gonna

get rid of this and

paste so just like we pass

a callback function into fetch we are

passing a

callback function into the add event

listener javascript method

if we run this code the first console

log will get

executed as no one has yet clicked the

button or in other words the ad event

listener has not listened to a click

happening on the element of button

this is blocked from running until that

happens

so it works just like our previous

example except that in the previous case

the console

log is blocked on the promised chain

fetching the url

rather than the click got it

good before we move on to the

next section let's actually recap what

we have learnt by having a look at

promises versus callbacks

promises are kind of similar to

callbacks in that they

are a returned object which you attach

callback

functions rather than having to pass

callbacks into a function

however they have a bunch of extra press

promises are specifically made for

handling async operations

you can also chain multiple async

operations together using the then

operators doing something like this with

callbacks

is much harder and messier promised

callbacks are always

called in the strict order they are

placed in an event

queue error handling is also much better

thanks to the catch block promises

also avoid inversion of control unlike

callbacks which lose full control of how

functions will be executed when passing

a callback to a third-party

library okay great with the promises

covered

i think it's time to move on please feel

free to go over this section again

as promises are known to be confusing

and take a lot of practice to get

used to remember praxis always makes

perfect

and that cannot be more true with this

lesson