promises this video is part of a series
where we learn functional programming
with JavaScript in this video I will be
making a lot of references to previous
episodes so you’ll get a lot more out of
this video if you have watched the
previous episodes by clicking there
especially the first episode I’ve
repeated a lot that one of the big
things about functional programming is
to make your code more composable in
this series you’ve also seen a lot of
cold max callbacks it’s a way of telling
your code that when this thing is done
executes this piece of code promises
serve that same purpose as callbacks do
but promises are a bit more powerful
because they are unlike callbacks
composable we are going to get into the
why and how and all kinds of fancy stuff
about promises but first I’m going to
show you just a very basic promise so we
have a function that we are importing ah
it’s called load image promised I will
be going into how to implement that
function but for now we are just calling
it load image promise is being called
with the path to a cat this function
call will return a promise promise has a
method called them and we are calling
then here and we are passing it this
callback function when the image has
finished loading this callback will be
called with the loaded image the
callback function itself is very simple
it creates an image element and it
assigns the SRC probably from the loaded
image to the image elements and appends
it to the body let me break the promise
out into a variable yes to further
illustrate that it is an object being
returned so all we can return
regularity – when cats loaded Oh like
that and then we call then which will
give us the same result
oh this should be nice you should always
use left in Atmos crib six so when cat
loaded is a promise and that is just
what it sounds like it’s not the value
itself it’s the promise of the value in
real life promises are useful because a
person can say for instance a back and
tell you that yeah we promise to lend
you our this much money and then you can
go to people selling houses and say that
yeah the bank has promised me to lend me
this much money and you can actually
make a contract based on that even
though the the you don’t actually have
the money yes I promise is something
that you can pass around and you can
write code around it even though you
don’t have the value just yet boom here
is the same thing but implemented with
the coal-black pattern instead of
promises just like the other function
that we saw this function takes a path
to an image as its first argument
however as the second argument
it takes a callback the first argument
to the callback function will be an
error if there was one if there wasn’t
one
the second argument to the callback
function will be the success object in
this case the image and the function
body itself is exactly the same as the
other four missed function and this is a
fine pattern it’s actually even a bit
shorter than the de promise pattern so
one might wonder why why use promises at
all actually as many things in life when
you start adding more cats things become
complex do cats cats cats we are loading
three cats I broke the code that adds
the image element to the Dom out into
its own separate function called add
image the add image function is used
here here
and here so here we are calling load
image callback with first cap that cap
is going to be passed to the outer
callback and that is then going to be
passed into a add image here when that
is done we’re going to call load image
callback with a second cap that is going
to be passed here into the next
outermost callback which then goes into
add image here uh yeah and then we’re
done we’ve got a cool load image cold
back here with the path and then that
goes into the inner call back and that
is going to be passed to add image what
we see here is what is often referred to
as the nodejs
callback Christmas tree of doom this is
extremely convoluted code I even had to
reduce the font size to get this to fit
sorry about that mobile viewers and this
is just three levels deep imagine if you
had six or ten or something like that it
would be zonkers apart from this being
incredibly ugly this code is actually
not executing in parallel because the
second callback is not going to be cold
until the first one has finished and so
on this is also dreadful from an error
handling standpoint we’re not doing an
error handling here but if we did we
would have to do something like this for
every single callback
coordinating stuff like this with just
Kovacs is messy alright so we are now
looking inside the load image pull back
as expected it takes an arrow takes a
huh it will wait for the image to load
and when it does it will call the
callback using this tandem no pattern of
now because we don’t have an error and
then the success object the image if
there’s an error it does the equivalent
thing ah with the a message could not
load image at right quits a new error
with that message and passes it as the
first argument to the callback ei here
when we call no it’s a letter and here
first argument is the error and once it
had set up those two listeners it will
assign the SRC property of the image
with a URL and this will trigger the
image loading and now I would rewrite
this to return a promise
instead of using coal mines it will
actually essentially become the function
that I showed you in the beginning of
this episode
Eckman script 6 includes promises
natively however unless you’re watching
this from the future not all browsers
have implemented X script 6 fully yet
luckily enough bubble provides a
polyfill for the promises to use that I
will go bubble if I only fill depending
on how you get bubble into your project
this line is going to be a bit different
I use bubble fi which is a browser if I
plug in and I will put a link to the
full project that you’re seeing here in
the show notes
but I won’t go into specifics because
these things change around a lot and I
don’t want this video to go out of date
so su try to instead focus on the parts
about the promises because those will
stay true for years we are going to
the promise constructor takes a single
function as its argument this function
this this callback will in turn be
called with two arguments resolve and
reject both of these are also functions
and JavaScript wants you to call these
functions with the values when you have
them or the error if you get one so
let’s just start moving things into a
promise that’s fine
moving this in and instead of calling
the the Coburg here with the valid value
we will call result and we will only
call it with the success value it
oh my keyboard is being an ass for work
alright huh image on error you stand up
calling the callback we will now call
reject with the error ah
and we will also move this image this
time see in here am remove some lines
and now this is no longer reference this
callback so we can just remove it so we
are now returning new promised you the
promise we’ll get this callback which in
turn will be called with these resolve
and reject functions which in turn we
are expected to call with the either the
success value or the failure value so
here unload when we reload it week old
we solve with the success image or if we
get a failure
we will call reject with this very let’s
go back to active Jas ok this is a bit
badly named now let’s uh let’s rename it
into just load image and now this won’t
do anything anymore because ah the
syntax will now be that this returns an
object which we are supposed to call
then on and it won’t be an error it just
will just be the success value so it
just did
is remove those see a compilation error oh it’s because we don’t start these we
oh it’s because we don’t start these we have another compilation error oh yeah
have another compilation error oh yeah it’s because I’m missing this still
it’s because I’m missing this still nothing happens
nothing happens ah let’s check out the console ok error
ah let’s check out the console ok error is not defined yeah because we have now
is not defined yeah because we have now removed the errors from the callbacks so
removed the errors from the callbacks so let’s get rid of those for the moment I
let’s get rid of those for the moment I will show you how to do error handling
will show you how to do error handling in it of course this still looks
in it of course this still looks horrible remember how I told you that
horrible remember how I told you that promises help us out
promises help us out better than callbacks because they
better than callbacks because they compose let me show you what that means
compose let me show you what that means let me break each of the load image
let me break each of the load image calls out so I can do that I’ll move
calls out so I can do that I’ll move this here and I’ll move this here ah and
this here and I’ll move this here ah and what I’m going to do now is promise dot
what I’m going to do now is promise dot all I’m going to pass indeed these in as
all I’m going to pass indeed these in as an array so this is now an array of
an array so this is now an array of promises being passed into promise all
promises being passed into promise all I’m going to delete this and go again
I’m going to delete this and go again this is now getting a function
all back which in turn is going to gaps all the images
all the images let me console.log that out to see that
let me console.log that out to see that we’re getting three images here ah they
we’re getting three images here ah they will have 11s to see there see this are
will have 11s to see there see this are the cat images let’s do image dot for
the cat images let’s do image dot for each IMG and call add image with image
each IMG and call add image with image dot SRC ha
dot SRC ha Oh image s what how awesome is that how
Oh image s what how awesome is that how awesome is that
awesome is that look at how awesome it is let me clean
look at how awesome it is let me clean this up a bit for you that oh there’s a
this up a bit for you that oh there’s a space there we can’t have that oh this
space there we can’t have that oh this hurts me just let me rename this just
hurts me just let me rename this just rename low image it we can do that in
rename low image it we can do that in one line crease it on size again right
one line crease it on size again right look how big we can make it now that we
look how big we can make it now that we have so short an elegant code so now
have so short an elegant code so now this load image function that we
this load image function that we imported importing here is the one that
imported importing here is the one that returns a promise so when we are calling
returns a promise so when we are calling these load images here we are actually
these load images here we are actually creating an array of promises here and
creating an array of promises here and we are passing that into the old method
we are passing that into the old method on the promise object and this is native
on the promise object and this is native to ACMA script six promise not all will
to ACMA script six promise not all will in turn return a new promise which we
in turn return a new promise which we are calling then and we are passing in a
are calling then and we are passing in a callback to them and that callback will
callback to them and that callback will be called with an array of the actual
be called with an array of the actual values that these promises return and
values that these promises return and for each image we are adding that image
for each image we are adding that image to the dome
to the dome but what about the errors we remove the
but what about the errors we remove the error handling before how do we handle
error handling before how do we handle errors when it comes to promises well
errors when it comes to promises well you your scope catch and catch once
you your scope catch and catch once another callback which should handle
another callback which should handle there and we’ll do some error hunting
there and we’ll do some error hunting here a little later if an error occurs
here a little later if an error occurs in any of these it will follow up to
in any of these it will follow up to this error handler which is so much
this error handler which is so much nicer than having to handle the error in
nicer than having to handle the error in multiple places in summary promises are
multiple places in summary promises are just like pull backs a way of dealing
just like pull backs a way of dealing with a synchronous code when we don’t
with a synchronous code when we don’t know when things are gonna happen or in
know when things are gonna happen or in what order but promises are more
what order but promises are more powerful and callbacks because they
powerful and callbacks because they compose I showed you one example of that
compose I showed you one example of that today using promise oh but there are way
today using promise oh but there are way more where that came from once you get
more where that came from once you get comfortable with promises in this show I
comfortable with promises in this show I am doing the talking but you are the
am doing the talking but you are the audience and without you it would just
audience and without you it would just be neat screaming into the void so I
be neat screaming into the void so I need to hear from you I need to
need to hear from you I need to understand who you are because of creepy
understand who you are because of creepy YouTube analytics I know where you’re
YouTube analytics I know where you’re located how old you are and what gender
located how old you are and what gender you are but apart from that I am flying
you are but apart from that I am flying blind
blind so please comment down below and tell me
so please comment down below and tell me give me an idea of what kind of
give me an idea of what kind of programmer you are do you work as a
programmer you are do you work as a programmer are you studying is Yahveh
programmer are you studying is Yahveh script your first language what was the
script your first language what was the last thing you learned and we’re not
last thing you learned and we’re not counting these videos stuff like that oh
counting these videos stuff like that oh and the next episode is gonna be a good
and the next episode is gonna be a good one I won’t tell you what
one I won’t tell you what yep oh but you don’t wanna miss it make
yep oh but you don’t wanna miss it make sure that you subscribe and also blue if
sure that you subscribe and also blue if you already have turn on notifications
you already have turn on notifications for my channel on your phone I always
for my channel on your phone I always post on Monday mornings but it’s so good
post on Monday mornings but it’s so good with the reminder right
with the reminder right ah till next Monday stay curious