async function_Async方法学习与理解

作为一名前端开发，无论是面试或者在实际工作中，更好地理解async方法都会让我们如虎添翼。本文参考在学习过程中觉得写得最清楚明白的一篇文章，进行总结梳理，并加入自己的理解，有不足之处望指正。

原文链接：

Async functions - making promises friendly​developers.google.com

Async是高级浏览器兼容的一种异步方法，让coders以看起来同步的方式写不阻碍主线程的异步方法，让基于promise的代码编写更加“正向逻辑”、更加易于读懂、维护。

Async方法的基本用法：

async 

在function前面加上async关键字，并在函数内部使用await关键字。顾名思义，在函数运行到await的时候，会等待返回一个promise对象，在promise对象返回前，函数将暂停，但同时不会阻塞主线程。上述代码中，如果返回的promise对象状态是fulfilled，则赋值promise的返回值。如果状态是rejected，则进行“失败”情况的回调。

对比promise和async

假设我们要获取url并将响应信息以文本方式进行记录。用promise实现的代码如下：

function 

下面是用async方法进行实现的代码：

async 

上例可见，虽然代码行数相同，但由于async代码以“正向”、“同步”的方式进行编写，避免了promise实现中的各种回调。即使是不熟悉promise机制的人也能轻松读懂代码大意。

再更复杂的情况下，promise可能需要方法回调自身来实现异步循环。而async则可以只通过浅显的while循环加await的方式来更清晰明了地进行实现。

Async方法的返回值永远是一个promise对象

如果async函数返回值，则返回的promise对象调用resolve方法；如果async函数抛出异常，则返回的promise对象调用reject方法。所以：

// wait ms milliseconds

...调用hello()方法将返回一个promise对象，其值为‘world’。

async 

...调用foo()方法将返回一个promise对象，抛出错误信息'bar'。

Async方法还可以用于箭头函数、对象方法、类方法中

//用于箭头函数

提高效率：顺序执行to并发执行（利用async提高可读性并用array.map()实现并发）

思路：

第一种写法将顺序执行，用时1000ms：

async 

第二种写法将并发执行，用时500ms：

async 

用于实际中来减少请求时间提高效率：

假设我们想获取一系列urls，并以正确的顺序尽快将其记录下来。

用promise实现的样子：

function 

用到reduce实现，“天才”却不易理解。

转换成async函数时，又很容易出现顺序过长的情况：

不推荐-太慢了

async 

看起来比promise更整洁，但是直到完成我的第一次读取后，我的第二次读取才开始。 太慢了。

推荐-并发请求且按正确顺序记录

async 

a.还是通过array.map()实现url并发，并占好位置，

b.这回用for...of循环（for..of可以正确await promise对象。forEach就await不了。）

c.await会等待每一条请求的结束才记录下一条，总用时是所有请求中max用时时间。

sum:并发且按顺序记录，简直精致完美。（超赞！）

本文是自己学习async方法的笔记，希望也可以帮助到需要的人。

格物致知，明白了怎么用，也需要明白其实现原理。下一篇文章将涉及async的实现原理。