00:00 Alright. This is very exciting because promises are used everywhere in JavaScript, and you want to have a really good handle on how these things work. So, let's just talk about things generally here. Synchronous means that things run-in order, one at a time. We're gonna run this log, and then we're gonna run this log, and then this log.

00:20 It's pretty simple, and that's what we've been doing, through all of the workshop series so far. Where things get tricky is sometimes you have to, do something that's gonna take a little while and you you can't just stop the code execution. The code is gonna execute. You don't wanna stop the code execution. You want to, free up what we call the main thread.

00:39 And that is, the the part of the computer that's responsible for running your code and updating the browser and, what the user is saying, handling other requests and stuff like that. So, anytime there's something that needs to take an extended period of time or something, or input output stuff, that we're doing, we're gonna put that off on something else. So, we're gonna make a network request and and that is gonna be handled outside of our program. And then when we get that network request back, then we can continue. And all of this, actually, even beyond that, think about a simple button.

01:15 If you, have a some sort of callback or handler when that button is clicked, you just have some, like, asynchronous thing going on right there. So you add an event handler when that button is clicked, call this function. That is a form of asynchrony as well. So asynchrony is a very core part of JavaScript and, and promises are the primary way mechanism for handling that. Promises and callbacks, are the primary mechanism for that.

01:45 So, we've actually already done some callback stuff in here, and you're actually looking at a callback right now. This is a callback. Set time out is a special function that is provided by JavaScript for scheduling something to happen later. And in fact, in this case, we're scheduling it to happen in exactly zero milliseconds from now. But even zero milliseconds is longer than next line, and so the way that this would output is start, end, end later.

02:13 Typically, you're gonna do like ten milliseconds or a hundred milliseconds or more often you're making a network request and you're not saying, do this later. Now there are a whole bunch of APIs like this for doing asynchronous stuff. And in this exercise, we're mostly gonna be using setTimeout for this. So here's how you create, a promise out of something that is asynchronous. You actually in practice, we don't do new promise a whole lot.

02:39 We do it in some cases, but we don't use new promise a ton. Normally, you're gonna be interacting with APIs that actually return promises that you then attach, these then handlers onto. And that's what we're gonna talk about in this exercise. So, in any case, the syntax for this is simply return, new promise. Here, promise is actually a generic, and so you can specify what this promise is going to eventually resolve to.

03:05 Speaking of resolve, we have this function, right here that you define and that function accepts a resolve function, which is then called whenever your asynchronous thing is done. So in our case, we're waiting a hundred milliseconds and when that's done, then we're going to resolve this promise to, the number 42. And so then outside of this, when we wanna use it, we're gonna say get number and the promise that comes back is, going to we're we're going to queue up another promise. So we're gonna say, when that's done, then I want to, do something with the value that it resolved to. And in our case, we're resolving it to 42.

03:47 And promises can chain on, the themselves as well. So here, we're creating an immediate promise with promise dot resolve. So that makes a promise that's resolved immediately, and that's our object. And then here when we call fetch user, we're gonna take that user, we're gonna take their name, and then when that is done, we're going to, uppercase their name. And when that is done, we're gonna take that uppercase to name and console log.

04:12 So that chaining process, takes the thing that was returned from the last one and gives it to the next one. It's really powerful, super useful, something you should absolutely be playing with and get lots of reps. So I, made an example here of, a promise chaining and and, like, a whole bunch of stuff going on here handling, thrown, errors and stuff like that so you can play around with this. And we're looking at a project called promisies that, helps us to visualize or to see the promise chains. So it's really interesting.

04:46 You should definitely, like throw code in here, move things around, try to figure out how all this stuff goes. You can actually take this then handler and you could put it onto there and see how that changes things. All sorts of stuff. Like, just play around in this thing, a lot and it will even show you where, like, what does that function look like that is represented here? You can step through it and go back, back, back.

05:09 Okay. What how is this happening? And rerun it for me, and go back and forward, and go to the end, go to the beginning. All of that stuff. It's pretty cool.

05:18 So definitely spend some time, going through here. It looks like I just chose a different example with promise dot race. There's promise to all. Here's a broken, here's a basic. So like, play around in here.

05:29 Promises are one of the most complicated things to understand as a beginner, but we use them everywhere. And having a good understanding of how promises work is really valuable. And really, the only way that you can get that is through repetition and just going through it, going through a lot of different examples, moving things around, playing around with it, adding some console logs. In this exercise, I'll show you how to use a debugger as well. So, yeah.

05:53 This one's gonna be a lot of fun. And when you're all done learning about promises, then we're gonna go into async await in the next exercise and things are gonna get, quite a bit easier. But you'll have a much better time using promises if you understand or using async await if you understand promises, which is what powers all of it. So with that, let's jump right into the exercise. We'll see you in the exercise steps.