‫So you already learned
‫how to use a Async/Await
‫but there's actually a bit more to learn
‫about how Async functions actually work.
‫So let's do that now.
‫In order to understand a bit better what happens here,
‫let's just try to add some console.logs
‫after and before calling Async functions here.
‫Okay, so console.log
‫So step one
‫will get dog pics,
‫okay.
‫And then number two.
‫Here let's just say,
‫done getting dog pics.
‫Okay. So let's give it a save.
‫And whoa, what happened here.
‫We have these two console.logs
‫before all the logs coming from the Async function.
‫So we have the one, two
‫for this one and this one
‫and only after that we have the logs coming
‫from the get dog pic.
‫Is that what you were expecting?
‫So if not, let's analyze what happened here.
‫Well, as I told you before, this Async function
‫actually runs in the background.
‫Because well that's how Async functions
‫are simply supposed to behave.
‫Right, that makes total sense?
‫So we cannot just stop the code here.
‫So as soon as we hit this function
‫we cannot simply stop execution of our main thread here.
‫Right?
‫And that's the whole philosophy of don't block
‫the event log.
‫So we need to get some dog pictures from the API,
‫but that's not an excuse to stop execution over code.
‫So to block the event log.
‫So as a result when the java script engine ceased,
‫this line of code here, it will just offload
‫the get dog pic function to the background
‫and go straight to the next line.
‫So this second console.log here.
‫So it makes sense that first this string here gets logged,
‫then it will start running this function,
‫then right away it will log this line of code
‫and in the mean time, we read this file in the background,
‫and as soon as that is ready,
‫it will start printing this log, this log,
‫and also this log.
‫So that's exactly what's happening here.
‫One two, and then then remaining three ones.
‫Make sense? Okay.
‫Then let's take it a step further, and actually
‫return something from our Async function.
‫So I'm changing this here to three, so that from
‫this function, we can return a string
‫which says two, well let's say ready
‫and then let's add here again an emoji here
‫to make it pop a little bit more in our console.
‫So ready here.
‫And then let's save that.
‫Simply some variable, doesn't matter what it is.
‫And then log x to the console.
‫So let's see what happens.
‫And then now here we get this weird promise pending
‫instead of the string here that we were maybe expecting.
‫So why is x here and not this string,
‫but this promise here?
‫Well, remember how I said in the beginning
‫of the last video that an Async function
‫actually returns a promise automatically?
‫Well, so this here is the proof for that.
‫So instead of logging ready to the console at this point,
‫it just tells us that x is a promise
‫which at this point is still running,
‫and so it's still pending.
‫So that's why it says pending here.
‫So java script can of course not know that x
‫will be this ready string here at some point.
‫And so it simply moves on to the next console.log
‫just as we had discussed before.
‫And at the time that JavaScript actually knows
‫that this x here should be the strain that we returned
‫well at that point, this code here has
‫long finished executing.
‫But what should we do if we actually wanted
‫to get that return value here?
‫So what if we really wanted to return this string
‫and log it through the console?
‫Well, we would have to treat this Async function
‫as a promise.
‫And so we would use the DEN method on it
‫or again, use Async/Await.
‫Let me show you how to do that.
‫So instead of trying to save the returned value
‫to a variable, we can use the DEN method on it.
‫And so here is where we can then call it x.
‫So console.log x so just like what we had here
‫and then we would also do this one inside
‫of the DEN handle, okay?
‫So let's review what we did here.
‫So get dog pic returns a promise, remember that?
‫And so each that we have a promise, we use the DEN method
‫in order to get access to its future value.
‫So the value that will eventually return.
‫In that case, this will be the two ready string.
‫Okay?
‫And so if you want to get x to that,
‫we need to use the DEN method like we just did here.
‫And only after that we then can log the third
‫string right here.
‫So if we give it a save now like this
‫it should then work as expected.
‫And yeah it does.
‫So we have our first log, then all the logs coming
‫from our Async function, then the ready
‫coming from line 42 here.
‫And finally, the number 3. Perfect.
‫And I hope it makes complete sense to you.
‫Now what happens if there actually was an error?
‫Well that's a bit more difficult to handle.
‫So let's again, cause an error like we did before.
‫But you see that actually we still enter
‫the DEN method here.
‫So this block here, okay.
‫So even if there was an error here in this promise
‫it basically still resolves as a successful promise.
‫So it still returns this value here.
‫And even if we add our catch handler down here
‫that will not change that fact.
‫Okay, so let's use catch here
‫and then use console.log and log the error here
‫so you can see that it still didn't log any error.
‫And that's again because this promise here
‫coming from this Async function will still be
‫marked as successful.
‫But if you really wanted to mark it as rejected
‫we will have to do something called throwing an error.
‫So let's do that here in this catch block.
‫So if there was an error, we not only want to log it
‫to the console, we also want to throw it.
‫So we use a built in JavaScript function called throw.
‫And with that we can throw an error.
‫So this will now mark this entire function of this promise
‫as rejected.
‫Okay.
‫Actually let's not just log this error,
‫let's simply do error to make it a bit more visible,
‫and something like an explosion maybe.
‫Yeah, something like this.
‫Okay, and so let's give it a save an see what happens.
‫And bam, so now we have our error here actually.
‫So it says I could not find that file,
‫so this log is coming from this catch log here
‫but then also at the same time it will throw an error.
‫And if it throws an error, that will then mark
‫this entire promise as rejected.
‫And so that's why we then enter the catch log down here.
‫Which will then, of course in turn
‫trigger this console.log of this error.
‫Okay?
‫And this of course is a whole new layer of complexity.
‫Okay.
‫But it's still very important to understand how this works
‫because it happens in real life all the time.
‫So we need to return values from Async functions
‫all the time and so it's important how you know
‫how to actually handle these returned values.
‫In this case, using DEN and catch.
‫Now, the problem with this is that it mixes
‫promises with Async/Await.
‫So we have Async/Await up here,
‫then all of a sudden we're being back to using
‫DEN and catch down here.
‫So let me actually show you another pattern of doing it.
‫Okay, so let's come in our this part here
‫not this way around, more like this.
‫And so let's use Async/Await for implementing this logic.
‫Now we don't want to create a whole new name function
‫for this, and so we're going to use a well known pattern
‫which I hope you know, which is an IIFE,
‫so an immediately invoked function expression.
‫Okay, so in parentheses, we define our function.
‫Like this, and then we call it right away.
‫Remember that?
‫Then, in this case, since we want to use Async/Await,
‫we also say that it's an Async function.
‫Okay, and so this looks a bit weird here,
‫but if you took for example my JavaScript course
‫this will look familiar to you actually.
‫Okay, so again, you declare a function
‫inside of parentheses and then call it function right away.
‫And so this way, you don't have to declare a
‫whole name function again that you will to then call
‫at some point later.
‫Okay.
‫Now since we're using Async/Await, we're using the
‫try it catch pattern again, like before.
‫So catch, have access to the error here,
‫and we actually cannot omit this here.
‫So even if we don't want to use this error,
‫we still have to write it out here.
‫Okay.
‫In future versions of JavaScript this will be gone,
‫but for now we need to do it like this.
‫So this is where this error will be.
‫And up here, we will have all these console.logs.
‫This one,
‫and this one.
‫And now I hope you know how to actually get
‫the value from the Async function.
‫So you know how to do that.
‫Actually I will pause the video and allow you to
‫figure out how to do it on your own, okay?
‫So take that small challenge and I'll be back
‫in a second.
‫So did you manage to get this string here,
‫so this two ready into the x variable
‫just like we had before?
‫So just like this here?
‫So it's just like we did before.
‫You declare a variable and then you await the promise.
‫And the promise, in this case, is get dog pic.
‫Okay?
‫So this function here is an Async function
‫and so it returns a promise.
‫And the result value of that promise
‫is this value here, which is returned,
‫and so by waiting for that value,
‫the result will be this string.
‫So we store that into x and then we can of course
‫log it to console.
‫So console.log x.
‫Then in case there's an error, it will catch it
‫and log it to the console here as well.
‫If we give it a save now,
‫then bam we get the error still because
‫we had it here, so that part still works.
‫Fixing it, saving it, and here we go.
‫So it's working now as intended.
‫But, again, with Async/Await it's a lot cleaner,
‫looks a lot better and it's also easier to understand.
‫And so we're not mixing Async/Await in one place here
‫and then using DEN and catch down here
‫like we had before with this piece of code.
‫Okay?
‫So in real life, this sort of stuff happens all the time.
‫So we have an Async function and we called it
‫from another Async function, and maybe we even
‫called another Async function from that first
‫Async function, and so we have a bunch of these
‫Async functions interacting with each other.
‫And so it's very important that you know
‫how all of this works.
‫And again to recap, the most important thing
‫to remember is that an Async function automatically
‫returns a promise, and that the value that we return
‫from an Async function will be the result value
‫of that promise.
‫And so from there, we can simply handle it as yet
‫another promise.
‫And that's exactly what we did here by awaiting
‫that first promise that we created.
‫Okay?
‫So please try to wrap your head around this
‫and make sure that you really understand it.
‫Because throughout the rest of the course I'm going
‫to assume that you know how to work with this stuff.
‫And that is exactly why I created this section,
‫to kind of get it out of the way before we really start
‫to work with no JS and express, and all this good stuff.
‫Okay?
‫So we're almost done with this section,
‫there's just one small thing that I want to show you
‫in the next video.