不多说,这2个都是写异步的没毛病。
长期用,但从未系统梳理过,所以特此将它们的用法原理都整理下。下边我会先梳理它们的使用方法,最后讲讲原理。
Promise:
promise的三个状态:
1:pending (未决)
2:resolve(处理成功)
3:reject(处理失败)
promise三种常规用法:
1:串行 (避免回调地狱)-- new Promise().then().then()...
2:并行(适用不需要阻塞的,无任何耦合依赖关系的多个异步任务)-- Promise.all()
3:并行竞速(时间控制:如超时。接口响应速度测试)-- Promise.race()
1:串行 new Promise().then().then()...
这个很好理解,链式调用,避免回调地狱。看下边例子
add()完成之后回调了doubleMutiply然后在回调了reduce,一层层的回调嵌套,看起来是不是理解需要一点点时间,这样的回调嵌套代码并不方便阅读。所以我们可以使用new Promise().then()的链式调用来书写这样的回调嵌套。看下边代码
这样逻辑是不是就很清晰了。
2:并行 Promise.all([async1, async3, async3...]).then()
1:有多个并行异步任务,相互之间无依赖,不需要阻塞。
2:传递参数为Promise对象数组。
3:返回结果 :
● 所有Promise任务都执行成功,返回结果为一个数组,结果数组与入参数组任务一一对应。
● Promise任务数组中只要有一个任务执行失败,返回结果就是失败的,结果为最先失败的那个任务的返回信息。
看下边例子
3:竞速 Promise.race([async1, async2, async3...])
1:主要用于时间控制,如超时,多个任务测速等。
2:入参为Promise对象数组。
3:返回结果以最快执行完毕的那个任务为准。
接口请求超时设置应用
Async:
1:async出现在函数function之前,标志着这个函数是一个异步函数,不阻塞该函数后边的代码执行。
2:async 标志的异步函数返回的是一个Promise对象,如果async标志的异步函数函数体内并未写返回,那么async标志的异步函数执行完成后依然会返回一个空的Promise对象,then()解析出来就是undefined。
我们来看看下边的例子
await
1:await只能出现在Async函数体内, 标志着等待某个结果返回。
2:await的出现有点像将异步变同步的意思,await标志出现位置以下的代码才会被推入到异步任务队列中去。
3:如果await等待的是一个Promise函数的返回,就要使用try...catch...捕获异常。
Async...await主要用途:
非常适用于回调嵌套,避免回调地狱的情况,比Promise的处理该情况后的代码更易阅读。
我们来看看上边Promise处理回调嵌套的代码用Async...await怎么实现,实现代码如下
用Async...await逻辑是不是更清楚了,也避免了回调地狱的问题。
自己实现一个Promise
代码如下:
网友评论