ES7的Async/Await的简单理解

Posted 2020-09-20 小马不黑

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 中才能见到，浏览器端对于这些 ES6、ES7 的功能实现还是存在很大的兼容性问题，使用 babel 倒是可以实现大部分的代码功能，但是对于很多前端工作者来说事件比较麻烦的事，但是请坚信总有一天你会来浏览器端不需要 babel 也能爽的，所以先会了不坏，正所谓技多不压身嘛，如果你在学习 node 或者正准备学习 node 的话，请务必会！

 

结语：

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

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