您是一名在古老迷失城市中探险的冒险家。您身处一间装饰华丽的房间中,四周布满了古老的壁画和雕塑。您发现有两个通道分别通向不同的方向,分别是:一个黑暗的通道和一个明亮的通道。
黑暗的通道中充满了神秘的气息,您能感受到其中蕴含的古老力量。您并不知道它会带您去哪里,但您可以感受到其中蕴藏的危险和未知。另一方面,明亮的通道看起来温暖舒适,您可以看到远处照耀的阳光。您能听到一些欢快的音乐声,似乎在那个方向上有一些人在欢庆。
现在,您需要在这两个通道之间做出选择。您会选择哪一个通道呢?您的选择将会影响您接下来的冒险之旅。
2、再来看一段神秘的小短片(该平台不能发布)3、这么久了还不进入正题先来了解几个单词,几个Promise的术语
●Promise的三个状态:pending(等待状态)、fulfilled(已成功状态)和jected(已失败状态)
●Promise的三个常用回调函数(咱说的是常用):
1.实例化对象时传入的回调函数
2.then方法的传入的两个回调函数
3.catch方法传入的一个回调函数
以作业为例,继续深入了解Promise
1、开始写作业,此时Promise状态为pending,我们可以理解为初始状态,也可以理解为业务处理中
2、作业完成情况有两种,一种是写完了,一种是被狗吃了
3、无论哪种情况,必须要告诉老师,成功了就通过solve通道暂存数据,同时会更改状态为成功fulfilled;失败了就通过ject通道暂存数据,同时修改状态为jected。
4、老师如何获取solve或ject通道传来的数据呢?可以使用Promise对象的.then方法获取solve或ject的结果,或者使用.catch方法获取ject通道的信息。
5、简单来一段代码看看
constp=newPromise(function(solve,ject){solve(通过成功通道存储数据)})//...如果不使用then,提取,则数据一直暂存在p对象中//提取结果p.then(function(val){console.log(val)})
6、这些写法都是固定的,建议使用promise之前一定要充分了解回调函数
7、咱们再升级一下,写作业用了5秒钟
constp1=newPromise(function(solve,ject){//写作业用了5秒钟,5秒钟之后,把成功的作业暂存到solve通道中setTimeout(()={solve(这是作业)},)})//上面代码中调用了solve的时候,then里面的回调函数才会触发,这里有个时间差或者时空差的感觉p1.then(function(val){console.log(val)})
8、再升级一下,这作业他也有被狗吃了的时候,我们假定5秒钟之外就被狗吃了,5秒钟之内就是完成的
constp2=newPromise(function(solve,ject){//生成一个1~6秒之间的随机数consttime=Math.random()*+setTimeout(()={if(time=){solve(成功交作业啦)}else{ject(`作业被狗吃了,耗费了${time秒}`)}},time)})//成功使用then来接,失败了怎么拿到参数呢?//用then的第二个参数来拿失败的参数p2.then(function(val){console.log(val)},function(err){console.log(估计是被狗吃了,err)})
9、除了then的第二个参数可以拿到失败的结果,还可以通过catch方法拿到结果,一会再讨论这两种用法的区别,先看catch的用法,注意这里需要连用
p2.then(function(val){console.log(val)}).catch((ason)={//输出失败原因,大概率是被狗吃了console.log(估计是被狗吃了,ason)})
10、再看一种常用的连用的写法
newPromise(function(solve,ject){//生成一个1~6秒之间的随机数consttime=Math.random()*+setTimeout(()={if(time=){solve(成功交作业啦)}else{ject(`作业被狗吃了,耗费了${time}秒`)}},time)}).then(function(val){console.log(val)}).catch((ason)={//输出失败原因,大概率是被狗吃了console.log(估计是被狗吃了,ason)})
11、一些需注意的地方
1.solve和ject只是一个形参的名字,对应实际的值是promise内部的函数,调用这两个其实调用的就是promise内部的某个函数而已,这个名字可以随便去改,例如
newPromise(function(ok,fail){//此时此刻形参叫ok,但实际代表的是promise内部函数ok(ojbk)}).then((s)={//promise内部会存储数据,传给s这个变量,此时s值就是ojbkconsole.log(s)})
2.newPromise(构造器的参数是一个函数),这个函数会同步执行,代码执行到这里的时候就会立即执行
12、小结
1.Promise通过构造函数同步执行,执行结果调用promise的内部函数存储,通常叫solve和ject,一个是成功时存储存储使用的通道,另一个是失败时存储的通道,无论存储到哪个通道中,都是写代码的人去定义的
2.then有两个参数,分别是两个函数类型的参数,第一个参数是在调用solve时会触发,第二个参数是在调用ject时触发
3.catch方法可以替代then的第二个参数,拿到ject结果
13、附赠then第二个参数和catch的区别
在then的第一个参数里面的代码,如果出现异常的时候,不用手动的try...catch,通过promise实例对象的.catch可以捕获then内出现的异常,但注意,catch不会捕获构造函数代码中的错误,来看例子
newPromise(function(ok,fail){setTimeout(()={//故意5秒后触发k的报错console.log(k)},)}).then((s)={console.log(s)}).catch(error={//这个时候,error是拿不到那个错误的,他不负责console.log(k)所在代码块中出现的错误console.log(error)})
再看一个catch方法能捕获什么地方的错误
大概就是这么个大概
二、为什么要这么用,图个啥~使用Promise的主要原因是他可以解决回调地狱(回调嵌套)问题,让代码变得更优雅,逻辑更清晰
举一个生活中的例子,早上起床第一件事是要穿拖鞋,第二件事是洗漱,第三件事是穿衣服,第四件事是查看“身手要钱”,第五件事是打开自家房门出去开车上班,每件事都需要串行,每一步与下一步都有关联关系
functionfoo(){//1、穿拖鞋开始setTimeout(()={//1、2秒后穿拖鞋完成//2、洗漱开始setTimeout(()={//2、2秒后洗漱完成//3、穿衣服开始setTimeout(()={//3、穿衣服完成//....不好意思看官,后边还有好几个步骤咱就意思一下,再写就吐了},2)},2)},2)}foo()
就写这几层吧,是不是太恶心了
newPromise((solve,ject)={//1、穿拖鞋setTimeout(()={solve(穿拖鞋搞定)},)}).then(val={//等待穿拖鞋完成后,会调用这个函数//2、洗漱//注意此处!!!,必须使用turn返回一个新的promise来完成链式调用constp=newPromise((solve,ject)={setTimeout(()={solve(洗漱搞定)},)})turnp}).then(val={//3、穿衣服,此处直接返回,没有使用中间变量turnnewPromise((solve,ject)={setTimeout(()={solve(穿衣服搞定)},)})}).then(val={//4、查看“身手要钱”turnnewPromise((solve,ject)={setTimeout(()={solve(查看“身手要钱”搞定)},)})}).then(val={//5、开车去上班//元气满满的一天})
就图这~
三、Promise其他方法那么多方法,不讲那么多,race、all什么的网上一抓一大把
说说语法糖await和async的用法先了解一个基础规则
●await必须修饰的是Promise对象
●await必须在async中使用
●await只能接收solve通道的结果,ject结果会导致报错
●await修饰的代码在执行时,代码是卡住的,类似于alert,这句代码不执行完,后边的代码不会向下执行,这也类似于线程同步执行的概念,这也是await有用之处
●async修饰的必须是函数
●async修饰后的函数在执行之后会转为Promise对象
看一段简单的代码
asyncfunctionfoo(){letk=awaitnewPromise(function(solve,ject){setTimeout(()={solve(qfedu)},)})console.log(k)}foo()
这样用倒是更麻烦,我们把要处理的事黏黏糊糊多弄一些试一试
asyncfunctionfoo(){letlevel1=awaitnewPromise((solve,ject)={//1、穿拖鞋setTimeout(()={solve(穿拖鞋搞定)},)})//拿着第一步的结果,去第二步进行操作letlevel2=awaitnewPromise((solve,ject)={setTimeout(()={solve(level1+洗漱搞定)},)})letlevel3=awaitnewPromise((solve,ject)={setTimeout(()={solve(level2+穿衣服搞定)},)})letlevel4=awaitnewPromise((solve,ject)={setTimeout(()={solve(level3+查看“身手要钱”搞定)},)})console.log(level4+,之后开车去上班,元气满满的一天)}foo()
输出结果:
这样代码看起来更加简洁,当然要重点考虑的问题是在整个从上到下的调用过程中,任何一个环节出现问题,都会影响下面的代码
再来,我们把代码聚焦到foo()方法调用之前和调用之后
console.log(1)foo()//这个会输出穿拖鞋搞定洗漱搞定穿衣服搞定查看“身手要钱”搞定......等console.log(2)
思考一下,程序输出的顺序
注意,使用async包裹的代码,属于异步代码,会在同步代码之后执行
我们给按钮添加一个点击事件,看点击按钮如何让程序使用await顺序执行
asyncfunctionfoo(){letlevel1=awaitnewPromise((solve,ject)={//1、穿拖鞋setTimeout(()={solve(穿拖鞋搞定)},)})//拿着第一步的结果,去第二步进行操作letlevel2=awaitnewPromise((solve,ject)={setTimeout(()={solve(level1+洗漱搞定)},)})letlevel3=awaitnewPromise((solve,ject)={setTimeout(()={solve(level2+穿衣服搞定)},)})letlevel4=awaitnewPromise((solve,ject)={setTimeout(()={solve(level3+查看“身手要钱”搞定)},)})console.log(level4+,之后开车去qfedu上班,元气满满的一天)}window.onclick=foo;//或者是window.onclick=asyncfunction(){//todo...//awaitnewPromise...//awaitnewPromise...//awaitnewPromise...//...}
实际场景中,await与async通常用来处理ajax请求类代码,让代码更简洁,再次强调,await只接收solve结果,注意ject和error的错误要使用try...catch...处理异常。
今日的好程序员的分享就到这里,想了解更多,欢迎评论区探讨,或者dd小源~