Introduction to Promise.all and Promise.race methods in JavaScript (with code)

This article brings you an introduction to the Promise.all and Promise.race methods in JavaScript (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

The Promise.all() method accepts an array (or other iterable object) containing a Promise object or a common value as a parameter, and returns a Promise. When all Promise objects are resolved, all resolve values ​​are used as arrays as the result of Promise.all() resolve. If one of the Promise is rejected, the value of the first reject is immediately used as the reject result of Promise.all().

In actual applications, if you need to obtain data from several interfaces and perform certain operations after all the data arrives, you can use Promise.all().

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
Promise.all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]

The following is the code implementation, which requires a counter to confirm that all promise objects have been resolved and then return the result. An array is required to record the returned results in order. If you use a method like for (var i = 0; i < iterable[i]; i ) to traverse, in order to avoid the problem that the closure can only pass in variable references, you need to nest a layer of self-executing functions. A for...in loop is used here so that the function can support other iterable objects besides arrays, such as the data structure Set.

const all = function (iterable) {
  return new Promise(function (resolve, reject) {
    let count = 0, ans = new Array(count)
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(function (res) {
          ans[i] = res
          if (--count === 0) resolve(ans)
        }, reject)
        count++
      } else {
        ans[i] = v
      }
    }
  })
}

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]

Same as Promise.all(), the Promise.race() method accepts an array (or other iterable object) containing a Promise object or a common value as a parameter, and returns a Promise. Once one of the Promise objects resolves, the resolved value is immediately used as the result of Promise.race() resolve. If one of the objects rejects, Promise.race will also reject immediately.

In actual applications, if the same data can be obtained from several interfaces, whichever interface data arrives first will be used first, then Promise.race() can be used, and the required time is equal to the fastest one among them. interface. Here is the code:

const race = function (iterable) {
  return new Promise(function (resolve, reject) {
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(resolve, reject)
      } else {
        resolve(v)
      }
    }
  })
}
const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = new Promise(function (resolve) { setTimeout(resolve, 100, 2) })
race([p1, p2]).then(function (res) { console.log(res) }) // 2

The above is the detailed content of Introduction to Promise.all and Promise.race methods in JavaScript (with code). For more information, please follow other related articles on the PHP Chinese website!