Jonas: Welcome back to the last lecture of the section.
And so in this one, we're gonna apply
everything that we learned
in the last few videos to Coding Challenge #3.
And this coding challenge basically has two part.
So in the first part, I want you to write
an async function called loadNPause,
which will basically recreate Coding Challenge #2,
but this time using async/await.
And so of course, that is only about the part
where we actually consume the promise.
Then you can compare the two versions that you have
and think about the big differences
and also see which one you like more.
Now in order to do this,
don't forget to set your network tab to Fast 3G.
Alright?
So that's part number one,
basically converting what we did before,
but then comes part number two,
which is again a more difficult one.
And actually in this one, you will do something
that we didn't do before,
but I'm sure that with the instructions here,
you can make it.
So, what I want you to do
is to create an async function loadAll,
and this one receives an array of image path,
and so that's this one.
So it's an array which contains the path
of all three images in the image folder, okay?
So you receive debt array in the function
and then I want you to use the map method
to loop over the array in order to load all the images
that are here in this array with the createImage function.
So this one here where we promise a fight, loading an image.
Okay?
Of course the map method will then result in a new array
and you should call this one images like this.
Now keep in mind that createImage here
will return a promise.
And so the callback function of the map method
needs to be special.
So you need to consume the promise
that comes from createImage
and so therefore, as I said
the callback function in the map method
should be a special type of function.
So I'm not spoiling which function it is,
but hopefully you can guess what I'm talking about.
Alright?
But anyway, next I want you to check out
this images array in the console
and is it what you expected?
So again, here I want you to think
about the results that you get.
So these images array,
and think if you expected it to be like this,
and also if it makes sense,
okay?
And what I just said will make sense once you get there.
Then in the next step, you should use
a promise combinator function
to actually get the images from the array.
So this is a very important hint right there.
Then finally, you should also add the parallel class
to all the images.
And so once again, you should probably loop over the images
and then to each of them add to this class.
So again, this part two here
actually contains some new parts
that you will have to figure out on your own
and experiment a little bit with that.
But at this point of the course,
so already pretty deep into it,
it's probably a good idea that you start experimenting
with some stuff on your own.
And so that's why I created this challenge like this.
So good luck with this take all the time that you need
and then I see you back here.
Welcome back here to my solution now.
So as you see, I already have all the code here
from Challenge #2
and so what we're going to change now is
basically this part here.
So we will recreate this big then chain
using now async/await.
So the function is called loadNPause,
and it is an async function which doesn't have any arguments
or missing to function keywords.
So it doesn't have any arguments
and so as always,
we need to wrap everything into a try block
and in here here, the error.
And actually right now it is already allowed
to use catch without the error.
So that's new in JavaScript previously that wasn't allowed,
but just to make it consistent, I always used to error here,
even if I then don't need it.
But here let's just log it to the console as always.
Alright.
So here is the first promise.
So this one...
So let's put that here
and since we're using async/await,
I will now await that promise
and store the results into image.
So that's basically the variable that we have here
as the barometer in the then method.
And so that's the same name that makes sense here.
So image,
and let's use one here because we're gonna have multiple
or actually that's not even necessary
because this time we won't need the currentImg variable,
okay?
But more about that once we reach that point.
So again, the image is of course, the result of this
successful promise.
Alright?
And so with that, we already translated this year.
Now what we is to simply log this to the console.
And so here we have Load image 1 already.
Then next up we have this wait.
And so here we can just await for wait 2.
And just like before,
since the weight promise does not have any resolved value,
we actually don't need to save anything to any variable.
So here we basically just pass
the execution for two seconds,
and then what we want to do is this,
but not exactly this,
because now instead of current image,
we can use simply image.
And that's because now we are
still here in the same function
or actually in the same block
and so in the same scope
while here we defined the image in one function,
and then we set the style in another function.
And so then we needed to use this global variable.
So like this, it is a lot better of course.
And so now we just need to do the same for image two.
So, again we don't need the external variable.
We can now simply reassign image.
So image 2, then image 2 loaded,
and the rest works simply exactly the same.
Here let's just change to error
and with that, we should already be good to go.
So loadNPause,
and here let me comment this out
so that the same logic doesn't happen twice.
And so this is already part one.
Let's set on network here to Slow,
or actually Fast 3G,
And let's actually inspect the images arriving here.
So I think that this now part here is really helpful.
So seeing everything arrive,
it's just a bit difficult.
But anyway, let's just try it.
And so here you see the image loading.
And so then here was the waiting time of two seconds
and then the next image loaded and finished.
So again, image 1 loaded during all this time,
then we had or two second waiting time right here.
And then during this time, the second image loaded,
and here we can actually get all this detail about that.
So this is really interesting stuff
if you want to dig deep into this.
Alright?
But anyway, that's part one.
And so now let's go to part two
to create this async function called loadAll
which receives image array.
And then we loop over the array and create an array images.
So just keeping these names in mind.
So part two will be,
loadAll is an async function
which takes an imgArr.
Then is always this block.
So try catch.
And now here, we have to create that images array,
which is the result of imgArr.map.
But now we need to think about the callback function here,
right?
So in each iteration of the array, we have one image
and we want to use the createImage function
to load that image.
Now this function here returns a promise,
right?
And so we should await that promise.
Otherwise nothing is going to happen.
And so here we need to make this function an async function
so that then in there we can use, await.
Alright?
So let's actually pause this one here, just as instructed,
and instead we will call loadAll with
this test array.
Alright.
And then the instruction was also
to check out these images array.
So, images.
Now, okay?
And so now let's take a look at the console.
Let's make it a bit bigger again here.
And so what we got here are actually three promises.
So we have an array of promises
and not the images themselves.
And this is actually a big source of confusion
for most async/await beginners.
And I actually remember really well
when I first stumbled upon this problem
and didn't really understand why this was happening.
However, with all the knowledge
that you just learned in the section,
if we really think about is
then it might actually make sense.
So, here we have an async function, right?
And this is an arrow function.
So we have an implicit return.
So this is like returning something
from this callback function in each iteration, right?
However, as we already know,
an async function will always return a promise
and not really the value that we're interested in, right?
Instead, the value that we want to return
is going to be the fulfilled value of the promise
that the async function returns.
Remember that?
And so that is exactly what is happening here,
but it is happening simply three times.
So we are returning something three times
from an async function here,
and so therefore the result will be three promises, okay?
So just like it happened in that lecture
where we attempted to return a string
from one of the functions, remember that?
So here it is indeed the exact same situation.
So again, we end up with this array of promises,
okay?
But of course behind the scenes,
the images are already being loaded,
and so we're basically fine.
So all we need to do now is to get
these image elements themselves out of the promise.
So how can we do that?
Well, we could take each promise out of the array
and then manually await it,
but that wouldn't make much sense.
First because we would have additional work
and second, because then that work
would not be happening in parallel, right?
But we want it to be happening in parallel
and therefore we can use Promise.all.
So Promise.all is perfect for this
because it already expects an array of images.
And so this images array is already perfect
to handle by dysfunction,
right?
And so now we simply need to
store the image elements here.
So let's call it that into this array.
So let's then take a look at that.
And so now this is of course going to take some time.
So this can only happen once the images are actually loaded.
And so now indeed, here we go.
Alright?
So here are the three image elements and they're now hidden
and so that's why we need to add the parallel class later.
So, again this worked because here in this loop,
of course, the await keyword did its job
of pausing the execution of the function, right?
And so therefore only after that,
we did then Promise.all to actually get
the image elements out of the promises array.
So this was a bit tricky
but maybe you did figure out that
this is how you solve this problem.
So once you need to use async await
in a map method like this,
which believe me is pretty common,
then you end up with an array of promises
that you can then as a next step handle like this.
So with the Promise.all combinator function.
And so now what the next step is actually pretty easy.
All they have to do is to loop over this array
and add the parallel class to it.
So image element.
And so now we don't want a new array.
We simply want to do something on each of the elements.
And so img.classlist.add parallel
like this.
Let's get rid of this console.log here,
and in our network tab...
Oh, this is pretty big.
So you see the images are all loading there now.
Right?
And here we go!
So now we have the images nicely displayed
and set side-by-side.
Let's make it a bit smaller
so we can actually see something.
Now and indeed, there we go.
Let's just see it one more time.
Also here the resources actually loading.
To see it, we need to make it even smaller.
And so you see that down here,
the three images basically started loading
all at the same time,
which is because of this loop here,
which we'll of course execute
these three callback functions, all one after another.
Now, okay?
Alright.
And with this, we are actually finished with this challenge
and also with this whole section.
So make sure that you understood
what we did here in this part two,
because this is pretty important.
But besides that, your job is now done for this section.
So really happy to still see you here
and still learning JavaScript
and still making progress.
So well done, you can be really proud of yourself.
And I really mean that.
And now I see you back here next time in the next section.