手写Promise.all方法, Promise.race方法

211 阅读1分钟

实现Promise.all

手写中的重点

手写过程中一定要记住的点

  1. Promise.all方法, 返回的是一个Promise对象
  2. Promise.all方法, 的参数是一个装满promise对象的数组
  3. Promise.all方法, resolve的结果是一个数组, 数组里面是每个promise 执行完毕的结果
  4. Promise.all方法, resolve的结果数组的值, 需要和传入的每个promise, 对应

代码实现

// 第二个注意点
function MyPromiseAll(arrPromise) {
    // 第一个注意点
    return new Promise((resolve, reject) => {
          // 存放结果的数组
         let results = []
         // 记录是否遍历完毕
         let count = 0
         arrPromise.forEach((item, index) => {
             item.then(data => {
                    // 第三, 四个注意点
                    results[index] = data
                    count++
                    if(count === arrPromise.length) {
                        resolve(results)
                    }
             }).catch(err => {
                 reject(err)
             })
             
         })
    })
    
}

运行演示

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('A')
    }, 1000)
})
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('C')
    }, 1000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('B')
    }, 1000)
})

MyPromiseAll([p1, p2, p3]).then(values => {
    console.log(values); // 输出[ 'A', 'C', 'B' ]
})

实现Promise.race

手写中的重点

手写过程中一定要记住的点

  1. Promise.race方法, 返回的也是一个Promise对象
  2. Promise.race的参数也是一个装满promise的数组
  3. promise.race是谁先执行完, 就输出谁

代码实现

// 第二个注意点
function MyPromiseRace(arrPromise) {
    // 第一个注意点
    return new Promise((resolve, reject) => {
        arrPromise.forEach(item => {
            // 第三个注意点, 直接循环挨个执行, 就行
            item.then(data => {
                reslove(data)
            }).catch(err => {
                reject(err)
            })
        }) 
    })
    
}

运行演示

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('a');
    }, 2000)
})
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('b');
    }, 1000)
})
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('c');
    }, 3000)
})

Promise.race([p1, p2, p3]).then(value => {
    console.log(value); // 输出 b
})