异步之美 — Promise&Async await

不多说，这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

代码如下：