This is the 13th day of my participation in the August More Text Challenge

The effect of the all method is essentially “the slowest runner executes the callback”, as opposed to the “fastest runner executes the callback”, which is the race method, which originally means a race. Race is the same as all. Let’s change the runAsync1 delay to 1 second:

Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});
Copy the code

These three asynchronous operations are also executed in parallel. As you can probably guess, one second later runAsync1 is finished executing, and then is executed. The result is this:

Did you guess right? Not quite, is it? RunAsync2 () and runAsync3() do not stop when the callbacks in then start executing and continue. So after another second, output their end sign.

What is the use of this race? There are many different scenarios. For example, we can use Race to set a timeout for an asynchronous request and perform the corresponding operation after the timeout. The code is as follows:

Function requestImg(){var p = new Promise(function(resolve, reject){var img = new Image(); img.onload = function(){ resolve(img); } img.src = 'xxxxxx'; }); return p; } // Delay function, Function timeout(){var p = new Promise(function(resolve, reject){setTimeout(function(){reject(' reject '); }, 5000); }); return p; } Promise .race([requestImg(), timeout()]) .then(function(results){ console.log(results); }) .catch(function(reason){ console.log(reason); });Copy the code

The requestImg function will asynchronously request an image, and I’ll write the address as “XXXXXX”, so it will definitely fail. The timeout function is an asynchronous operation with a delay of 5 seconds. We put the two functions that return the Promise object into race, and they race. If the image request is successful within 5 seconds, then the normal process is followed. If the image is not returned within 5 seconds, timeout wins and a catch message is displayed indicating that the image request has timed out. The running results are as follows:

Is that all there is to conclude the ES6 Promise? Yeah, that’s pretty much all you can use. I have also seen done, finally, success, fail, etc. What are these? These are not in the Promise standard, but syntactic sugar that we implement ourselves.

All asynchronous operations in this article use setTimeout as an example. Ajax is not used to avoid confusion because the first thing many people think of when they talk about Ajax is jquery’s Ajax, and jquery has its own Promise implementation. If you understand the principle, using setTimeout means the same thing as using Ajax. Speaking of jquery, I have to say that the Promise implementation of jquery is rubbish, and the syntax sugar is confusing. I think the reason why Promise is not universal has a lot to do with jquery. We’ll talk more about jquery later.

There are A few more things that need to be said about promises. Due to space limitations, this article will only cover ES6 Promises, followed by A series of plain words: Promise/A+ Standard Promise in jquery