ES7的Async/Await的简单理解

Async/Await 的我的看法

正文：

async，顾名思义，一个异步执行的功能，而 await 则是配合 async 使用的另外一个关键字,也是闻字识其意，就是叫你等待啦！

两者配合食用效果更佳哦，就像德芙配巧克力 ⊙_⊙||

如今其实有点意识的前端或者JS学习者基本都学习了ES6语法了，可是依旧感受在编写异步代码上不够爽怎么办，在 ES7 的 async/await 则能使得咱们在编写异步代码时变得像同步同样的方式来编写，这样子能够帮助咱们更直观的阅读咱们的额代码而没必要在一堆代码中去寻找这个异步的请求代码了，咱们将异步执行的代码封装了或者做为模块导入便可。这样作不只能够帮助咱们的代码提升可阅读性，采用模块引入的方式也更利于咱们代码的后期维护。

async/await 出来其实很早了，15年时就有许多人在社区中开始推广了，可是为何我今天才学习了？无法用啊！，以前想要用个新特性要折腾多少事！精力不足啊咱们这种小程序员，又不是哪些大牛们三下五除二解决了工做问题，时间与精力都比咱们多啊。

 

废话这么多！好啦，不废话了，下面是我在互联网上看过对于 async/await 的介绍后本身的总结：

首先，从别人那得来的 async/await 规则：

1. async 表示这是一个 async 函数，而 await 只能在这个函数里面使用。

2. await 表示在这里等待 await 后面的操做执行完毕，再执行下一句代码。

3. await 后面紧跟着的最好是一个耗时的操做或者是一个异步操做(固然非耗时的操做也能够的，可是就失去意义了)。

其实在使用 async/await 的时候最简单的场景就是当你须要执行一个耗时操做时或者必须为异步操做时就能够直接上，使用 async 来执行你的函数，在这个函数内部 使用 await 关键字来达到异步执行的最终目的：执行完毕（异步执行）了，能够运行下一行代码了！

这个时候 JS 代码就会向下一行进军了！一个简单的案例：

 1 let sleep = function (time) {
 2     return new Promise(function (resolve, reject) {
 3         setTimeout(function () {
 4             resolve();
 5         }, time);
 6     })
 7 };
 8 
 9 let howLongToSleep = async function () {
10     // 在这里使用起来就像同步代码那样直观
11     console.time();
12     console.log('start');
13     await sleep(3000);  //sleep 为一个执行须要耗费 3s 的函数
14     console.timeEnd('end');
15 };
16 
17 howLongToSleep();

这里你会发现先是打印出了 start 而后过了约 3s 的时候打印出了 end: 1496124446501.106ms

而在这里也能够直接拿到异步函数的返回值，例如上面的 howLongToSleep 函数中的 await sleep(3000) 能够直接获取到 sleep函数的返回值，直接用个变来那个保存便可使用了，也很方便的吧。

1 // 在 await 前面用变量保存便可；
2 let result = await sleep(3000);

这里会等待 sleep 函数完成后并将返回值返回后 await 的工做才算完成，这时候才会把的到的返回值赋值给 result 变量，而不是将函数体给了 result， 这点须要清楚。

若是你须要调用多个异步函数而且每隔指定时间执行其中一个的话不妨讲他们放到一个数组中执行：

let fnArr = [firstFn, secondFn, thirdFn];  // 数组中存放着须要顺序执行的函数

for(let v of fnArr ) {
    console.log(`当前是${v}函数开始执行...`);
    await v( params ); // 调用数组中的每一个函数
}

不过，如今这些功能基本都还只在 node 中才能见到，浏览器端对于这些 ES六、ES7 的功能实现仍是存在很大的兼容性问题，使用 babel 却是能够实现大部分的代码功能，可是对于不少前端工做者来讲事件比较麻烦的事，可是请坚信总有一天你会来浏览器端不须要 babel 也能爽的，因此先会了不坏，正所谓技多不压身嘛，若是你在学习 node 或者正准备学习 node 的话，请务必会！

 

结语：

之前不写博客的，都是看别人博客，学着写博客没有多久，有什么问题欢迎各位大佬们穿着女装来批评在下！本人必定虚心受教；

另外，若是发现本人的发表的博客有抄袭现象，请直接开骂！不要留情，我会在第一时间修改或者删除的，绝对不污染各位大佬的视野。