JavaScript 手动封装一个Promise

首先肯定是先得掌握Promises/A+规范啦~~~

1.实现简单的同步代码

①原生promise例子
在这里插入图片s
这里不解释event loop的概念了,有兴趣可以去翻阅我的这篇文章从浏览器中的Event Loop(事件循环)机制探索JavaScript异步

简要摘抄规范中Promise的状态以及Promise.then()方法的介绍
Promise States:
	A promise must be in one of three states: pending, fulfilled, or rejected
	1.When pending, a promise:
		1.1.may transition to either the fulfilled or rejected state
	2.When fulfilled, a promise:
		2.1.must not transition to any other state
		2.2.must have a value, which must not change
	3.When rejected, a promise:
		3.1.must not transition to any other state
		3.2.must have a reason, which must not change
		
The then Method:
	A promise must provide a then method to access its current or eventual value or reason
	A promise’s then method accepts two arguments: promise.then(onFulfilled, onRejected)
	....
	1.Both onFulfilled and onRejected are optional arguments:
		1.1 If onFulfilled is not a function, it must be ignored
		1.2 If onRejected is not a function, it must be ignored
	2.If onFulfilled is a function:
		2.1 it must be called after promise is fulfilled, with promise’s value as its first argument
		2.2 it must not be called before promise is fulfilled
		2.3 it must not be called more than once
	3.If onRejected is a function:
		3.1 it must be called after promise is rejected, with promise’s reason as its first argument
		3.2 it must not be called before promise is rejected
		3.3 it must not be called more than once
	4.onFulfilled and onRejected must be called as functions
	5.then may be called multiple times on the same promise
		5.1 If/when promise is fulfilled, all respective onFulfilled callbacks must execute in the order of their originating calls to then 
		5.2 If/when promise is rejected, all respective onRejected callbacks must execute in the order of their originating calls to then
	6.then must return a promise
	...

②自定义MyPromise:
(1.new MyPromise后的实例具有状态, 默认状态是等待,当执行器调用resolve后, 实例状态为成功状态;当执行器调用reject后,实例状态为失败状态
2.then中有两个参数 ,把第一个参数叫做then的成功回调,把第二个参数叫做then的失败回调,这两个参数也都是函数,当执行器调用resolve后,then中第一个参数函数会执行[with promise’s value as its first argument];当执行器调用reject后,then中第二个参数函数会执行[with promise’s reason as its first argument]
)
在这里插入图片描述
尝试使用一下这个MyPromise:
在这里插入图片描述

小结:和原生Promise还是有不同的,就是end那条语句的打印顺序,所以我们进一步完善MyPromise

2.实现异步处理和一个实例多次调用then方法代码

①没有实现MyPromise异步处理时测试结果:
在这里插入图片描述
出现这种结果的原因:(不打印success:data1)
1.对于异步情况,当代码执行到了p.then() 的时候,执行器方法中的resolve(‘data1’)被setTimeout放到了异步任务队列中
2.也就是说此时实例p的状态还是默认状态,没有改变,那么我们此时并不知道要去执行then中的第一个参数(成功回调)还是第二个参数(失败回调)

解决方法:
在不知道哪个回调会被执行的情况下,就先把这两个回调函数保存起来,等到时机成熟,确定调用哪个函数的时候,再拿出来调用

②实现MyPromise的异步处理:
在这里插入图片描述
新的MyPromise运行结果如下,先打印start和end,两秒后一起打印的两个 success:data1在这里插入图片描述

3.实现链式调用代码

还没写好 ,,,我要去看妇联4去了!!!!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值