手写promise

///////////////////////////////////
/////1. MyPromise构造函数///////////
//////////////////////////////////

/**
 * @param func 是一个函数。
 * 使用例子：
 * let myPromise = new MyPromise((res,rej) = >{
 *      // 这里面可以包含异步操作
 *      setTimeOut(()=>{
 *          res({id:1,name:'beaster'})
 *      },3000)
 * })
 * 这里res与rej就是MyPromise构造函数里面的两个函数。
 */
function MyPromise(func) {
    // 避免this指向不明
    let self = this;
    // myPromise运行之后的值
    self.value = null;
    // myPromise的状态，pending,fullfill,reject。初始化为pending
    self.status = 'pending';
    // 如果myPromise的状态还是pending时，就调用了then，then的参数（是一个函数）是不会立即执行的，所以需要先保存起来
    self.onfullfill = [];
    // 如果myPromise的状态还是pending时，就调用了then，then的参数（是一个函数）是不会立即执行的，所以需要先保存起来
    self.onreject = [];
    /**
     * 修改myPromise的状态为fullfill
     */
    function resolve(value) {
        self.value = value;
        self.status = 'fullfill';

        /* 指向self.onfullfill与self.onreject中的方法 */
        self.onfullfill.forEach((onfullfill) => {
            onfullfill(self.value);
        })
    }
    /**
     * 修改myPromise的状态为reject
     */
    function reject(reason) {
        self.value = reason;
        self.status = 'reject';
 		self.onreject.forEach((onreject) => {
            onreject(self.value);
        })
    }

    // 将resolve，reject传递给异步操作，让异步操作改变promise的状态与value
    func(resolve, reject);
}

///////////////////////////////////
/////2. MyPromise的then方法/////////
///////////////////////////////////

/**
 * @param onfullfill 当myPromise状态fullfill时调用的函数
 * @param onreject 当myPromise状态为reject时调用的函数
 * 使用例子：
 * myPromise.then((value)=> {
 *      console.log(value)
 * },(value)=>{
 *      console.log(value)
 * })
 */
MyPromise.prototype.then = function (onfullfill, onreject) {
    let self = this;
    /* 将onfullfill,onreject保存起来 */
    if (self.status == 'pending') {
        self.onfullfill.push(onfullfill);
        self.onreject.push(onreject);
    }
    if (self.status == 'fullfill') {
        onfullfill(self.value);
    }
    if (self.status == 'reject') {
        onreject(self.value);
    }
}


///////////////////////////////////////////////////////////////////////////////////////////
/////2.1 MyPromise的then方法进阶（这里我们姑且把then方法取另外一个名字then1与上面的then方法区分开）///
/////Promise的then方法是可以链式调用的                                                     ////
///////////////////////////////////////////////////////////////////////////////////////////


MyPromise.prototype.then1 = function (onfullfill, onreject) {
    let self = this;
    /*then1方法中两个回调函数可以是可选参数 */
    onfullfill = typeof onfullfill == 'function' ? onfullfill : val => val
    onreject = typeof onreject == 'function' ? onreject : val => val
    // Promise的then方法返回的是一个Promise对象。所以我们返回promise2(这个promse2是立即执行的)
    let promise2 = new MyPromise((resolve, reject) => {
        /* 将onfullfill,onreject保存起来 */
        if (self.status == 'pending') {
            self.onfullfill.push(onfullfill);
            self.onreject.push(onreject);
        }
        if (self.status == 'fullfill') {
            /*promise变成异步的 */
            setTimeout(() => {
                let x = onfullfill(self.value);
                resolvePromise(x, promise2, resolve, reject)
            }, 0);
        }
        if (self.status == 'reject') {
            /*promise变成异步的 */
            setTimeout(() => {
                let x = onreject(self.value);
                resolvePromise(x, promise2, resolve, reject)
            }, 0);
        }
    })
    /**
     * 处理onfullfill,onreject的返回值。如果是一个基本类型，那么直接修改promise2的状态。如果是一个对象，就把它当成一个MyPromise,等它的异步操作完成之后，才改变promise2的状态
     * @param {*} x 当前promise执行结束返回的值
     * @param {*} promise2 
     * @param {*} resolve 用来改变promise2的状态
     * @param {*} reject  用来改变promise2的状态
     * 
     */
    function resolvePromise(x, promise2, resolve, reject) {
        /*避免promise2,等于x,造成循环引用  */
        if (x === promise2) {
            reject(new Error('循环引用'));
        }

        /**是一个对象时 */
        if (x != null && (typeof x == 'object' || typeof x == 'function')) {
            if (x instanceof MyPromise) {
                x.then1(res => {
                    // 递归调用，改变promise2的状态
                    resolePromise(res, resolve, reject);
                }, rej => {
                    // 递归调用，改变promise2的状态
                    resolePromise(rej, resolve, reject)
                })
            } else {
                reject('返回值必须为基本类型或者MyPromise')
            }
        } else {// 是一个基本类型
            resolve(x);
        }
    }
    return promise2;
}


///////////////////////////////////////////////////////////////////////////////////////////
/////3. 扩展方法：promise有一个catch方法，reject,resole方法。所以MyPromise也有               ////
///////////////////////////////////////////////////////////////////////////////////////////
MyPromise.prototype.catch = function (onrejected) {
    return this.then1(null, onrejected)
}
MyPromise.reject = function (reason) {
    return new MyPromise((resolve, reject) => {
        reject(reason)
    })
}
MyPromise.resolve = function (value) {
    return new MyPromise((resolve, reject) => {
        resolve(value);
    })
}

参考文献

前端面试考点之—手写Promise
只会用？一起来手写一个合乎规范的Promise
Promise测试站点