手写promise

2022-08-07  本文已影响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)});
上一篇下一篇

猜你喜欢

热点阅读