美文网首页
手写promise

手写promise

作者: 萘小蒽 | 来源:发表于2022-08-07 15:16 被阅读0次

    虽然一直在用这个api
    且之前也有做过promise的功课,
    但是面试让我手写实现promise
    可能面试鸡冻了,就这一个问题面试评级降了 少了4000大洋啊 = = ....
    不服气就手写各种了
    网上找到的promise大体状态的改变,函数的调用都OK。

    拆解
    1、promise传入function生成实例

    let myPromise = function (resolver) {
    let _this = this;
    if (resolver && typeof resolver !== 'function') {
         throw new Error(`myPromise resolver ${resolver} is not a function at new myPromise`);
     }
    }
    

    2、promise实例生成后,有三种状态、两个结果。
    有三个状态
    初始状态pending
    终态1:pending reovle=> fulfilled
    终态2:pending reject=> rejected

    let FULFILLED = 'fulfilled';
            let PENDING = 'pending';
            let REJECTED = 'rejected';
            let myPromise = function (resolver) {
                let _this = this;
                if (resolver && typeof resolver !== 'function') {
                    throw new Error(`myPromise resolver ${resolver} is not a function at new myPromise`)
                }
                this.status = PENDING;
                this.resolve = function (reove) {
                    if (_this.status === PENDING) {
                        _this.status = FULFILLED;
                        _this.err = '成功'
                    }
                }
                this.reject = function (reject) {
                    if (_this.status === PENDING) {
                        _this.status = REJECTED;
                        _this.err = '失败'
                    }
                }
    
               }
    

    以下是老版原型写法:

    const FULFILLED = 'fulfilled'; //成功
    const REJECTDE = 'rejected'; //失败
    const PENDING = 'pending'; //等待
    const newPromise = function (executor) {
        let _this = this;
        if (typeof executor !== 'function') {
            throw new Error(`${executor} is not a function`)
        }
        this.status = PENDING; // 状态
        this.value = undefined;//成功原因
        this.reason = undefined;//失败原因
        function resolve(value) {
            if (_this.status === PENDING) {
                _this.status = FULFILLED;
                _this.value = value;
            }
        }
        function reject(reason) {
            if (_this.status === PENDING) {
                _this.satatus = REJECTDE;
                _this.reason = reason;
            }
        }
        executor(resolve,reject)
    }
    newPromise.prototype.then = function (onFulfilled, onReject) {
       this.onFulfilled = onFulfilled;
        let _this = this;
        if (this.status === FULFILLED ) {
            onFulfilled(this.value);
        }
        if (this.status === REJECTDE) {
            onReject(this.reason) ; 
        }
    }
    

    完善一下promise的一些细节。
    1、Promise实例的状态变为Resolved,就会触发then方法绑定的回调函数。
    2、Promise的原型的一些方法 then catch支持链式调用。

    const FULFILLED = 'fulfilled'; //成功
    const REJECTDE = 'rejected'; //失败
    const PENDING = 'pending'; //等待
    const newPromise = function (executor) {
        let _this = this;
        if (typeof executor !== 'function') {
            throw new Error(`${executor} is not a function`)
        }
        this.status = PENDING; // 状态
        this.value = undefined;//成功原因
        this.reason = undefined;//失败原因
        function resolve(value) {
            if (_this.status === PENDING) {
                _this.status = FULFILLED;
                _this.value = value;
               _this.onFulfilled&&_this.onFulfilled(value);
               return _this
            }
        }
        function reject(reason) {
            if (_this.status === PENDING) {
                _this.satatus = REJECTDE;
                _this.reason = reason;
               _this.onReject&&_this.onReject(reason);
               return _this
            }
        }
        executor(resolve,reject)
    }
    newPromise.prototype.then = function (onFulfilled, onReject) {
        if (onFulfilled&&typeof onFulfilled!== 'function') {
            throw new Error(`${onFulfilled} is not a function`)
        }
       if (onReject&&typeof onFulfilled!== 'function') {
            throw new Error(`${onReject} is not a function`)
        }
        this.onFulfilled = onFulfilled;
        this.onReject = onReject;
        if (this.status === FULFILLED ) {
            onFulfilled(this.value);
            this.onFulfilled = null;
        }
        if (this.status === REJECTDE) {
            onReject(_this.reason) ;
            this.onReject = null;
        }
       return this
    }
    var example = new newPromise((resolve)=>{
      setTimeout(function(){resolve(1)},3000)    
    });
    example.then(res=>{console.log(res)});
    

    相关文章

      网友评论

          本文标题:手写promise

          本文链接:https://www.haomeiwen.com/subject/lyjfbrtx.html