Jonas: Let's now imagine
that we wanted to get some data
about three countries at the same time,
but in which the order that the data arrives
does not matter at all.
So let's now implement an async function,
using everything that we know at this point,
and that this function will simply take in three countries
and it will lock the capital cities
of these three countries as an array.
So let's say get three countries.
And again, it's an async function.
So country one, two, and three, and then an async function,
we really always need to wrap or coat
into a try catch block, okay?
So never work an async function without this.
And again, in a real world scenario,
you would do real error handling
and not just log it to the console.
Okay, so await, and then let's use our getJSON function
that we coded at some point
at the beginning of this section.
So here at the top of my file,
I have this getJSON function,
which remember, encapsulates the fetch request,
the error handling also.
So basically when there is an error in this fetch,
it will throw a new error
and it also immediately converts the response to JSON.
So again, if you skipped one of the previous lectures,
then make sure to get this function
from the final code of the section.
So getJSON, and then here again,
we're using our rest countries API,
so let me get to the URL.
So here we now will use c1,
and so then we store that data
into a variable just like this.
So this is the magic of async 08, all right?
Now we already know that the result of this
is gonna be an array with one object.
So let's use the structuring
to take the first element there.
And now let's simply duplicate this code here twice,
and do this three times.
So creating three variables for these three countries,
and then what we want to get is the capital.
So now let's say data one.capital,
because there is such a property in each of these objects.
And so remember that we want to return an array here,
and so that's what we're doing,
and data three.capital as well.
And so this should actually already work, all right?
So let's call this function, get three countries.
Let's use Portugal again and Canada and maybe Tanzania,
which is a very beautiful country.
Oh, and here we got something went wrong.
So Portugal,
so missing the G, and yeah.
So here we get the three capital cities
of the three countries.
So great, this works just fine,
and also at a first sight, there seems to make sense.
But if we think about what we did here,
then maybe it actually doesn't make so much sense
because what we did here basically
was to run all these Ajax calls one after another,
even though the result of the second one here
does not depend on the first one,
and the result of the third one
does also not depend on any of the other ones.
And so actually this doesn't make much sense.
Why should the second Ajax call wait for the first one?
And actually let's take a look
at this in our network tab here as well.
So let's again, maybe set this to slow, 3G now,
and then I will have to make it a little bit smaller
so that we can actually see something down here.
Okay, so down here, we actually have the three Ajax calls.
So let's use fast, 3G here actually,
and so let's see what happens.
And so basically these bars that you see here
is JavaScript downloading something.
So here, of course,
the first one is the HTML, CSS and JavaScript,
so nothing strange there,
but then here we load the data for Portugal, right?
So that's the first Ajax call.
And then after that has finished,
we load the data for Canada,
and then after that has finished,
we load the data for Tanzania.
So just as we have it here in the code,
and so as I explained, that doesn't make a lot of sense.
So instead of running these promises in sequence,
we can actually run them in parallel,
so all at the same time.
And so then we can save valuable loading time,
making these three here, basically load at the same time.
And each of them takes half a second.
And so with that, we will basically save one second,
which is actually a lot of time when loading a website.
So let's do that, and for doing that,
we use the promise.all combinator function, so promise.all.
And so this is once again,
kind of a helper function on this promise constructor.
So it's a static method, right?
Now, this function here takes in an array of promises,
and it will return a new promise,
which will then run all the promises
in the array at the same time.
So let's simply grab these three promises from here.
So one, then here, the second one,
and this is the third one, okay?
So here we, again, have these three running,
but you immediately saw the Portugal, Canada and Tanzania
already running another time, but at the same time, right?
So I only wanted to show you this later,
but now here it is already, but for now,
let's keep focusing on making this work.
So as I said, this year, we'll return a new promise,
so a promise that runs
all of these promises at the same time.
And so then we can handle that promise
in the exact same way as before.
So that's called the result data,
and then await it here
and then lock the data to the console.
So this one we also don't need anymore,
so we want to lock the data.
And so yeah, you see once again
that these three now loaded exactly at the same time.
So they are running in parallel, no longer in sequence now.
So that's all I wanted to show you, so let's go back here.
Okay, and so indeed here we get the result.
So an array, which in this case returns three arrays
and each of them is of course the object we're looking for.
And so promise.all receives an array
and it also returns an array.
And so to create the same output as before,
now, all we have to do is to loop over this data
and take out the data that we want.
So console.log then data.map,
because remember that we want to actually return an array,
but not this array,
but simply an array with all the capital cities.
So in this array of data,
each element, let's call it d, which stands for data.
So d is now this single array.
So from d we want to take element zero and then on there,
we want the capital city.
And so this should be it.
And yeah, here we get the exact same results as before.
Now, just one thing
that's also very important to mention here
is that if one of the promises rejects,
then the whole promise.all actually rejects as well.
So we say that promise.all short circuits
when one promise rejects.
So again, because one rejected promise
is enough for the entire thing to reject as well.
Great, so whenever you have a situation
in which you need to do multiple asynchronous operations
at the same time,
and operations that don't depend on one another,
then you should always, always run them in parallel,
just like we did here using promise.all.
And this is actually more common than you might think.
And so please keep this technique in mind
because your users will thank you.
And of course,
just in case you're not using a single weight,
you can, of course also take this result here
and then handle it with the then method.
So that's gonna work just exactly the same
as here with a single weight.
Okay, and that's the promise.all combinator.
So it's called a combinator function
because it allows us to combine multiple promises.
And there are actually other combinator functions,
and so let's take a look at them right in the next video.