手写promise

40 阅读1分钟

【Promise】手写实现方法 手写promise的两种实现方法 1、class实现 2、函数实现 手写promise,首先要确认好promise的状态,主要有三种:pending、filfulled、rejected,其次是定义好filfulled的返回值value跟rejected的返回值reason,然后是resolve跟reject方法实现status改变及返回值更新,最后是then的实现,为promise的回调。

// 注意:对于异步事件使用事件订阅发布实现监听

1、class实现

//实现promise
class _promise {

    constructor(excutor) {
        var self = this;
        this.status = 'pending';
        this.value = null;
        this.reason = null;

        //事件缓存列表
        this.onFilfulledFns = []
        this.onRejectedFns = []

        //resolve
        function resolve(value) {
            if (self.status === 'pending') {
                self.value = value;
                self.status = 'filfulled';
                //事件发布
                self.onFilfulledFns.forEach(fn => fn(value))
            }
        }
        //reject
        function reject(reason) {
            if (self.status === 'pending') {
                self.value = reason;
                self.status = 'rejected';
                //事件发布
                self.onRejectedFns.forEach(fn => fn(reason))
            }
        }

        //执行器
        try {
            excutor(resolve, reject)
        } catch (err) {
            this.reject(err)
        }
    }
    //then
    then(onFilfulled, onRejected) {
        if (this.status === 'pending') {
            //事件订阅
            this.onFilfulledFns.push(onFilfulled);
            this.onRejectedFns.push(onRejected)
        } else if (this.status === 'filfulled') {
            onFilfulled(this.value)
        } else {
            onRejected(this.reason)
        }
    }
}

2、函数实现

/**
 *
 * @param {*} excutor 执行器
 */
function MyPromise(excutor) {

    let self = this;
    this.status = 'pending';
    this.value = null;
    this.reason = null;

    //事件缓存
    this.fulfilledFns = [];
    this.rejectedFns = [];
    // 成功响应
    function resolve(value) {
        if (self.status === 'pending') {
            self.value = value;
            self.status = 'fulfilled';
            //事件发布
            self.fulfilledFns.forEach(fn => fn(value))
        }
    }
    // 失败事件
    function reject(reason) {
        if (self.status === 'pending') {
            self.reason = reason;
            self.status = 'rejected';
            //事件发布
            self.rejectedFns.forEach(fn => fn(reason))
        }
    }

    //执行器
    try {
        excutor(resolve, reject)
    } catch (err) {
        reject(err)
    }
}

//then
MyPromise.prototype.then = function (onFulfilled, onRejected) {
    let self = this;
    //异步事件订阅
    if (self.status === 'pending') {
        self.fulfilledFns.push(onFulfilled)
        self.rejectedFns.push(onRejected)
    } else if (self.status === 'fulfilled') {
        onFulfilled(self.value)
    } else {
        onRejected(self.reason)
    }

}

let demo = new MyPromise((resolve, reject) => {
    console.log('小伙很认真')
    setTimeout(() => {
        // 异步执行
        resolve(1)
    }, 1000);
})

demo.then(data => {
    console.log(data,'ll')
})