JavaScript Promise.all 和 Promise.race 方法介绍和简要实现

Promise.all() 方法接受一个包含 Promise 对象或普通值的数组(或其它可迭代对象)做为参数,并返回一个 Promise。当全部 Promise 对象都 resolve 后,将全部 resolve 值以数组形式做为 Promise.all() resolve 的结果。若是其中之一的 Promise 被 reject,当即以第一个 reject 的值做为 Promise.all() reject 结果。数组

在实际应用中,若是须要从几个接口获取数据,而且要在全部数据到达后才执行某些操做,就能够使用Promise.all()promise

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]

如下是代码实现,须要一个计数器,来确认全部 promise 对象都已经 resolved,以后返回结果。须要一个数组,按顺序记录返回结果。若是使用相似 for (var i = 0; i < iterable[i]; i++) 的方式遍历,为避免闭包只能传入变量引用的问题,须要嵌套一层自执行函数。这里使用 for ... in 循环,使函数能够支持除数组外的其它可迭代对象,如数据结构 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]

Promise.all()Promise.race() 方法接受一个包含 Promise 对象或普通值的数组(或其它可迭代对象)做为参数,并返回一个 Promise。一旦其中之一的 Promise 对象 resolve 之后,当即把 resolve 的值做为 Promise.race() resolve 的结果。若是其中之一的对象 reject,Promise.race也会当即 reject。闭包

在实际应用中,若是能够从几个接口获取相同的数据,哪一个接口数据先到就先用哪一个,就能够使用Promise.race(),所需时间等于其中最快的那个接口。下面是代码:函数

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
相关文章
相关标签/搜索