← back to home

JavaScript Promises In 10 Minutes

Web Dev Simplified

youtube· 11:30standard

1.What is a JavaScript Promise?

0:00 / 0:51

This chapter introduces the fundamental concept of a JavaScript Promise, comparing it to a real-life promise. It explains that a promise can either be resolved (completed successfully) or rejected (failed).

  • Promise
  • Resolve
  • Reject
Transcript (328 segments)
0:00hello everybody kyle here from webdev
0:02simplified in today's video we're going
0:04to be talking about promises in
0:05javascript which look incredibly
0:07difficult but are much more simple than
0:09they actually appeared so let's get
0:10started now
0:14to get started let's talk about the idea
0:17of a promise before we get into the
0:18actual syntax of it a promise in
0:21JavaScript is just like a promise in
0:22real life what you do is you commit to
0:24something by saying I promise to do
0:26something for example I promise to make
0:28the best video on promise as I can and
0:30then that promise either has two results
0:32either that promise has completed it is
0:35resolved or that promise is failed and
0:38it is rejected so if I give you the best
0:40video ever on promises then I would
0:42resolve my promise to do so but if I
0:45failed to give you the best video ever
0:46on promises then that would be rejected
0:48because I was not able to complete that
0:50promise and I've rejected it so now
0:52let's look at the actual syntax of
0:53creating a promise we just create a
0:55variable here we'll call it P and we're
0:57going to set it to a new promise and
0:59this promise object is going to take one
1:02parameter which is a function which gets
1:04passed to variables of resolve and
1:06reject so we have a resolve parameter
1:09our reject parameter and then we need to
1:12actually create the definition of that
1:13function inside and if you're confused
1:15by this arrow syntax here just check out
1:18my video where I cover the arrow syntax
1:20for functions because it's extremely
1:21straightforward and much easier to write
1:23functions in this manner so after you're
1:25done checking that out now inside of
1:27this promise section we need to find
1:29what the actual promise is so in my
1:31example the code inside of here would be
1:33me giving you the best video ever on
1:35promises so we're just going to put some
1:38simple code in here we're gonna create a
1:39variable a we're just going to set it to
1:411 plus 1 so that way this is what the
1:43promise does and if this failed we would
1:46reject it so we would say if a is equal
1:50to 2 we would resolve it but if it is
1:53not so what say it's not equal to 2 we
1:56would reject so in the reject we can
1:58pass anything that we want back into
2:00this reject we're just gonna pass the
2:02message that said failed and then in our
2:04resolve this again we can pass it
2:07absolutely anything we want but we'll
2:08just pass it a message that says success
2:11so as you know this code is always going
2:14to be successful because 1 plus 1 is
2:15always equal to 2 so it's going to
2:17recall this is resolved method that gets
2:19passed in but if we change this to be 1
2:22plus 2 we would get this reject method
2:24because it doesn't equal two anymore and
2:26we would
2:27be calling the reject method so now
2:29let's look at how we actually interact
2:30with promises so if we go down here we
2:33can just say that P since it's our
2:35promise then all we have to do is say
2:37dot then anything inside of a dot then
2:40is going to run for resolve because I
2:43say I'm going to give you the best video
2:45ever on promises then you are going to
2:48do something else after I'm done with
2:49that
2:50so in here this is then then all it does
2:53is take a method in our case it's going
2:56to just have a single parameter since
2:58we're passing a single parameter to
2:59result and that's just going to be our
3:01message and then we just wanted to find
3:04what we do with that function so we can
3:06just say console dot log this is in the
3:10Senate is in the then and then we can
3:13just pass it the message so we can
3:15actually see what that is saying but to
3:18be able to catch an error we need to use
3:19the dot catch version of this so we just
3:22say dot catch and this will catch any
3:24errors which are our reject States and
3:26just like our then we're just passing in
3:28a single parameter of a message and we
3:33can just do something very similar we do
3:35console dot log this is in catch the
3:42catch and we can just print out that
3:46message and there we go
3:47this is exactly how you use promises
3:49they're very similar to callbacks which
3:51we're going to look at in a little bit
3:52but a little bit cleaner way of doing
3:54callbacks and as you can see then is
3:57going to be called when our promise
3:58resolves successfully and catch is going
4:01to be called if I promise is rejected or
4:03fails so now let's actually run this and
4:06see how it looks so I hope we say that
4:09you'll see that we got this is in then
4:11and it is the success because my plus
4:14one is equal to two and if we change
4:16this to be not true and we save it again
4:18you'll see that this is in the catch and
4:19it has failed so as you can see when we
4:22called this we create a promise here we
4:25tell it what we want to do when it
4:26succeeds we tell it what we want to do
4:27when it fails and then in our code we
4:29say do this when it succeeds and do this
4:32when it fails promises are really great
4:34when you need to do something that's
4:35going to take a long time in the
4:37background such as downloading an image
4:39from a different server
4:40and you just want to do something after
4:42it's complete instead of making
4:43everything else wait for it and then
4:45also you can catch it to see if it's
4:46failed so that way you can maybe retry
4:48it or give the user an error message if
4:50it did fail so now let's look at an
4:52example of how we can take something
4:54that uses callbacks which is what
4:55promises are meant to replace and
4:57actually replace it you with promises
4:59and it's a lot easier than it sounds I
5:01have open a very simple callback
5:03function which takes two callbacks one
5:06for the success and one for an error and
5:08all it does is check two variables to
5:11see if either of them are true if they
5:12are it'll throw an error and if they're
5:14neither of these variables are true
5:16it'll call the success callback saying
5:18that everything went well so this won't
5:20watch tutorial callback function all we
5:22do is we call it and we give it our two
5:24callbacks our first callback is going to
5:26be first successes and our second
5:28callback is going to be for an error so
5:30if we save this and run it as you can
5:32see both our variables are false and we
5:34get success thumbs up and subscribe but
5:36if we change one of these variables are
5:38true let's say the user left while
5:39watching the tutorial and now I'm going
5:41to say user left with a frowny face or
5:44if we change that back to false and we
5:47change this one saying that the user is
5:49now watching cat memes to true it'll say
5:51that the user is watching a cat meme and
5:52that cats are better than me so now
5:54let's implement this using promises
5:56instead of callbacks because this is
5:58what promises were really meant to solve
6:00so all we need to do is we could just
6:02copy this entire function here we'll
6:05just paste it down here a little ways so
6:06we can have it to work with and we'll
6:08just change it to be promise
6:10instead of being callback for the naming
6:13and we can completely remove both of
6:15these callback functions for parameters
6:17because that's the whole point of using
6:18promises is that we no longer have these
6:20callbacks and all we need to do inside
6:23of here is return a promise so we can
6:26say return new promise and as we know
6:28that promise takes two parameters the
6:30result and reject and inside of that
6:33function we just want to define all of
6:35our code that was calling these
6:37callbacks
6:38so resolve is going to be our successful
6:41callback so we can just replace
6:42everywhere we have callback with resolve
6:45and reject is going to be that error
6:47callback so we'll just replace all of
6:49those and there we go we've completely
6:52overhauled this function to use
6:54instead of callbacks and as you can see
6:56the code itself is almost exactly the
6:58same all we did is change a few variable
7:01names and now we're returning a new
7:02promise instead of calling the callbacks
7:05so now let's look at how we can actually
7:06use this function so let's copy what we
7:09have up here so that we can see how we
7:11need to change this watch tutorial call
7:13back into watch tutorial promise so the
7:17first thing that we know is that this is
7:18a function that takes no parameters so
7:20we need to call this function and then
7:22do something afterwards since it returns
7:24a promise so we say dot then and then
7:27like we know is going to be our success
7:29callback so we can make it our very
7:30first method here which is this so as
7:34soon as that function is done we just
7:35need to end that and now we can do our
7:37dot catch so we add dot keshan here to
7:40catch all of our errors and there we go
7:42we've completely transformed that
7:44callback to be using promises now and as
7:47you see again our code is almost exactly
7:49the same so now if I comment out all
7:52this callback related stuff and if we
7:55rerun it you'll see that we get the
7:56exact same output for no matter what set
7:59of variables we have but still we change
8:00it all the false you see we get success
8:02change this one to true and again you'll
8:06see user left and this is using promises
8:08now instead of using callbacks and as
8:10you can see the code is a lot cleaner to
8:12write than with using callbacks because
8:14as you start nesting callbacks you
8:16started to get in a huge world of
8:17trouble where your code just keeps
8:19getting indented to indented even
8:20further below the promises instead of
8:22nesting callbacks all you do is just add
8:25another then so it would look just like
8:27this you would have then and then
8:29instead of having a callback inside of a
8:31callback inside of a callback which is
8:33what's known as callback hell and it's
8:34absolutely terrible promises are great
8:37and they completely solve that problem
8:38for us now that we have an understanding
8:40of how promises work let's take a look
8:42at some of the things that we can do
8:43with promises I've changed my code a
8:45little bit here so that now we just have
8:47three simple promises being created and
8:50they're super simple all they do is
8:51always resolve they never reject and
8:53they just send a single message when
8:55they resolve and each one of these is
8:56about recording a new video for my
8:58channel so let's say we want to do
9:00something after every recorded all three
9:02of these videos and we want to record
9:04run all these in parallel at the same
9:06time so we don't have to worry about
9:08waiting for one before we start the next
9:09we can use what's called promised at all
9:12so we just say promised at all and
9:14inside of here we send it in an array of
9:16all the different promises that we want
9:18to run so in our case we want to record
9:20video one we want to record video two
9:23and we want to record video three as
9:26well and promise doll is going to run
9:29every single one of these promises and
9:30as soon as it's done it is then going to
9:33call the dot Ben and dot catch methods
9:35depending on if they resolved or fail so
9:38in our case all of these are going to
9:40resolve so we'll use a dot ven and this
9:43dot Ben is going to send an array of all
9:45of the successful messages so it's going
9:47to send us an array with all of these
9:49different resolved parameters so we're
9:51going to have a messages in here and
9:53this messages is just going to be an
9:54array that we're just going to print to
9:56the screen so we'll print messages and
9:58if we say that you'll see that we got
10:00video one recorded video two recorded
10:02and video three recorded in this array
10:04here which is exactly perfect that means
10:06all of our promises ran and they all
10:08returned and as soon as they were all
10:10done it called this dot ven method and
10:12you can't really see that with this
10:14example but these are all running at the
10:17exact same time so for this one for
10:18example took a long time and actually
10:20needed to call the database for example
10:22and get some results back it'll run at
10:24the same time as these other two so if
10:26these other two are way too quick they
10:28won't have to wait for this first one to
10:30finish and now let's say that we want to
10:32just do something as soon as one of my
10:34videos is done being completed we can
10:36use promised app race instead of
10:39promised at all and promise dot race is
10:41just like promised at all except for
10:43it'll return as soon as the first one is
10:45completed instead of waiting for
10:46everything to complete and because of
10:49that it will only return a single
10:51message in the dot then as opposed to
10:53all of the messages so now if we run
10:56promised race you'll notice we're only
10:58going to get one return value which is
10:59video one recorded and that's as if he
11:02expected video one was the first time to
11:04record and that's just because these are
11:05so simple it's always going to run them
11:07in the same order and that's all there
11:09is to creating promises in JavaScript
11:11they're extremely straightforward once
11:13you understand the concepts of resolve
11:15versus reject and very similar to
11:17callbacks which you probably already
11:18know from using JavaScript before so if
11:21you enjoyed this video please make sure
11:22to subscribe to my channel for more
11:23videos like this and check out my other
11:25es6 javascript related videos over here
11:28thank you guys very much for watching
11:30and have a nice day