简单实现Promise原理

const PENDING = 'PENDING';
const RESOLVED = 'RESOLVED';
const REJECTED = 'REJECTED';
// 对于不太经常更改的变量 定于为常量
function MyPromise(fn){
    //存一下this  因为在setTimeout中的resolve 调用中 resolve函数 this指向window
    var that = this;
    // 初始状态 
    that.state = PENDING;
    //接受的参数
    that.value = null;

    that.rejectCalbacks = [];
    that.resolveCallbacks = [];

    function resolve(value){
        if(that.state === PENDING){
            
            that.state = RESOLVED;
            that.value = value;
          
            that.resolveCallbacks.map( cb => cb(that.value));
        }
    }
    function reject(value){
        
        if(that.state === PENDING){
            
            that.state = REJECTED;
            that.value = value;

            that.rejectCalbacks.map( cb => cb(that.value));
        }
    }
    try{
        fn(resolve,reject);
    }catch(e){
        reject(this.value);
    }
}

MyPromise.prototype = {
    constructor:MyPromise,
    then(onFulFulled,onRejected){
        onFulFulled = typeof onFulFulled === 'function' ? onFulFulled : v => v;
        onRejected = typeof onRejected === 'function' ? onRejected : r => { 
            //直接抛出
            throw r;
          };
 
          if(this.state === PENDING){
              this.rejectCalbacks.push(onRejected);
              this.resolveCallbacks.push(onFulFulled);
              console.log(this.resolveCallbacks)
          }
          if(this.state === RESOLVED){
              onFulFulled(this.value);
          }
          if(this.state === REJECTED){
            onRejected(this.value);
        }
    }
}


//调用  参考eventLoop 执行机制  
new MyPromise((resolve,reject) => {
   // 异步宏任务 最后执行
    setTimeout(() => {
        if(Math.random() > 0.1){
            resolve('成功');
        }else{
            reject('傻哎');
        }
    },2000)
})
// Promise.then是微任务 但在这里手动实现 是一个同步任务  这里会将处理函数压入 reject 和resolve 状态数组中   
.then( ok => {
    console.log(ok)
})

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值