手写Promise看着一篇就足够了

 

 

目录

• 概要
• 博客思路
• API的特性与手写源码
  • 构造函数
  • then
  • catch
  • Promise.resolved
  • Promise.rejected
  • Promise.all
  • Promise.race

概要

本文主要介绍了Promise上定义的api的特性，以及手写如何实现这些特性。目的是把学习过程中的产出以博客的方式输出，巩固知识，也便于之后复习

博客思路

mdn上搜索Promise，了解类和api的定义：

• 定义了哪些属性，分别代表什么含义
• api需要传什么参数，返回什么值，可能抛出什么异常
• 看官方给出的用例，猜想内部可能的实现
• 编写源码，用官方用例验证查看返回值是否一致

API的特性与手写源码

构造函数

• promise有状态pending、rejected和resolved，所以应该有个变量来保存状态
• 构造函数参数excutor是个同步执行的回调函数，函数执行的参数是两个函数resolved和rejected，所以promise内部需要定义两个函数，并且在构造行数中执行excutor的地方传入
• .then中会传入回调函数onResolved和onRejected，在resolved和rejected内会分别会触发对应的回调函数，所以需要两个数组保存then中传进来的回调
• resolved和rejected只能执行一次，执行后promise的状态会改变，且参数会传递给回调函数
• onRejected和onResolved异步执行
• excutor执行抛异常会直接执行rejected，所以excutor的执行需要catch错误

const PENDING = "PENDING";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(excutor){

    // promise内部保存着状态值
    this.status = PENDING;
    this.data = null;
    // then方法传进来的回调函数此保存
    this.onResolvedList = [];
    this.onRejectedList = [];

    let resolved = (value) => {
        // resolved函数只能执行一次，所以先判断状态是不是pending
        if(this.status !== PENDING){
            return;
        }
        // 变更状态为resolved
        this.status = RESOLVED;
        // 数据为传进来的值
        this.data = value;

        // 判断是否已经有onResolved回调已经穿入，有则异步执行
        if(this.onResolvedList.length > 0){
            setTimeout(() => {
                this.onResolvedList.forEach(onResolved => {
                    onResolved(value);
                });
            }, 0);
        }
    }

    let rejected = (reason) => {
        if(this.status !== PENDING){
            return
        }

        this.status = REJECTED;
        this.data = reason;

        if(this.onRejectedList.length > 0){
            setTimeout(() => {
                this.onRejectedList.forEach(onRejected => {
                    onRejected(reason);
                });
            });
        }
    }

    try{
        // 执行器函数同步执行，且参数为promise内定义的resolve和rejected
        excutor(resolved, rejected);
    }catch(error){
        // 如果执行器函数出错直接执行rejected
        this.rejected(error);
    }
}

then

• then会接受两个回调函数onResolved和onRejected
• onResolved和onRejected会异步调用
• then会返回一个新的promise对象
• then的参数如果没传，那么value和reason继续向下传递
• 如果执行then的时候，promise的状态还是pending，那么只保存回调,并且确保回调执行后能修改新的promise的状态
• 如果触发的对应的回调函数执行抛异常，那么返回的新的回调函数状态为rejected，reason则会catch到的error
• 如果触发的对应回调函数执行返回值不是promise对象，那么返回新的promise状态为resolved，value则为传入then的回调的返回值
• 如果触发的对应回调返回值是promise对象，那么新的promise返回值的状态取决于改回调返回的promise

MyPromise.prototype.then = function(onResolved, onRejected){
    
    // 如果没有传onResolved，则设置onResolved为返回value的函数
    onResolved = typeof onResolved === "function" ? onResolved : value => value
    // 如果没有传onRejected，则设置onRejected为抛处reason的函数
    onRejected = typeof onRejected === "function" ? onRejected : reason => {throw reason}

    return new MyPromise((resolved, rejected) => {

        // 传入要执行的回调函数
        let callBackExcu = (callback) => {
            try{
                let result = callback(this.data);
                if(result instanceof MyPromise){
                    // 如果回调返回值还是promise则then返回的promise的状态取决于回调的返回的promise，成功就执行resolved失败就执行rejected
                    result.then(resolved, rejected);
                }else{
                    // 如果回调的返回值不为promise则新的promise状态为resolved
                    resolved(result)
                }
            }catch(error){
                // 如果回调执行抛处异常，则新的promise状态为rejected
                rejected(error);
            }
        }

        if(this.status === PENDING){
            // 如果状态为pending则保存回调且确保回调执行后能修改当前返回的promise的状态
            this.onResolvedList.push((value) => {
                callBackExcu(onResolved)
            });
            this.onRejectedList.push((reason) => {
                callBackExcu(onRejected)
            });
        }else{
            // 如果状态不为pending则根据状态执行对应的回调，且修改当前promise的状态
            switch(this.status){
                case REJECTED:
                    // onRejected异步执行
                    setTimeout(() => {
                       callBackExcu(onRejected); 
                    });
                    break;
                case RESOLVED:
                    // onResolved异步执行
                    setTimeout(() => {
                       callBackExcu(onResolved); 
                    });
                    break;
            }
        }
    });
}

catch

catch和then其实差不多，不同点在于传入的参数只有onRejected，所以

MyPromise.prototype.catch = function(onRejected){
    // catch与then的不同点在于传入的参数不一样，不需要传onResolve
    return this.then(null, onRejected);
}

Promise.resolved

• resolved会返回一个promise对象
• 如果传入的参数本就是一个primise对象则直接返回
• 如果是一个包含“then”方法的对象，返回新的promise对象，且状态取决于then函数的执行，如果then的执行中抛错，则新的promise状态为rejected
• then的参数为两个回调函数resolved和rejected
• 如果传入参数value既不是promise的实例，也不是具备then函数的对象，则返回一个新的promise对象且改对象data就为value

MyPromise.resolve = function(value){
    if(value instanceof MyPromise){
        //  如果传入的参数本就是一个primise对象则直接返回
        return value;
    }else if(typeof value.then === "function"){
        return new MyPromise((resolved, rejected) => {
            try{
                // then的参数为两个回调函数resolved和rejected
                value.then(resolved, rejected);
            }catch(error){
                // 如果then的执行中抛错，则新的promise状态为rejected
                rejected(error);
            }
        });
    }else{
        // 如果传入参数value既不是promise的实例
        return new MyPromise((resolved, rejected) => {
            resolved(value);
        });
    }
}

Promise.rejected

• 接受参数reason，返回一个状态为rejected的data为reason的promise实例

MyPromise.reject = function(reason){
    return new MyPromise((resolved, rejected) => {
        rejected(reason);
    });
}

Promise.all

• 接收的参数是需要满足可迭代协议,否则会抛错
• 返回值是个promise
• 如果传入的参数是个空的可迭代的对象，则返回一个状态为resolved的可promise实例，data为空数组,

Promise.all([]) // Promise {<resolved>: Array(0)}
Promise.all("") // Promise {<resolved>: Array(0)}

• 如果传入的参数中没有promise实例，或者所有的promise已经是resolved状态，则返回一个promise状态为pending，且异步更新为resolved

let p = Promise.all([1,2,3,4,Promise.resolve(5)])
console.log(p); // Promise {<pending>}

• 如果存在promise且状态还是pending，返回一个promise实例，且等所有promise都resolved后，状态更新为resolved，data为传入的顺序

接下来看下源码

// 先定义一个验证参数是否满足可迭代协议的方法
const isIterable = function(object){
        return typeof object[Symbol.iterator] === "function"
        && typeof object[Symbol.iterator]() === "object"
        && typeof object[Symbol.iterator]().next === "function"
}

MyPromise.all = function(iterable){
    if(!isIterable(iterable)){
        // 不满足可迭代协议抛错
        throw new TypeError("Object is not iterable");
    }

    let data = [];
    let count = 0;
    // 迭代参数生成数组
    let params = Array.from(iterable);

    return new MyPromise((resolved, rejected) => {
        if(params.length === 0){
            // 如果是空的可迭代对象,返回空数组
            resolved(data);
        }else{
            params.forEach((element, index) => {
                // 遍历每个参数,统一处理成promise的实例
                // 这样就少了一个逻辑分支
                let itemPromise = MyPromise.resolve(element);
                itemPromise.then(
                    value => {
                        // data中的结果需要和传入参数的顺序一致
                        data[index] = value;
                        if(count === params.length - 1){
                            // 说明全都resolved了
                            resolved(data);
                        }
                        count++;
                    },
                    reason => {
                        // reject直接返回
                        rejected(reason);
                    }
                );
            });
        }
    });
}

Promise.race

• 接收一个可迭代对象,这点与方法"all"相同
• 返回一个新的promise
• 返回的promise状态为pending，异步更新为resolved

let p = Promise.race([1,2,3,4]);
console.log(p); // Promise {<pending>}

p.then(
    value => {
        console.log(value); // Promise{<resolved>: 1}
    }
);

• 传入的若干promise中，只要有一个promise最先resolved或者rejected，则返回的promise状态更新为resolved

let p1 = new Promise((resolved, rejected) => {
    setTimeout(() => {
        resolved("p1");
    }, 10);
});

let p2 = new Promise((resolved, rejected) => {
    setTimeout(() => {
        resolved("p2");
    }, 100);
});

let p = Promise.race([p2, p1])

p.then(
    value => {
        console.log(value); // p1
    }
);

最后来看一下自己源码的实现

MyPromise.race = function(iterable){
    if(!isIterable(iterable)){
        // 不满足可迭代协议抛错
        throw new TypeError("Object is not iterable");
    }

    const params = Array.from(iterable);

    return new MyPromise((resolved, rejected) => {
        params.forEach((element, index) => {
            const itemPromise = MyPromise.resolve(element);

            itemPromise.then(
                value => {
                    // 只要有一个promise resolved直接返回
                    resolved(value);
                },
                error => {
                    // 只要有一个promise rejected直接返回
                    rejected(error);
                }
            );
        });
    });
}