手写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测试站点