Loading
Current section: 1. Promises 5 exercises
solution

Chaining

Transcript

00:00 Alright. Let's go ahead and implement our fetch user and orders function. So function, yep, fetch user and order. Awesome. And then we can verify our work down here and we can export.

00:11 And, after a second, there we go. We got our user and our orders. Alright. So what did this do? Let's let's review how all of this, works now that we've got it done.

00:20 So we've got fetch user and orders. This is gonna return a promise that has a user object and an orders, array, an array of orders. And I just can't get the AI to do it the way I want it to. There we go. Alright.

00:34 So first, we're going to create a promise. That is the fetch user promise. And then when that is done, we're actually going to attach a dot then onto it. That is gonna give us a new promise. That is the thing that we are returning, is the promise that is resolved when, this callback returns or resolves or returns a value or a promise, and and then we'll just wait till that promise is done.

01:00 So, inside of this, we're gonna use, that user to fetch, that user's orders. So, once we've gotten the user, then we have the user. We're then going to fetch orders with that user ID. When that is done, we're gonna add another then and this is going to have our orders. We can then use, the user and the orders to return that value.

01:25 So it's got this chaining effect and we're kinda looking at this kinda diagonal pyramid looking shape. There's actually another way to write this so I'm glad that the AI did it this way. Another way that we could do this is, we can actually have this return fetch orders. Oh, hold on a second. Let me see, if so here actually, this would be really good for, for you to see too.

01:51 So if I add a dot then here, the question is, what is the value of, this right here, of this then? So here, let's save that. It's not gonna work. Yeah. It even blows up.

02:05 We we can probably see yeah. Right there. We've got that error right there. So, we've got our user. We say dot then user fetch orders.

02:13 We're gonna return the fetch orders and in fact, we could make this a single line thing. And then this is gonna return the order, not the user. And so when we get to our then right here, we get our orders but we don't have the user. It's just, the user is nowhere. And so for that reason, the AI said, hey, we're gonna stick, a then handler within here so we still have user within the context of our callback function.

02:38 So we're fetching those orders. We get the orders, we return the user with the orders and, that kind of bubbles up to the promise that was returned from here and then that bubbles up to the promise that was returned from here. And that is then what we get inside of our usage here. So we get that object in our then handler right here and then we get our console log for those two. This is something that is definitely complicated, so I recommend that you, jump into here.

03:08 You add some console logs in places, potentially even add a debugger. So when you add a debugger like this, you're gonna open up the, developer tools, go to sources, and hit refresh on this page and it will stop in this debugger right here. And you can, play around with this step over here and then we can step in and now we're inside of here. We could step in again. We end up in this time out and now we kinda lose it because we're waiting for the asynchronous stuff and then we jump back in here and we got resolve.

03:41 If we dive into that, we can't dive into resolve. But now we're inside of, of here. We can follow through on this, follow through that, wait for the second, resolve, and then we come into here and now we've got both the orders and the users. And that you can just step through just like that and here we are. Don't worry about that part.

04:03 Okay. Hopefully, that is helpful, and interesting and, just spend a lot of time with this. And we've got actually some more to talk about with chaining and what happens about errors too. So let's look at that next.