JavaScript Promise.race()

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Today we will learn about the promise.race () method. Race translates as a race. Unlike promise.all (), which waits for all promises to be completed, race returns after the fastest promises are completed.

introduce

The promise.race () method takes an array of promises and returns a Promise object as soon as either a Promise in the array is resolved or rejected.

The syntax is similar to promise.all ()

Promise.race([promise1, promise2, promise3])
  .then(console.log)
  .catch(console.log)
Copy the code

Promise.race() 和 Promise.all()The difference between

Promise.all() waits for all promises to complete and returns, promise.race () returns the Promise that completed the fastest, either resolve or reject.

Promise.race() sample code

P1 is completed in 1 second and P2 in 2 seconds

const p1 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    console.log('The first promise is resolved');
    resolve(10);
  }, 1 * 1000);

});

const p2 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    console.log('The second promise is resolved');
    resolve(20);
  }, 2 * 1000);
});


Promise.race([p1, p2])
  .then(value= > console.log(` success:${value}`))
  .catch(error= > console.log(` failure:${error}`));

/ / output:
// The first promise is resolved
// Success: 10
// The second promise is resolved
Copy the code

Since P1 is one second faster than P2, race fires then and only returns p1, not P2.

In the following example, change P2 to reject, and guess what

const p1 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    console.log('The first promise is resolved');
    resolve(10);
  }, 1 * 1000);
});

const p2 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    console.log('The first promise is rejected');
    reject(20);
  }, 2 * 1000);
});


Promise.race([p1, p2])
  .then(value= > console.log(` success:${value}`))
  .catch(error= > console.log(` failure:${error}`));

/ / output:
// The first promise is resolved
// Success: 10
// The second promise is resolved
Copy the code

And you can see that it’s the same thing, because p1 is still one second faster than P2, so it’s still going to return P1.

Let’s change p1 to reject and p2 to resolve

const p1 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    console.log('The first promise is rejected');
    reject(10);
  }, 1 * 1000);
});

const p2 = new Promise((resolve, reject) = > {
  setTimeout(() = > {
    console.log('The second promise is resolved');
    resolve(20);
  }, 2 * 1000);
});


Promise.race([p1, p2])
  .then(value= > console.log(` success:${value}`))
  .catch(error= > console.log(` failure:${error}`));

/ / output:
// The first promise is rejected
// Fail: 10
// The second promise is resolved
Copy the code

P1 is reject, so race is a catch method.

A Promise. Race ([P1, P2, p3, PN]) returns a result that runs faster, regardless of whether the result itself is a successful state or a failure state.

Promise.race may not be used as often in projects as promse.all, and promises are known to have this as well.

Ok, Promise. Race study notes for today, and tomorrow I’ll talk about how Promise handles exception errors. See you tomorrow.

If the article is helpful, wechat search [xiaoshuai’s programming notes], follow me a little bit of progress every day