手写promise源码

// 静态声明promise的三种状态
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

// 处理resove函数返回的结果
const resovePromise = (promise, x, resolve, reject) => {
    // 如果返回自己本身抛出错误
    if (promise === x) {
        return reject(new TypeError("Chaining cycle detected for promise #<Promise>"))
    }
    if (x instanceof MyPromise) {
        // promise对象
        x.then(resolve, reject);
    } else {
        // 普通值
        resolve(x);
    }
}
class MyPromise {
    constructor(executor) {
        // 执行器错误时抛出错误
        try {
            executor(this.resolve, this.reject)
        } catch (error) {
            this.reject(error)
        }
    }
    // 设置刚开始状态
    status = PENDING
    // 成功之后的值
    value = undefined
    // 失败之后的原因
    reason = undefined
    // 成功回调
    successCallback = []
    // 失败回调
    failCallback = []
    resolve(value) {
        // 状态不可更改
        if (this.status !== PENDING) return
        // 将状态改为成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功回调是否存在 如果存在 调用
        // this.successCallback && this.successCallback(this.value)
        while (this.successCallback.length) {
            this.successCallback.shift()()
        }
    }
    reject(reason) {
        if (this.status !== PENDING) return
        // 将状态改为失败
        this.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 => value
        failCallback = failCallback ? failCallback : reason => reason
        let promise = new MyPromise((resolve, reject) => {
            if (this.status === FULFILLED) {
                // 异步处理使方法获取到声明中的promise
                setTimeout(() => {
                    try {
                        let x = successCallback(this.value)
                        // 判断x的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve
                        // 如果是promise对象 查看promise对象的返回结果
                        // 再根据promise对象的返回结果 决定调用resolve还是reject 
                        resovePromise(promise, x, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0);
            } if (this.status === REJECTED) {
                // 异步处理使方法获取到声明中的promise
                setTimeout(() => {
                    try {
                        let x = failCallback(this.reason)
                        // 判断x的值是普通值还是promise对象
                        // 如果是普通值 直接调用resolve
                        // 如果是promise对象 查看promise对象的返回结果
                        // 再根据promise对象的返回结果 决定调用resolve还是reject 
                        resovePromise(promise, x, resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0);
            } else {
                // 等待
                // 将成功回调和失败回调保存起来
                this.successCallback.push(() => {
                    // 异步处理使方法获取到声明中的promise
                    setTimeout(() => {
                        try {
                            let x = successCallback(this.value)
                            // 判断x的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve
                            // 如果是promise对象 查看promise对象的返回结果
                            // 再根据promise对象的返回结果 决定调用resolve还是reject 
                            resovePromise(promise, x, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0);
                });
                this.failCallback.push(() => {
                    // 异步处理使方法获取到声明中的promise
                    setTimeout(() => {
                        try {
                            let x = failCallback(this.reason)
                            // 判断x的值是普通值还是promise对象
                            // 如果是普通值 直接调用resolve
                            // 如果是promise对象 查看promise对象的返回结果
                            // 再根据promise对象的返回结果 决定调用resolve还是reject 
                            resovePromise(promise, x, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0);
                });
            }
        })
        return promise;
    }
    catch (failCallback) {
        // 用then来返回失败回调
       return this.then(undefined,failCallback);
    }
    finally(callback) {
        return this.then(value=>{
            // 封装成promise对象
           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((resove, reject) => {
            // 向返回数组中添加值
            function addData(key, value) {
                result[key] = value;
                index++
                // 如果赋值完之后,返回成功数组
                if (index === array.length) { resove(result) }
            }
            for (let i = 0; i < array.length; i++) {
                let current = array[i];
                if (current instanceof MyPromise) {
                    // promise对象
                    // 返回成功,赋值数组,失败返回原因
                    current.then(value => addData(value), reason => reject(reason));
                } else {
                    // 普通值
                    addData(i, array[i]);
                }
            }
            resove(result)
        })
    }
    // 包装成为promise
    static resolve(value){
        if(value instanceof MyPromise){
            return value;
        }
        return new MyPromise(resolve=>resolve(value));
    }

}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值