Working with Promises

[00:00:00]
>> So what I've said to you is that fetch, which again, punny, because we're working with dogs, but fetch goes and fetches a resource or a piece of data from a URL. So let's go to our console, And try to run this line. So the way that I call fetch is I call fetch just like a function, it is just a built in function with params and then the URL that I wanna find.

[00:00:30]
And there's a bunch more options that I could pass in. And if we wanna read all about it, we can read about it on MDN, there's lots more details. But from now, let's just call it with the name of this URL. What the crap is that? [LAUGH] So I called fetch on this URL, and JavaScript gave me back something that's calling a promise, and I sure don't see any hounds.

[00:00:59]
I don't know about y'all but it is not the same as what we wanted here which is afghan, basset, blood, etc. So what is going on and that is the next thing we need to wrap our heads around. Promises, so promises are something that comes into play in JavaScript when we are doing things that take a long time, or looking for things that we are going to need some time to find.

[00:01:31]
And as Issa Rae is hinting at when she says, I promise you can always be in my loop. Promises have to do with that event loop and the asynchronous code that we talk about. Because promises are something that comes into play when we're working with operations that take a long time like fetch, which it might take a long time for me to go talk to the dog API and come back with the data.

[00:01:58]
So it takes a while for fetch and many other things in JavaScript to do what it's trying to do, which is grab the piece of information at this URL. And so what JavaScript does is it kind of writes us an IOU for the actual data, the actual value of the thing that we're looking for, because it doesn't have it yet.

[00:02:21]
So it sort of says, I promise I'm gonna go get you this value but I don't have it yet. So a promise is a construct in JavaScript that lets us represent a value that we don't have yet. And often, this comes up not exclusively, sometimes it comes up to things that happen really quickly.

[00:02:41]
But mostly, it becomes relevant when we're talking about things that it's gonna take a while for us to get the value of. So we talk about having a promise of a value, and promises can be in three possible states. So if you notice when I ran my code before it said promise { <state>: " pending"}.

[00:03:02]
And pending state is when a promise is sort of like still waiting for the value. And so JavaScript is saying essentially via that </state> "pending" like hang tight, I promise I'm gonna get this I'm working on it. Then, there are two other states that we could have a promise in.

[00:03:19]
One is called fulfilled, which you might also hear the word resolved use a lot. There's some differences, but we can think of them as equivalent for now, which basically means success. I finally got the value, and we're all done. And then, there's another state that promises could be in which is called rejected, which is sort of like JavaScript saying, sorry.

[00:03:42]
Something went wrong here, I couldn't get the value, and I washed my hands of this, I'm done. This promise did not succeed, so rejected, we could say. And sometimes, you'll hear the word resolved to mean fulfilled, and sometimes you'll hear the word resolved to mean either fulfilled or rejected, so there's a lot of confusing terminology in here.

[00:04:04]
But suffice it to say that a promise can either be still in the works, pending, or it can be finished. And what we want usually is for the promise to be fulfilled with the value that we want. And since it takes time for promises to resolve we say promises are also asynchronous.

[00:04:20]
Yeah, question.
>> Are promises only use with API call outs or will you see them and other long running processes?
>> Yeah you can see promises in other cases too. Fetch is one example of an operation or a function that returns a promise, there's a lots of others.

[00:04:38]
And in fact, we're gonna see another one that doesn't involve talking to the network or going and getting something, it's all happening locally but it still takes a little time. So we will see another example, but yes no, they do come up in other contexts. Fetch is just I think a great example of something that is gonna take time to get stuff from the network.

[00:05:01]
So what's happening basically is like when we say, hey, JavaScript, I want this hound list. JavaScript, you're saying like, okay, I got you, I'm adding this fetching, I'm gonna go do it, go get you that value. But meanwhile, let me keep trying to run your code. JavaScript is like Joey and friends, he's like, I want to go.

[00:05:21]
JavaScript like I wanna keep going through your code, don't make me stop and wait to get this data before running through the rest of your code. However, unlike with something where we don't wanna freeze the webpage, basically our program here, it can't really do much without the dog data that we need.

[00:05:42]
So sometimes, we do want JavaScript to stop and wait in executing our code. And we wish that we could just tell JavaScript like no, no, no, really wait for me, wait for this value to come back. Wait for that promise to fulfill or to resolve before you go on and try to keep running my code because if you keep trying to run my code without that data, I can't do anything meaningful.

[00:06:08]
So sometimes, we want JavaScript to stop and wait for the promise to resolve, and that is where a friend of the keyword await comes in, which as the spice girls say, says stop right now. Thank you very much, I want you to wait for this asynchronous operation to finish, I want you to wait for in this case, the promise to be fulfilled.