Promise的实现

用户5183523957196
52 阅读14分钟

创建Promise类，传入执行器

//定义三个状态常量
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
    constructor(executor){
        let self = this;
        this.status = PENDING;//当前状态，初始化状态为pending
        this.value = null;//成功返回的值
        this.reason = null;//失败返回的原因
        //内置resolve函数 更改状态 pending-->fulfilled
        function resolve(value) {
            console.log('MyPromise resolve');
            if(self.status == PENDING){
                self.status = FULFILLED;
                self.value = value;
            }
        }
        //内置reject函数 更改状态 pending-->rejected
        function reject(reason) {
            console.log('MyPromise reject');
            if(self.status == PENDING){
                self.status = REJECTED;
                self.reason = reason;
            }
        }
        //如果错误，则抛出错误
        try {
            // executor 是一个执行器，接受两个参数resolve和reject，并且执行器立刻执行
            // 如果觉得执行器不好理解，可以把它看成一个回调函数
            executor(resolve,reject)
        }catch (e) {
            reject(e)
        }

    }
}

then方法的实现

/**
 * then 方法
 * @param onFulfilled
 * @param onRejected
 * then 的 特点
 * 1.可以接收两个回调函数，且都非必填
 * 2.如果成功则执行第一个回调函数，如果失败则执行第二个回调函数
 * 3.可以链式调用
 * 这里不能使用箭头函数，否则this指向的是window，而不是MyPromise实例
 */

MyPromise.prototype.then = function(onFulfilled,onRejected){
    //判断状态，确定执行方法
    if (this.status == FULFILLED){
        onFulfilled(this.value);
    }else if (this.status == REJECTED){
        onRejected(this.reason);
    }

};

我们来写个例子测试一下：

let myPromise = new MyPromise((resolve,reject)=>{
     reject(100);

});
myPromise.then(value=>{
    console.log('myPromise resolved:' + value);
},err=>{
    console.log('myPromise rejected:' + err);//myPromise rejected:100
});
let promise = new Promise((resolve,reject)=>{
    reject(100);
});
promise.then(value=>{
    console.log('promise resolved:' + value);
},err=>{
    console.log('promise rejected:' + err);//promise rejected:100
});

最简单的then功能实现了，再试一下异步请求，发现没有任何打印，也没有任何报错：

let myPromise = new MyPromise((resolve,reject)=>{
    setTimeout(()=>{
        reject(100);
    },2000)

});
myPromise.then(value=>{
    console.log('myPromise resolved:' + value);
},err=>{
    console.log('myPromise rejected:' + err);
});

这是因为在执行myPromise的then方法时，myPromise的状态还是'pending'状态，所以不会有任何打印消息，那如何解决呢？需要两个数组分别将then中的函数存储起来，再改变状态时去执行存储的函数；

解决pending状态问题

1.添加数组

this.onFulfilled = [];//如果遇到异步任务，需要 存储成功的回调
this.onRejected = [];//如果遇到异步任务，需要 存储失败的回调

2.在then中存储回调函数

MyPromise.prototype.then = function(onFulfilled,onRejected){
    //判断状态，确定执行方法
    if (this.status == FULFILLED){
        onFulfilled(this.value);
    }else if (this.status == REJECTED){
        onRejected(this.reason);
    }else if(this.status == PENDING){
        //将状态还是pending的回调函数分布存储起来，再改变状态时在去执行它
        this.onFulfilled.push(onFulfilled);
        this.onRejected.push(onRejected);
    }
};

3.在更状态时执行存储的函数

//内置resolve函数 更改状态 pending-->fulfilled
function resolve(value) {
    console.log('MyPromise resolve');
    if(self.status == PENDING){
        self.status = FULFILLED;
        self.value = value;
        //更改状态时，查看onFulfilled是否有未执行的回调函数，有就执行
        let fn;
        while (self.onFulfilled.length){
            //使用Array.shift()取数组第一个元素，因为onFulfilled中为函数,则取出的是函数
            fn = self.onFulfilled.shift();
            //执行函数
            fn(self.value);
        }
    }
}
//内置reject函数 更改状态 pending-->rejected
function reject(reason) {
    if(self.status == PENDING){
        self.status = REJECTED;
        self.reason = reason;
        //更改状态时，onRejected，有就执行
        let fn;
        while (self.onFulfilled.length){
            //使用Array.shift()取数组第一个元素，onRejected,则取出的是函数
            fn = self.onRejected.shift();
            //执行函数
            fn(self.reason);
        }
    }
}

现在再去执行setTimeout异步任务时，过两秒就会打印出“myPromise rejected:100”啦。

then链式调用

then 方法要链式调用那么就需要返回一个 Promise 对象,这里以then中状态为fulfilled为示例

//判断状态，确定执行方法
if (this.status == FULFILLED) {
    return myPromis2 = new MyPromise((resolve, reject) => {
        try {
            //result值的特殊类型：
            // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
            // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
            let result = onFulfilled(self.value);
            if (result == myPromis2) new TypeError('cycle cite');
            if (result instanceof MyPromise) {
                //如果这里result是MyPromise的实例，则需要考虑它的状态是否已经改变
                //这里先考虑状态已改变的情况，后期再完善状态未改变情况哈
                result.then(resolve, reject);
            } else {
                resolve(result);
            }
        } catch (e) {
            reject(e);
        }
    });

当then中状态为pending是与fulfilled和rejected有点不同，当状态为pending时，我们还不确定应该执行onFulfilled还是onRejected，但是我们又需要onFulfilled或onRejected执行后的值传给下一个Promise，这个时候就需要将onFulfilled和onRejected放在回调函数中，再将回调函数放在回调数组（this.onFulfilled/this.onRejected)中，以确保我们能够获取到执行onFulfilled或onRejected的值

if (this.status == PENDING) {
    return myPromis2 = new MyPromise((resolve, reject) => {
        try {
            //当状态为pending时，我们还不确定应该执行onFulfilled还是onRejected
            //但是我们又需要onFulfilled或onRejected执行后的值传给下一个Promise，
            //这个时候就需要将onFulfilled和onRejected放在回调函数中，再将回调函数放在回调数组（this.onFulfilled/this.onRejected)中
            //将状态还是pending的回调函数分布存储起来，再改变状态时在去执行它
            let fn = function (value) {
                try {
                    //result值的特殊类型：
                    // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                    // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                    let result = onFulfilled(value);
                    if (result == myPromis2) new TypeError('cycle cite');
                    if (result instanceof MyPromise) {
                        //如果这里result是MyPromise的实例，则需要考虑它的状态是否已经改变
                        //这里先考虑状态已改变的情况，后期再完善状态未改变情况哈
                        result.then(resolve, reject);
                    } else {
                        resolve(result);
                    }
                } catch (e) {
                    reject(e);
                }
            };
            this.onFulfilled.push(fn);
            fn = function (reason) {
                try {
                    //result值的特殊类型：
                    // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                    // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                    let result = onRejected(reason);
                    if (result == myPromis2) new TypeError('cycle cite');
                    if (result instanceof MyPromise) {
                        result.then(resolve, reject);
                        //如果这里result是MyPromise的实例，则需要考虑它的状态是否已经改变
                    } else {
                        resolve(result);
                    }
                } catch (e) {
                    reject(e);
                }
            };
            this.onRejected.push(fn);
        } catch (e) {
            reject(e)
        }
    });
}

这里代码有点冗余，后期完整版会进行整合。

这个时候我们来测试一下： 测试1：好像没有什么问题啦

let myPromise = new MyPromise((resolve,reject)=>{
    setTimeout(()=>{
        reject(100);
    },2000)

});
myPromise.then(value=>{
        console.log('myPromise resolved1:' + value);
    },err=>{
        console.log('myPromise rejected1:' + err);
        return 20;
    }

).then(value=>{
    console.log('myPromise resolved2:' + value);
},err=>{
    console.log('myPromise rejected2:' + err);
});

image.png

测试2：这个时候发现它报错啦！！！,

myPromise.then().then(value => {
    console.log('myPromise resolved2:' + value);
}, err => {
    console.log('myPromise rejected2:' + err);
});
//myPromise rejected2:TypeError: fn is not a function

这是因为我们没有对then中的onFulfilled和onRejected函数做空值处理，加上空值处理就可以啦

//做空值处理，实现值穿透 如：myPromise1.then().then().then(value=>{...},err=>{...})
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
onRejected = typeof onRejected === 'function' ? onRejected : reason => reason;

then异步处理

原生Promise执行下面打印的顺序为：

image.png

console.log('测试Promise  start');
let promise = new Promise((resolve, reject) => {
    reject(100);
});
promise.then(value => {
    console.log('promise resolved:' + value);
}, err => {
    console.log('promise rejected:' + err);
    return 33;
}).then(value => {
    console.log('promise resolved:' + value);
}, err => {
    console.log('promise rejected:' + err);
});
console.log('测试Promise  end');

但是我们的MyPromise执行下面是代码打印顺序与上段代码打印顺序不同：

image.png

console.log('测试MyPromise  start');
let myPromise = new MyPromise((resolve, reject) => {
    reject(100);
});
myPromise.then(value => {
    console.log('myPromise resolved1:' + value);
}, err => {
    console.log('myPromise rejected1:' + err);
    return 33;
}).then(value => {
    console.log('myPromise resolved2:' + value);
}, err => {
    console.log('myPromise rejected2:' + err);
});
console.log('测试MyPromise  end');

Promise中then为微任务，会在主线程完成后再去执行then中的代码，这里我们使用setTimeout来模拟一下，这儿涉及到js执行栈以及js单线程和eventLoop相关的知识，各位对js的执行栈、js单线程、eventLoop不太了解的，可以看一下这篇文章：推荐文章

//判断状态，确定执行方法
if (this.status == FULFILLED) {
    return myPromis2 = new MyPromise((resolve, reject) => {
        //使用setTimeout模拟then的异步调用
        setTimeout(() => {
        try {
            //result值的特殊类型：
            // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
            // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
            let result = onFulfilled(self.value);
            if (result == myPromis2) new TypeError('cycle cite');
            if (result instanceof MyPromise) {
                //如果这里result是MyPromise的实例，则需要考虑它的状态是否已经改变
                //这里先考虑状态已改变的情况，后期再完善状态未改变情况哈
                result.then(resolve, reject);
            } else {
                resolve(result);
            }
        } catch (e) {
            reject(e);
        }
        }, 0);
    });
}

现在再去执行它就和Promise的打印顺序一样啦！！

image.png

then方法的整体代码：

function resolvePromise(myPromise2, result, resolve, reject) {
    //result值的特殊类型：
    // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
    // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
    if (result == myPromise2) {
        reject(new TypeError('cycle cite'));
        return;
    }
    //返回MyPromise实例，这时需要取它的then结果作为myPromise2的结果
    if (result instanceof MyPromise) {
        //如果这里result是MyPromise的实例，则需要考虑它的状态是否已经改变
        if (result.status == PENDING) {
            result.then(value => {
                resolvePromise(myPromise2, value, resolve, reject);
            }, reason => {
                reject(reason)
            })
        } else {
            result.then(resolve, reject);
        }
    } else {
        return resolve(result);
    }
}

/**
 * then 方法
 * @param onFulfilled
 * @param onRejected
 * then 的 特点
 * 1.可以接收两个回调函数，且都非必填
 * 2.如果成功则执行第一个回调函数，如果失败则执行第二个回调函数
 * 3.可以链式调用
 * 这里不能使用箭头函数，否则this指向的是window，而不是MyPromise实例
 */

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    let self = this;
    let myPromis2;//要返回的MyPromise实例
    //做空值处理，实现值穿透 如：myPromise1.then().then().then(value=>{...},err=>{...})
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => reason;
    //判断状态，确定执行方法
    if (this.status == FULFILLED) {
        return myPromis2 = new MyPromise((resolve, reject) => {
            //使用setTimeout模拟then的异步调用
            setTimeout(() => {
            try {
                //result值的特殊类型：
                // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                let result = onFulfilled(self.value);
                resolvePromise(myPromis2, result, resolve, reject);
            } catch (e) {
                reject(e);
            }
            }, 0);
        });
    } else if (this.status == REJECTED) {
        return myPromis2 = new MyPromise((resolve, reject) => {
            //使用setTimeout模拟then的异步调用
            setTimeout(() => {
            try {
                //result值的特殊类型：
                // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                let result = onRejected(self.reason);
                resolvePromise(myPromis2, result, resolve, reject);
            } catch (e) {
                reject(e);
            }
            }, 0);
        });
    } else if (this.status == PENDING) {
        return myPromis2 = new MyPromise((resolve, reject) => {
            try {
                //当状态为pending时，我们还不确定应该执行onFulfilled还是onRejected
                //但是我们又需要onFulfilled或onRejected执行后的值传给下一个Promise，
                //这个时候就需要将onFulfilled和onRejected放在回调函数中，再将回调函数放在回调数组（this.onFulfilled/this.onRejected)中

                //将状态还是pending的回调函数分布存储起来，再改变状态时在去执行它
                let fn = function (value) {
                    try {
                        //result值的特殊类型：
                        // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                        // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                        let result = onFulfilled(value);
                        resolvePromise(myPromis2, result, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                };
                this.onFulfilled.push(fn);
                fn = function (reason) {
                    // resolvePromise(onRejected, reason, resolve, reject)
                    try {
                        //result值的特殊类型：
                        // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                        // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                        let result = onRejected(reason);
                        resolvePromise(myPromis2, result, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                };
                this.onRejected.push(fn);
            } catch (e) {
                reject(e)
            }
        });
    }
}

catch方法的实现

MyPromise.prototype.catch = function (onRejected){
    //catch方法就是 then(null/undefined,(...)=>{...})的缩写
    return this.then(null,onRejected);
}

finally方法的实现

MyPromise.prototype.finally = function (callback) {
    return this.then(value => {
        return new MyPromise.resolve(callback()).then(() => value)
    }, err => {
        return new MyPromise.resolve(callback()).then(() => {
            throw err
        })
    })
}

resolve/reject方法的实现

MyPromise.resolve = function (value) {
    //MyPromise 实例，直接原样返回
    if (value instanceof MyPromise) return value;
    return  new MyPromise((resolve,reject)=>{
        //如果是thenable对象则执行对象的then方法
        if (typeof value == 'object' && value.then && typeof value.then === 'function'){
            setTimeout(()=>{
                value.then(resolve,reject);
            },0)
        }else{
            resolve(value)
        }
    })
}
MyPromise.reject = function (reason) {
    // reject方法和Promise.resolve不同，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。
    return new MyPromise((resolve,reject)=>{
       reject(reason)
    })
}

all方法的实现

MyPromise.all = function (myPromises) {
    return new MyPromise((resolve, reject) => {
        //如果没有传值 或 传的值不是数组，则reject错误，这里错误类型没有进行细分
        if (!myPromises || !Array.isArray(myPromises)) {
            reject(new TypeError('not iterable'));
            return;
        }
        // 如果传入的是空数组，则直接resolve
        if (myPromises.length == 0) {
            resolve();
        } else {
            let arr = [];//保存myPromises的结果
            let len = myPromises.length;
            let item;
            function addItem(value) {
                arr.push(value);
                //如果存入arr的长度与myPromises长度相同，说明已经遍历完myPromises，且myPromises中的实例都是fulfilled状态，
                //直接将resolve arr
                if (arr.length == myPromises.length) {
                    resolve(arr);
                }
            }
            for (let i = 0; i < len; i++) {
                item = myPromises[i];
                //如果是MyPromise的实例，如果实例是完成状态，则将值直接存入数组中，否则直接reject错误
                if (item instanceof MyPromise) {
                    item.then(value => {
                        //向arr中添加实例结果
                        addItem(value);
                    }, err => {
                        reject(err);
                    })
                } else {
                    //如果不是MyPromise实例，则将值转为MyPromise实例，输出数组中的顺序
                    MyPromise.resolve(item).then(value => {
                        addItem(value)
                    })
                }
            }
        }
    })
}

any/race/allSettled方法的实现与all方法的实现类似

最终代码

//定义三个状态常量
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
    constructor(executor) {
        let self = this;
        this.status = PENDING;//当前状态, 初始化状态未pending
        this.value = null;//成功返回的值
        this.reason = null;//失败返回的原因
        this.onFulfilled = [];//如果遇到异步任务，需要 存储成功的回调
        this.onRejected = [];//如果遇到异步任务，需要 存储失败的回调
        //内置resolve函数 更改状态 pending-->fulfilled
        function resolve(value) {
            if (self.status == PENDING) {
                self.status = FULFILLED;
                self.value = value;
                //更改状态时，查看onFulfilled是否有未执行的回调函数，有就执行
                let fn;
                while (self.onFulfilled.length) {
                    //使用Array.shift()取数组第一个元素，因为onFulfilled中为函数,则取出的是函数
                    fn = self.onFulfilled.shift();
                    //执行函数
                    fn(self.value);
                }
            }
        }

        //内置reject函数 更改状态 pending-->rejected
        function reject(reason) {
            if (self.status == PENDING) {
                self.status = REJECTED;
                self.reason = reason;
                //更改状态时，onRejected，有就执行
                let fn;
                while (self.onRejected.length) {
                    //使用Array.shift()取数组第一个元素，onRejected,则取出的是函数
                    fn = self.onRejected.shift();
                    //执行函数
                    fn(self.reason);
                }
            }
        }

        //如果错误，则抛出错误
        try {
            // executor 是一个执行器，接受两个参数resolve和reject，并且执行器立刻执行
            // 如果觉得执行器不好理解，可以把它看成一个回调函数
            executor(resolve, reject)
        } catch (e) {
            reject(e)
        }
    }
}

function resolvePromise(myPromise2, result, resolve, reject) {
    //result值的特殊类型：
    // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
    // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
    if (result == myPromise2) {
        reject(new TypeError('cycle cite'));
        return;
    }
    //返回MyPromise实例，这时需要取它的then结果作为myPromise2的结果
    if (result instanceof MyPromise) {
        //如果这里result是MyPromise的实例，则需要考虑它的状态是否已经改变
        if (result.status == PENDING) {
            result.then(value => {
                resolvePromise(myPromise2, value, resolve, reject);
            }, reason => {
                reject(reason)
            })
        } else {
            result.then(resolve, reject);
        }
    } else {
        return resolve(result);
    }
}

/**
 * then 方法
 * @param onFulfilled
 * @param onRejected
 * then 的 特点
 * 1.可以接收两个回调函数，且都非必填
 * 2.如果成功则执行第一个回调函数，如果失败则执行第二个回调函数
 * 3.可以链式调用
 * 这里不能使用箭头函数，否则this指向的是window，而不是MyPromise实例
 */

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    let self = this;
    let myPromis2;//要返回的MyPromise实例
    //做空值处理，实现值穿透 如：myPromise1.then().then().then(value=>{...},err=>{...})
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => reason;
    //判断状态，确定执行方法
    if (this.status == FULFILLED) {
        return myPromis2 = new MyPromise((resolve, reject) => {
            //使用setTimeout模拟then的异步调用
            setTimeout(() => {
                try {
                    //result值的特殊类型：
                    // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                    // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                    let result = onFulfilled(self.value);
                    resolvePromise(myPromis2, result, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            }, 0);
        });
    } else if (this.status == REJECTED) {
        return myPromis2 = new MyPromise((resolve, reject) => {
            //使用setTimeout模拟then的异步调用
            setTimeout(() => {
                try {
                    //result值的特殊类型：
                    // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                    // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                    let result = onRejected(self.reason);
                    resolvePromise(myPromis2, result, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            }, 0);
        });
    } else if (this.status == PENDING) {
        return myPromis2 = new MyPromise((resolve, reject) => {
            try {
                //当状态为pending时，我们还不确定应该执行onFulfilled还是onRejected
                //但是我们又需要onFulfilled或onRejected执行后的值传给下一个Promise，
                //这个时候就需要将onFulfilled和onRejected放在回调函数中，再将回调函数放在回调数组（this.onFulfilled/this.onRejected)中

                //将状态还是pending的回调函数分布存储起来，再改变状态时在去执行它
                let fn = function (value) {
                    try {
                        //result值的特殊类型：
                        // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                        // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                        let result = onFulfilled(value);
                        resolvePromise(myPromis2, result, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                };
                this.onFulfilled.push(fn);
                fn = function (reason) {
                    try {
                        //result值的特殊类型：
                        // 1.MyPromise对象，这时需要取它的then结果作为myPromise2的结果
                        // 2.返回自己--会造成循环引用，这时需要抛出错误 如：再then中return会自己 myPromise1.then(value=>return myPromise1)
                        let result = onRejected(reason);
                        resolvePromise(myPromis2, result, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                };
                this.onRejected.push(fn);
            } catch (e) {
                reject(e)
            }
        });
    }
}
MyPromise.prototype.catch = function (onRejected) {
    //catch方法就是 then(null/undefined,(...)=>{...})的缩写
    return this.then(null, onRejected);
}
MyPromise.prototype.finally = function (callback) {
    return this.then(value => {
        return new MyPromise.resolve(callback()).then(() => value)
    }, err => {
        return new MyPromise.resolve(callback()).then(() => {
            throw err
        })
    })
}
MyPromise.resolve = function (value) {
    //MyPromise 实例，直接原样返回
    if (value instanceof MyPromise) return value;
    return new MyPromise((resolve, reject) => {
        //如果是thenable对象则执行对象的then方法
        if (typeof value == 'object' && value.then && typeof value.then === 'function') {
            setTimeout(() => {
                value.then(resolve, reject);
            }, 0)
        } else {
            resolve(value)
        }
    })
}
MyPromise.reject = function (reason) {
    // reject方法和Promise.resolve不同，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。
    return new MyPromise((resolve, reject) => {
        reject(reason)
    })
}
MyPromise.all = function (myPromises) {
    return new MyPromise((resolve, reject) => {
        //如果没有传值 或 传的值不是数组，则reject错误，这里错误类型没有进行细分
        if (!myPromises || !Array.isArray(myPromises)) {
            reject(new TypeError('not iterable'));
            return;
        }
        // 如果传入的是空数组，则直接resolve
        if (myPromises.length == 0) {
            resolve();
        } else {
            let arr = [];//保存myPromises的结果
            let len = myPromises.length;
            let item;
            function addItem(value) {
                arr.push(value);
                //如果存入arr的长度与myPromises长度相同，说明已经遍历完myPromises，且myPromises中的实例都是fulfilled状态，
                //直接将resolve arr
                if (arr.length == myPromises.length) {
                    resolve(arr);
                }
            }
            for (let i = 0; i < len; i++) {
                item = myPromises[i];
                //如果是MyPromise的实例，如果实例是完成状态，则将值直接存入数组中，否则直接reject错误
                if (item instanceof MyPromise) {
                    item.then(value => {
                        //向arr中添加实例结果
                        addItem(value);
                    }, err => {
                        reject(err);
                    })
                } else {
                    //如果不是MyPromise实例，则将值转为MyPromise实例，输出数组中的顺序
                    MyPromise.resolve(item).then(value => {
                        addItem(value)
                    })
                }
            }
        }
    })
}
avatar
文章
阅读
粉丝