手写 Promise 源码【了解其中逻辑】

于 2020-12-01 14:52:20 发布
阅读量73 收藏
点赞数
分类专栏： Promise 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37883657/article/details/109449500
版权

Promise 类核心逻辑实现

思路步骤：
1、Promise 是一个类，在执行这个类的时候，需要传入一个执行器进去，执行器会立即执行

2、Promise 有三种状态，分别是：成功 fulfilled、失败 rejected、等待 pending

pending 可以变成 fulfilled

pending 可以变成 rejected

       一旦状态确定，就不可以更改

3、resolve 和 reject 函数是用来变更状态的

resolve：fulfilled

reject：rejected

4、then方法内部做的事情就判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败回

5、then成功回调有一个参数 表示成功之后的值 then失败回调有一个参数 表示失败后的原因

有两个文件：myPromise.js 文件、index.js 文件
 

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
    //reject('失败')
})

promise.then(value => {
    console.log(value)
}, reason => {
    console.log(reason)
})


// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason
    }
    then (successCallback, failCallback) {
        //判断状态
        if (this.status === FULFILLED) {
            successCallback(this.value)
        }else if (this.status === REJECTED) {
            failCallback(this.reason)
        }
    }
}

module.exports = MyPromise;

Promise 类中加入异步逻辑

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    setTimeout(function () { //这里是异步
        resolve('成功')
    },2000)

    //reject('失败')
})

promise.then(value => {
    console.log(value)
}, reason => {
    console.log(reason)
})


// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = undefined
    //失败回调函数
    failCallback = undefined

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason
    }
    then (successCallback, failCallback) {
        //判断状态
        if (this.status === FULFILLED) {
            successCallback(this.value)
        }else if (this.status === REJECTED) {
            failCallback(this.reason)
        } else {
             //等待
            //将成功回调和失败会掉存储起来
            this.successCallback = successCallback;
            this.failCallback = failCallback;
        }
    }
}

module.exports = MyPromise;

实现 then 方法多次调用添加多个处理函数

思路步骤：

6. 同一个promise对象下面的then方法是可以被调用多次的

7. then方法是可以被链式调用的, 后面then方法的回调函数拿到值的是上一个then方法的回调函数的返回值

 

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    setTimeout(function () { //这里是异步
        resolve('成功')
    },2000)

    //reject('失败')
})

promise.then(value => {
    console.log(1)
    console.log(value)
}, reason => {
    console.log(reason)
})

promise.then(value => {
    console.log(2)
    console.log(value)
}, reason => {
    console.log(reason)
})

promise.then(value => {
    console.log(3)
    console.log(value)
}, reason => {
    console.log(reason)
})


// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value
        
        //判断成功回调是否存在 如果存在 就调用
        while(this.successCallback.length) this.successCallback.shift()(this.value)
        
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason
        
        //判断成功回调是否存在 如果存在 就调用
        while(this.failCallback.length) this.failCallback.shift()(this.reason)
    }
    then (successCallback, failCallback) {
        //判断状态
        if (this.status === FULFILLED) {
            successCallback(this.value)
        }else if (this.status === REJECTED) {
            failCallback(this.reason)
        } else {
             //等待
            //将成功回调和失败会掉存储起来
            this.successCallback.push(successCallback);
            this.failCallback.push(failCallback);
        }
    }
}

module.exports = MyPromise;

实现 then 方法的链式调用（一）

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    setTimeout(function () {
        resolve('成功')
    },2000)
    //reject('失败')
})

promise.then(value => {
    console.log(value);
    return 100;
}).then(value => {
    console.log(value)
})


// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()(this.value)
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()(this.reason)
    }
    then (successCallback, failCallback) {
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                let x = successCallback(this.value);
                resolve(x)
            }else if (this.status === REJECTED) {
                failCallback(this.reason)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(successCallback);
                this.failCallback.push(failCallback);
            }    
        });

        return promise2;
        
    }
}

module.exports = MyPromise;

 实现 then 方法的链式调用（二）

// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()(this.value)
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()(this.reason)
    }
    then (successCallback, failCallback) {
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                let x = successCallback(this.value);
                // 判断 x 的值是普通值还是promise对象
                // 如果是普通值 直接调用resolve 
                // 如果是promise对象 查看promsie对象返回的结果 
                // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                resolvePromise(x, resolve, reject)
            }else if (this.status === REJECTED) {
                failCallback(this.reason)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(successCallback);
                this.failCallback.push(failCallback);
            }    
        });

        return promise2;
        
    }
}

function resolvePromise (x, resolve, reject) {
    if (x instanceof MyPromise) {
        //promise对象
        //x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

module.exports = MyPromise;

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
    //reject('失败')
})

function other () {
    return new MyPromise((resolve, reject) => {
        resolve('other')
    })
}

promise.then(value => {
    console.log(value);
    return other();
}).then(value => {
    console.log(value)
})

  then 方法链式调用识别 Promise 对象自返回

// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        executor(this.resolve, this.reject)
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()(this.value)
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()(this.reason)
    }
    then (successCallback, failCallback) {
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    let x = successCallback(this.value);
                    // 判断 x 的值是普通值还是promise对象
                    // 如果是普通值 直接调用resolve 
                    // 如果是promise对象 查看promsie对象返回的结果 
                    // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                    resolvePromise(promise2, x, resolve, reject)
                },0)
            }else if (this.status === REJECTED) {
                failCallback(this.reason)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(successCallback);
                this.failCallback.push(failCallback);
            }
        });
        return promise2;
    }
}

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        //promise对象
        //x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

module.exports = MyPromise;

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
    //reject('失败')
})

let p1 = promise.then(value => {
    console.log(value);
    return p1;
});

p1.then(value => {
    console.log(value)
}, reason => {
    console.log(reason.message)
})

//成功
//Chaining cycle detected for promise #<Promise>

捕获错误及 then 链式调用其他状态代码补充 

 

// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        try  {
            executor(this.resolve, this.reject)
        } catch (e){
            this.reject(e)
        }
        
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()()
    }
    then (successCallback, failCallback) {
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x = successCallback(this.value);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            }else if (this.status === REJECTED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x =  failCallback(this.reason);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x = successCallback(this.value);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
                this.failCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x =  failCallback(this.reason);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
            }
        });
        return promise2;
    }
}

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        //promise对象
        //x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

module.exports = MyPromise;

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功')
    }, 2000);
   
    //reject('失败')
})


promise.then(value => {
    console.log(value)
   // throw new Error('then error')
   return 'aaa'
}, reason => {
    console.log(reason)
    return 10000;
}).then(value => {
    console.log(value)
}, reason => {
    console.log(reason.message) 
})

//成功
//aaa

 将 then 方法的参数变成可选参数 

// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        try  {
            executor(this.resolve, this.reject)
        } catch (e){
            this.reject(e)
        }
        
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()()
    }
    then (successCallback, failCallback) {
        successCallback = successCallback ? successCallback : value => this.value;
        failCallback = failCallback ? failCallback : resson => {throw reason};
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x = successCallback(this.value);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            }else if (this.status === REJECTED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x =  failCallback(this.reason);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x = successCallback(this.value);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
                this.failCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x =  failCallback(this.reason);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
            }
        });
        return promise2;
    }
}

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        //promise对象
        //x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

module.exports = MyPromise;

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
    //reject('失败')
})

promise.then().then().then(value => console.log(value), reason => console.log(reason)) //成功

 Promise.all 方法的实现

// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        try  {
            executor(this.resolve, this.reject)
        } catch (e){
            this.reject(e)
        }
        
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()()
    }
    then (successCallback, failCallback) {
        successCallback = successCallback ? successCallback : value => this.value;
        failCallback = failCallback ? failCallback : resson => {throw reason};
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x = successCallback(this.value);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            }else if (this.status === REJECTED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x =  failCallback(this.reason);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x = successCallback(this.value);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
                this.failCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x =  failCallback(this.reason);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
            }
        });
        return promise2;
    }
    static all (array) {
        let result = [];
        let index = 0;
        return new MyPromise((resolve, reject) => {
            function addData (key, value) {
                result[key] = value;
                index++;
                if (index === array.length) {
                    resolve(result)
                }
            }
            for (let i = 0; i< array.length; i++) {
                let current = array[i];
                if (current instanceof MyPromise) {
                    //promise 对象
                    current.then(value => addData(i, value), reason => reject(reason))
                } else {
                    //普通值
                    addData(i, array[i])
                }
            }
        })
    }
}

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        //promise对象
        //x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

module.exports = MyPromise;

//index.js文件
const MyPromise = require('myPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
    //reject('失败')
})

function p1 () {
    return new MyPromise((resolve, reject) =>{
        setTimeout(function () {
            resolve('p1')
          }, 2000)
        })
}

function p2 () {
    return new MyPromise((resolve, reject) =>{
        reject('失败')
    })
}

promise.all(['a','b',p1(),p2(),'c'])
    .then(value => {

    }, reason =>{
        console.log(reason)
    })

 Promise.resolve 方法的实现

// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        try  {
            executor(this.resolve, this.reject)
        } catch (e){
            this.reject(e)
        }
        
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()()
    }
    then (successCallback, failCallback) {
        successCallback = successCallback ? successCallback : value => this.value;
        failCallback = failCallback ? failCallback : resson => {throw reason};
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x = successCallback(this.value);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            }else if (this.status === REJECTED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x =  failCallback(this.reason);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x = successCallback(this.value);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
                this.failCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x =  failCallback(this.reason);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
            }
        });
        return promise2;
    }
    static all (array) {
        let result = [];
        let index = 0;
        return new MyPromise((resolve, reject) => {
            function addData (key, value) {
                result[key] = value;
                index++;
                if (index === array.length) {
                    resolve(result)
                }
            }
            for (let i = 0; i< array.length; i++) {
                let current = array[i];
                if (current instanceof MyPromise) {
                    //promise 对象
                    current.then(value => addData(i, value), reason => reject(reason))
                } else {
                    //普通值
                    addData(i, array[i])
                }
            }
        })
    }

    static resolve (value) {
        if (value instanceof MyPromise) return value;
        return new MyPromise(resolve => resolve(value))
    }
}

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        //promise对象
        //x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

module.exports = MyPromise;

//index.js文件
const MyPromise = require('myPromise')

MyPromise.resolve(100).then(value => console.log(value)) //100

finally 方法的实现

 

// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        try  {
            executor(this.resolve, this.reject)
        } catch (e){
            this.reject(e)
        }
        
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()()
    }
    then (successCallback, failCallback) {
        successCallback = successCallback ? successCallback : value => this.value;
        failCallback = failCallback ? failCallback : resson => {throw reason};
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x = successCallback(this.value);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            }else if (this.status === REJECTED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x =  failCallback(this.reason);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x = successCallback(this.value);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
                this.failCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x =  failCallback(this.reason);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
            }
        });
        return promise2;
    }
    finally (callback) {
        return this.then(value => {
            return MyPromise.resolve(callback()).then(() => value)
        }, reason => {
            return MyPromise.resolve(callback()).then(() => { throw reason })
        })
    }
    static all (array) {
        let result = [];
        let index = 0;
        return new MyPromise((resolve, reject) => {
            function addData (key, value) {
                result[key] = value;
                index++;
                if (index === array.length) {
                    resolve(result)
                }
            }
            for (let i = 0; i< array.length; i++) {
                let current = array[i];
                if (current instanceof MyPromise) {
                    //promise 对象
                    current.then(value => addData(i, value), reason => reject(reason))
                } else {
                    //普通值
                    addData(i, array[i])
                }
            }
        })
    }

    static resolve (value) {
        if (value instanceof MyPromise) return value;
        return new MyPromise(resolve => resolve(value))
    }
}

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        //promise对象
        //x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

module.exports = MyPromise;

//index.js文件
const MyPromise = require('myPromise')

function p1 () {
    return new MyPromise((resolve, reject) =>{
        setTimeout(function () {
            resolve('p1')
          }, 2000)
        })
}

function p2 () {
    return new MyPromise((resolve, reject) =>{
        resolve('p2 resolve')
    })
}

p2().finally(() => {
    cnsole.log('finally');
    return p1();
}).then(value => {
    console.log(vlaue)
}, reason => {
    console.log(reason)
})

//finally
//2秒之后出现的结果：p2 resolve

catch 方法的实现

// myPromise.js文件
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled';//成功
const REJECTED = 'rejected';//失败

class MyPromise {
    constructor(executor) {
        try  {
            executor(this.resolve, this.reject)
        } catch (e){
            this.reject(e)
        }
        
    }
    //promise状态
    status = PENDING
    //成功之后的值
    value = undefined
     //成功之后的值
    reason = undefined
    //成功回调函数
    successCallback = []
    //失败回调函数
    failCallback = []

    resolve = value => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = FULFILLED;
        this.value = value

        //判断成功回调是否存在 如果存在 就调用
        //this.successCallback && this.successCallback(this.value)
        while(this.successCallback.length) this.successCallback.shift()()
    }
    reject = reason => {
        if(this.status !== PENDING)
        //将状态更改为成功
        status = REJECTED;
        this.reason = reason

        //判断失败回调是否存在 如果存在 就调用
        //this.failCallback && this.failCallback(this.reason)
        while(this.failCallback.length) this.failCallback.shift()()
    }
    then (successCallback, failCallback) {
        successCallback = successCallback ? successCallback : value => this.value;
        failCallback = failCallback ? failCallback : resson => {throw reason};
        let promise2 = new MyPromise((resolve, reject) => {
            //判断状态
            if (this.status === FULFILLED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x = successCallback(this.value);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            }else if (this.status === REJECTED) {
                setTimeout (function () { //使用定时器是为了让它变为异步
                    try {
                        let x =  failCallback(this.reason);
                        // 判断 x 的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve 
                        // 如果是promise对象 查看promsie对象返回的结果 
                        // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                },0)
            } else {
                //等待
                //将成功回调和失败会掉存储起来
                this.successCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x = successCallback(this.value);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
                this.failCallback.push(() => {
                    setTimeout (function () { //使用定时器是为了让它变为异步
                        try {
                            let x =  failCallback(this.reason);
                            // 判断 x 的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve 
                            // 如果是promise对象 查看promsie对象返回的结果 
                            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    },0)
                });
            }
        });
        return promise2;
    }
    finally (callback) {
        return this.then(value => {
            return MyPromise.resolve(callback()).then(() => value)
        }, reason => {
            return MyPromise.resolve(callback()).then(() => { throw reason })
        })
    }
    catch (failCallback) {
        return this.then(undefined, failCallback)
    }
    static all (array) {
        let result = [];
        let index = 0;
        return new MyPromise((resolve, reject) => {
            function addData (key, value) {
                result[key] = value;
                index++;
                if (index === array.length) {
                    resolve(result)
                }
            }
            for (let i = 0; i< array.length; i++) {
                let current = array[i];
                if (current instanceof MyPromise) {
                    //promise 对象
                    current.then(value => addData(i, value), reason => reject(reason))
                } else {
                    //普通值
                    addData(i, array[i])
                }
            }
        })
    }

    static resolve (value) {
        if (value instanceof MyPromise) return value;
        return new MyPromise(resolve => resolve(value))
    }
}

function resolvePromise (promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        //promise对象
        //x.then(value => resolve(value), reason => reject(reason))
        x.then(resolve, reject)
    } else {
        //普通值
        resolve(x)
    }
}

module.exports = MyPromise;

//index.js文件
const MyPromise = require('myPromise')

function p2 () {
    return new MyPromise((resolve, reject) =>{
        //resolve('成功')
        reject('失败')
    })
}

p2()
    .then(value => console.log(value))
    .catch(reason => console.log(reason))
    //失败

 

Daisy__yangyang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值