从简开始,逐步深入 写一个自己的Promise

一、分析Promise。

step one:分析使用

先看看Promise的一个简单使用过程(如下代码):通过new关键字创建Promise对象,初始化时传入一个需要执行的函数,该函数有两个方法参数,分别是成功时需要调用的方法resolve,用于触发之后的成功回调;和失败时要调用的方法reject,用于触发后面的失败回调。此时new Promise(…)语句成功创建了一个Promise实例对象,这个实例对象里面有个then方法,里面传入两个回调函数参数,一个是成功的回调函数,一个是失败回调。

new Promise((resolve,reject)=>{
	if(/*成功*/){
	//成功调用resolve,并传入结果
		resolve('success')
	}else{
	//失败则调用reject方法,并传入信息
		reject('fail')
	}
}).then(functino(res){
//成功回调
},function(err){
//失败回调
})

step tow:分析原理

由上面的使用可以得出,Promise本质上是一个构造函数,初始化对象时传入一个需要执行的函数参数,这个函数里有两个resolve和reject,分别用于触发成功回调和失败回调。promise实例对象上有一个then方法用于注册成功时需要执行的事件和失败时需要执行的事件。
深剖一下,Promise一共有三个状态,分别是pending、resolve(fulfilled)、rejected,分别表示等待状态、成功状态、失败状态,状态的转换只能由pending状态到余下的两个状态,且不可逆,一但状态改变就不会在变,这意味着,之前的resolve函数和rejet函数其中一个执行了,后面语句中如果再次调用了没有意义,不会有什么结果,这一点大家亲自试一下就知道了。

step three:编写

好,理论有了,开始根据理论编写代码

const { rejects } = require("assert");

//promise的三个状态
const PENDING='pending';
const FULFILLED='fulfilled';
const REJECTED='rejected';
//创建IPromise构造函数,execute为被执行的函数
function IPromise(execute){
    //promise的状态
    this.state=PENDING;
    //成功回调函数和失败回调函数默认为空,这里目前暂时直接用变量存储,后期这里需要用数组存储,因为这里应该要是一个待执行的事件列表,细节在之后的分析中解释,现在先不用理会这个概念,我们一步一步来。
    this.successCallback=null;
    this.failCallback=null;
    //触发成功回调的函数
    let resolve=(res)=>{
        //如果状态还处于pending状态,则将状态改为fulfilled状态,如果已经不是pending状态,根据原Promise的特性,无法在改变,所以直接return退出
        if(this.state==PENDING){
            this.state=this.FULFILLED;
        }else{
            return;
        }
        //由于Promise的成功回调是异步的,所以用setTimeout来使其从同步变为异步
        setTimeout(()=>{
            if(this.successCallback){
                this.successCallback(res);
            }
        })
        
    }
    //用于触发失败回调的函数
    let reject=(err)=>{
        //同理
        if(this.state==PENDING){
            this.state=this.REJECTED;;
        }else{
            return;
        }
        //setTimeout与上面同理
        setTimeout(()=>{
            if(this.failCallback){
                this.failCallback(err);
            }
        })
    }
    //注册失败与成功的回调事件的函数
    this.then=(successCallback,failCallback)=>{
        this.successCallback=successCallback;
        this.failCallback=failCallback;
    }
    //一切准备就绪,开始执行,这里还要做一下try catch处理,防止待执行的函数里有报错,中断函数的执行,要严谨。
    try{
        execute(resolve,reject);
    }catch(e){
        //报错的化直接调用这个函数执行错误回调。
        rejects(e)
    }
}

未完待续…

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值