模拟实现Promise.all方法

最新推荐文章于 2025-02-08 15:18:53 发布

原创最新推荐文章于 2025-02-08 15:18:53 发布 · 580 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

56 篇文章

订阅专栏

本文详细介绍了如何模拟实现Promise.all和Promise.race方法。Promise.all接收Promise数组，当所有实例变为resolve时返回结果数组；如果有任何一个变为reject，则整体变为reject。而Promise.race则在Promise数组中第一个改变状态的实例决定结果，即一个实例变为resolve或reject，整个Promise就会跟随其状态。文章还总结了Promise.all的特点，包括接收Promise数组、转成Promise、全部成功或一个失败等关键点。

模拟实现 Promise.all 方法

function myall(proArr) {
  // 返回一个promise实例
  return new Promise((resolve, reject) => {
    // 判断参数是否是数组
    if (!Array.isArray(proArr)) {
      return reject(new TypeError('arguments must be Array'))
    }

    let count = 0
    let newValues = new Array(proArr.length)  // 接收新的结果参数 建立一个伪数组
    for (let i = 0; i < proArr.length; i++) {
      // 运用promise特性 只会有一个状态
      Promise.resolve(proArr[i]).then(res => {
        count++
        newValues[i] = res // 把每次返回成功的数据添加到数组中
        if (count === proArr.length) { // 数据接收完成
          return resolve(newValues)
        }
      }, rej => reject(rej))
    }
  })
}

模拟实现 Promise.race 方法

同样接受一个数组作为参数。只要p1、p2、p3之中有一个实例的状态先发生改变，p的状态就跟着改变。并把第一个改变状态的 Promise 实例的返回值，传递给p的回调函数。

function myrace(proArr) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < proArr.length; i++) {
      proArr[i].then(resolve, reject);
    }
  })
}

`Promise.all`

Promise.all 接收一个 promise 对象的数组作为参数，当这个数组里的所有 promise 对象全部变为resolve或有 reject 状态出现的时候，它才会去调用 .then 方法,它们是并发执行的。

var p1 = Promise.resolve(1),
var p2 = Promise.resolve(2),
var p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

在上面的方法中，promise 数组中所有的 promise 实例都变为resolve 的时候，该方法才会返回，并将所有结果传递 results 数组中。

promise 数组中任何一个 promise 为 reject 的话，则整个 Promise.all 调用会立即终止，并返回一个 reject 的新的 promise 对象。reject 使用示例如下：

var p1 = Promise.resolve(1),
var p2 = Promise.reject(2),
var p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    //then方法不会被执行
    console.log(results);
}).catch(function (e){
    //catch方法将会被执行，输出结果为：2
    console.log(e);
});

总结 promise.all 的特点

1、接收一个 Promise 实例的数组或具有 Iterator 接口的对象，

2、如果元素不是 Promise 对象，则使用 Promise.resolve 转成 Promise 对象

3、如果全部成功，状态变为 resolved，返回值将组成一个数组传给回调

4、只要有一个失败，状态就变为 rejected，返回值将直接传递给回调 all() 的返回值也是新的 Promise 对象