Let's now quickly talk about
the three other Promise combinators,
which are race, allSettled and any.
And the first one we're gonna talk about is Promise.race.
So like this .
And Promise.race, just like all other combinators,
receives an array of promises and it also returns a promise.
Now this promise returned by Promise.race
is settled as soon as one of the input promises settles.
And remember that settled simply means
that a value is available,
but it doesn't matter
if the promise got rejected or fulfilled.
And so in Promis.race,
basically the first settled promise wins the race.
But let's now actually see this in action.
And I will create a quick IIFE here
so that I can use async await
without like creating a whole new function with a name.
And so as always then we use await Promise
and in this case .race,
and let's also now store it here as a response.
And now here let's define an array of promises
and lets just get this JSON here,
let's getJSON function and try it with three countries.
Let's say Italy,
and do this three times.
Let's say Egypt and then also Mexico.
And so now these three promises will basically
race against each other, like in a real race.
Now, if the winning promise is then a fulfilled promise,
then the fulfillment value of this whole race promise
is gonna be the fulfillment value of the winning promise.
So that's more obvious than it maybe sound.
So let's just see the result here in the console.
And so we got Italy, but if we try it again,
then maybe we get another result
because then maybe another call is gonna be faster.
But well, it seems to be always Italy but now it's Mexico
and let's actually see this in the network tab.
So making it smaller again.
And so you see that indeed Mexico
is the one who took the least time.
So test the smallest bar here.
And it also was the fastest of the three, right?
This time, the fastest was Egypt here by far.
And so that's what we should see in the console.
Okay, so again, just keep in mind
that here in Promised.race,
we only get one result
and not an array of the results of all the three.
Now a promise that gets rejected
can actually also win the race.
And so we say that Promise.race short circuits
whenever one of the promises gets settled.
And so again, that means no matter if fulfilled or rejected.
So let's try some weird name here.
And so now it is the rejected promise that won basically.
But let's go back here to as it was,
and see another example because in the real world
Promise.race is actually very useful
to prevent against never ending promises
or also very long running promises.
For example, if your user
has a very bad internet connection,
then a fetch requests in your application
might take way too long to actually be useful.
And so we can create a special time out promise,
which automatically rejects after a certain time has passed.
So let's do that.
And it's gonna be similar to the wait function
that we created earlier.
But the difference is that this one is actually going
to reject and not going to resolve.
So this time let's actually pass in milliseconds, right?
Well, let's just pass in seconds
just to make it consistent with the other one.
So return new Promise
and execute a function.
And again, in this case, we will not resolve but reject.
And so here for the resolve function,
which is always the first one we can once again,
use this throw away variable.
So using this convention
and then here reject and setTimeout
and here we specify a callback function.
And so we say that after a certain amount of seconds,
let's call it sec like this actually.
So after this time has passed, we reject the promise.
So we create a new error
saying, "Requests took too long."
And so now we can simply have the Ajax call
that we were talking about earlier,
raced against this timeout.
All right, so let me show you what that means.
So Promise.race,
and then here, the first promise,
let's use again or getJSON.
So this is basically what we are interested in here
and let's use another country Tanzania again.
And the second promise is then going to be or timeout.
So let's say that we only want to wait like one second.
And so we will have these two then race against each other.
And if the timeout happens first,
then all of this here will be rejected, right?
And so basically that will then abort the fetch
that is happening here in getJSON.
So I could have used again async await,
but why not use the then method also here?
So in this case, let's just log the response
or we could have called it data,
but that's not really important here
and here the error,
and lets just also log to the console in case there is any.
And so now we have "Request took too long."
But that was very fast.
I went here, we have to multiply it by a 1000.
So again, this one takes milliseconds and not just seconds.
Okay, so we got to Tanzania pretty fast.
And so it was faster than one second.
And so therefore it did not timeout.
But let's now try 0.1 seconds.
And so now we see that the request took too long.
So 0.1 seconds was not enough
for this request here to get finished.
And you will have to experiment with different values here
because this is going to depend on your internet connection.
So let's see 0.2 seconds.
And so now the request was actually fast enough
so that it didn't timeout.
So with 0.15 seconds, again it takes too long.
And so then this promise here is the result of Promise.race.
So that's pretty useful.
And in the real world
of course you will use a larger number.
Let's say like five seconds.
Now, okay, so that's Promis.race
and in fact Promise.race and Promise.all
are by far the two most important promise combinators.
But let me show you also the other two that we have.
So the next one
is Promise.allSettled.
And this one is a pretty new one.
It is from ES2020 and it is actually a very simple one.
So it takes in an array of promises again,
and it will simply return an array
of all the settled promises.
And so again, no matter if the promises got rejected or not.
So it's similar to Promise.all
in regard that it also returns an array of all the results,
but the difference is that Promise.all
will short circuit as soon as one promise rejects,
but Promise.allSettled, simply never short circuits.
So it will simply return
all the results of all the promises.
So Promise.allSettled.
And so now here I will create
actually the most basic example ever.
So I will simply fake promises
by saying Promise.resolve
Success, all right.
And so you already know that this here automatically creates
a promise that is resolved.
And so we don't have to wait for anything to finish
like this here, okay?
So then we can have a couple of more.
Here we have a rejected one.
So let's say ERROR and here another one,
let's say Another success.
Now, okay, and then here we can just call then
and let's see.
Now here we want actually all of the results.
And so indeed here we get three results,
even though one of them rejected, okay?
So this is the result of the three promises
and yeah, so this is how they look like
when we do them manually with resolve, reject and resolve.
Just contrast that with Promise.all,
so that would then look different.
So here we would get an error, okay.
So of course we can also catch the error then.
And so here we will simply get error and that's again...
Because the .allpromise combinator will short circuit
if there is one error, if there is one rejected promise.
So that's the difference between these two.
But now let's go to the last one,
which is Promise.any.
So like this.
Now Promise.any is even more modern.
It is ES2021 and actually at the time of recording,
this one doesn't work in my browser,
but probably by the time I'm releasing this course,
it will work in the latest version of Google Chrome.
And so let me simply do this here as well.
So all am gonna do is to just copy this example here
and then do any, and this is not going to work.
Let me show you.
So we get Promised.any is not a function.
But again in your case, it might already work.
So let me simply explain what it does.
So as always Promise.any takes in an array
of multiple promises and this one will then return
the first fulfilled promise
and it will simply ignore rejected promises.
So basically Promise.any is very similar
to Promise.race with the difference
that rejected promises are ignored.
And so therefore the results of Promise.any
is always gonna be a fulfilled promise,
unless of course all of them reject, okay.
But at the time you're watching this video
again, this should already work.
And then maybe you can experiment a little bit with this
to see the difference between
all the four Promise combinators.
And again, the most important ones
are definitely Promise.all and Promise.race.
So keep at least these two in mind for your own projects.