Promise方法底层原理实现

717 阅读2分钟

前言

本文整理了Promise的一些方法的底层原理实现,如果对答案有不一样见解的同学欢迎评论区补充讨论,当然有问题,也欢迎在评论区指出。

1、Promise.all()

//或者  Promise.prototype.all = function(promiseArray){}
function  PromiseAll(promiseArray) {
    return new Promise(function(resolve,reject){
        //判断参数类型
        if(!Array.isArray(promiseArray)){
            return reject(new TypeError('arguments muse be an array'))
        }
        let counter = 0,
            promiseNum = promiseArray.length,
            resolvedArray = new Array(promiseNum);
        for(let i = 0; i < promiseNum; i++){
            Promise.resolve(promiseArray[i]).then(function(value){
                counter++;
                resolvedArray[i] = value;
                if(counter === promiseNum){
                    return resolve(resolvedArray)
                }
            },function(reason){
                return reject(reason)
            })
        }
    })
}


// 创建测试用例
const createPromise =function (value,delay){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(value)
        },delay)
    })
}

const promiseList= [createPromise(1,1000),createPromise(2,2000),createPromise(3,3000)]
PromiseAll(promiseList)
    .then(res => console.log(res)) // 3秒之后打印 ["1", "2", "3"]
    .catch((err) => console.log(err))

2、Promise.allSettled()

//返回的是   每个promise的结果(数组)   不管是成功还是失败的结果都返回

const PromiseAllSettled = function (promiseArray) {
    return new Promise((resolve, reject) => {
        // 代码健壮性,判断一下promises是一个数组
        if (!Array.isArray(promiseArray))
            return reject(new TypeError('args must be an array'));
        // 闭包,保存一下结果数组
        const res = [];
        // 计数
        let count = 0;
        for (let i = 0; i < promiseArray.length; i++) {
            Promise.resolve(promiseArray[i]).then(data => {
                res[i] = data;
            }).catch(err => {
                res[i] = err;
            }).finally(() => {
                //Promise.prototype.finally在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数
                count++;
                if (count === promiseArray.length) {
                    resolve(res);
                }
            })
        }
    })
}

3、Promise.race()

//赛跑-----Promise.race([p1, p2, p3])返回那个最快完成的结果,不管结果本身是成功状态还是失败状态。
//Promise.any() 接收一个Promise可迭代对象,返回那个最先成功的结果。如果没有一个 promise 成功(即所有的 promises 都失败/拒绝),就返回一个失败的 promise 
const PromiseRace = function(promiseArray){
    return new Promise((resolve,reject)=>{
        if(!Array.isArray(promiseArray)) reject(new TypeError('args must be an array'));
        promiseArray.forEach(promise => {
            Promise.resolve(promise)
                .then((value)=>resolve(value))
                .catch((error)=>reject(error))
        })
    })
}

总结

觉得写得好的,对你有帮助的,可以分享给身边人,知识越分享越多,千万不要吝啬呀

后续更新promise相关基础和一些方法的底层原理实现总结,请关注我,整理好,分享给你们,我们一起学前端。