前端er，你真的会用 async 吗？

async 异步函数 不彻底使用攻略

前言

如今已经到 8012 年的尾声了，前端各方面的技术发展也层出不穷，VueConf TO 2018 大会 也发布了 Vue 3.0的计划。而在咱们（我）的平常中也常常用 Vue 来编写一些项目。那么，就少不了 ES6 的登场了。那么话说回来，你真的会用 ES6 的 async 异步函数吗？

一、async 介绍

先上 MDN 介绍：https://developer.mozilla.org...

async function 用于声明 一个 返回 AsyncFunction 对象的异步函数。异步函数是值经过事件循环异步执行的函数，它会经过一个隐式的 Promise 返回其结果。若是你的代码使用了异步函数，它的语法和结构更像是标准的同步函数

人工翻译：async 关键字是用于表示一个函数里面有异步操做的含义。它经过返回一个 Promise 对象来返回结果它的最大的特色是：经过 async / await 将异步的操做，可是写法和结构倒是和咱们平时写的（同步代码）是同样

二、示范

// 通常咱们会把全部请求方法都定义在一个文件里，这里定义一个方法来模拟咱们的平常请求
function fetch() {
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
};
// 而后在须要它的地方调用它
async function getUserInfo() {
    const info = await fetch();

    return info;
}
getUserInfo().then(info => console.log(info));

咱们能够看到，整个过程很是直观和清晰，语句语义很是明确，整个异步操做看起来就像是同步同样。若是看完上面的流程没有问题的话，那咱们接下来继续深刻的了解一下。

三、async Promise setTimeout(定时器) 的结合使用状况

接下来给你们演示一道题目，这道题是我当时面某条的面试题，估计和多人也见过，这道题很是经典并且使用场景页很是多，研究意义很是大，那么我在这里就给你们分享一下。

求下面的输出结果：

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

这里一共有 8 条 log 语句，先别复制到控制台上，你们给20秒钟的时间默念一下输出的顺序。

1..2.. .. .. 20

我先给上正确的答案：

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

若是你的答案和上面的正确答案有所误差，那么说明你对 async / await 的理解仍是不够深入，但愿你阅读完个人这篇文章以后能够直面各类同步异步问题了（嘻嘻，这还不点个赞嘛）

咱们再来回顾一下 MDN 对 async / await 的描述：

当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。

async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待 Promise 的结果出来，而后恢复async函数的执行并返回解析值（resolved）。

async/await的用途是简化使用 promises 异步调用的操做，并对一组 Promises执行某些操做。正如Promises相似于结构化回调，async/await相似于组合生成器和 promises。

await

await 操做符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。

[return_value] = await expression;

await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数做为 await 表达式的值，继续执行 async function。

若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常缘由抛出。

另外，若是 await 操做符后的表达式的值不是一个 Promise，则返回该值自己。

其中很是重要的一句是：遇到 await 表达式时，会让 async 函数 暂停执行，等到 await 后面的语句（Promise）状态发生改变（resolved或者rejected）以后，再恢复 async 函数的执行（再以后 await 下面的语句），并返回解析值（Promise的值）

这么多 Promise 相关的内容是由于async / await 是创建在 Promise 的基础上的呀~~

而后再来回头看咱们的题目，会发现，有点不对劲啊

async1 end
promise2

那是由于还有一个Promise.resolve 的点没有考虑，这也是我中招的点

四、分析过程

1. 定义一个异步函数 async1
2. 定义一个异步函数 async2
3. 打印 ‘script start’ // *1
4. 定义一个定时器（宏任务，优先级低于微任务），在0ms 以后输出

5. 执行异步函数 async1

   1. 打印 'async1 start' // *2

   2. 遇到await 表达式，执行 await 后面的 async2

      1. 打印 'async2' // *3
   3. 返回一个 Promise，跳出 async1 函数体

6. 执行 new Promise 里的语句

   1. 打印 ‘promise1‘ // *4
   2. resolve() , 返回一个 Promise 对象，把这个 Promise 压进队列里
7. 打印 ’script end' // *5
8. 同步栈执行完毕
9. 回到 async1 的函数体，async2 函数没有返回 Promise，因此把要等async2 的值 resolve，把 Promise 压进队列
10. 执行 new Promise 后面的 .then，打印 ’promise2‘ // *6
11. 回到 async1 的函数体，await 返回 Promise.resolve() ，而后打印后面的 ’async1 end‘ // *7
12. 最后执行定时器（宏任务） setTimeout，打印 ’setTimeout‘ // *8

我对这段代码的过程分析大体如上（若是有什么理解不对的地方请指出），这里有很关键并且是你们容易理解错误的点是：不少人觉得 await 会一直等待后面的表达式执行完以后才会执行后续代码，实际上 await 是会先执行后面的表达式，而后返回一个Promise，接着就跳出整个 async 函数来执行后面的代码，也就是说执行到 await 的时候，会有一个 让出线程 的操做。等后面的同步站执行完了以后，又会回到 async 函数中等待 await 表达式的返回值，若是不是一个 Promise 对象，则会有一个期待它 resolve 成为一个 Promise对象的过程，而后继续执行 async 函数后面的代码，直到是一个 Promise 对象，则把这个 Promise 对象放入 Promise 队列里。

因此说 ，’async1 end' 和‘promise2‘ 这个不注意就会出错的难点就是这样

那么如今，咱们是否是大体上对async / await 理解了呢，咱们来改一下这道题再来看看，把 async2 改造一下

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
function async2(){ // 去掉了 async 关键字
    console.log('async2');
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

此次你们能作对了吗~

五、平常经常使用示例

上面写了那么多，只是为了方便你们对于异步函数的理解，

下面给一些咱们平常开发中使用异步函数的例子。通常来讲，咱们有一个业务须要分不完成，每一个步骤都是异步的，而且严重依赖于上一步的执行结果，稍有不慎就会进入回调地狱（callback hell）了，这种状况下，咱们能够用 async / await 来完成

// 好比在这里场景，咱们提交数据的时候先断定用户是否有这个权限，而后再进行下一步动做
async function submitData(data) {
    const res = await getAuth(); // 获取受权状态
    if (res....) {
        const data = await submit(data);
    }
    toast(data.message);
}

这样就能够保证两个操做的前后顺序

或者是在 Vue 中，一些初始化的操做

async created() {
    const res = await this.init(); // 获取列表等操做
    const list = await this.getPage(); // 分页请求等
}

可是在使用过程当中，咱们会发现刚从回调地狱中解救，而后就陷入 async / await 地狱的诞生

举一个例子：

async created() {
    const userInfo = await this.getUserInfo(); // 获取用户数据
    const list = await this.getNewsList(); // 获取文章数据
}

表面上看，这段语法是正确的，但并非一个优秀实现，由于它把两个没有前后顺序的一部操做强行变成同步操做了，由于这里的代码是一行接着一行执行的，想一下，咱们没有必要在获取用户数据以后才去获取文章数据，它们的工做是能够同时进行的

这里给出一些经常使用的并发执行的实例

async created() {
    const userInfo = this.getUserInfo(); // 它们都会返回 Promise 对象
    const list = this.getNewsList();
    await userInfo;
    await list;
    // ...do something
}
// 若是有不少请求的状况下可使用 Promise.all
async created() {
    Promise.all([this.getUserInfo(), this.getNewsList()]).then(()=> {
        // ...do something
    });
}

五、图例

六、小结

一、异步的终极解决方案

二、看起来像同步的异步操做

三、便捷的捕获错误和调试

四、支持并发执行

五、要知道避免 async / await 地狱

七、写在最后

好了，关于async 异步函数的不彻底指南就说到这里了，上面所说起的内容，可能也就比较浅显的内容。并且有时候，建议你们熟练使用它，在平常开发中多使用多总结才会有沉淀的效果，都是要靠本身多练，才能熟悉使用，熟能生巧！最后，若是你们以为我有哪里写错了，写得很差，有其它什么建议（夸奖），很是欢迎你们补充。但愿能让你们交流意见，相互学习，一块儿进步！我是一名 19 的应届新人，以上就是今天的分享，新手上路中，后续不按期周更（或者是月更哈哈），我会努力让本身变得更优秀、写出更好的文章，文章中有不对之处，烦请各位大神斧正。若是你以为这篇文章对你有所帮助，请记得点赞或者品论留言哦～。