【JS】1015- 异步编程的终极解决方案 async/await

- 日理万妓 2022-10-04 15:48 184阅读 0赞

![ed0274797c214acf8ddf9a18fafcbcec.png][]

### 早期的回调函数 ###

回调函数我们经常有写到，比如：

ajax(url, (res) => {
      console.log(res);
    })
    复制代码

但是这种回调函数有一个大缺陷，就是会写出 **回调地狱（`Callback hell`）**。

比如，如果多个回调存在依赖，可能会写成：

ajax(url, (res) => {
      console.log(res);
      // ...处理代码
      ajax(url2, (res2) => {
        console.log(res2);
        // ...处理代码
        ajax(url3, (res3) => {
          console.log(res3);
          // ...处理代码
        })
      })
    })
    复制代码

这个就是 **回调地狱**：

*  内嵌函数存在耦合，牵一发而动全身，改一个会影响其它地方
 *  内嵌函数多了，发生错误要怎么处理呢？这是一个难题

早期回调函数的优缺点：

*  优点：解决了 **同步阻塞** 的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行）
 *  缺点：**回调地狱**；不能用 `try catch` 捕获错误；不能 `return`

### 过渡方案 `Generator` ###

ES6 新引入了 `Generator` 函数（生成器函数），可以通过 `yield` 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。最大的特点就是 **可以控制函数的执行**。

`Generator` 有两个区分于普通函数的部分：

*  一是在 `function`后面，函数名之前有个 `*`,用来表示函数为 `Generator` 函数
 *  函数内部有 `yield` 表达式,用来定义函数内部的状态

`Generator` 函数的具体使用方式是：

*  在 `Generator` 函数内部执行一段代码，如果遇到 `yield` 关键字，那么 JS 引擎将返回关键字后面的内容给外部，并暂停该函数的执行。
 *  外部函数可以通过 `next` 方法恢复函数的执行。

function* fn() {
      console.log("one");
      yield '1';
      console.log("two");
      yield '2';
      console.log("three");
      return '3';
    }
    复制代码

调用 `Generator` 函数和调用普通函数一样，在函数名后面加上 `()` 即可，但是 `Generator` 函数不会像普通函数一样立即执行，而是 **返回一个指向内部状态对象的指针**，所以要调用遍历器对象 `Iterator` 的 `next` 方法，**指针就会从函数头部或者上一次停下来的地方开始执行**。

如下：

![b3ab1eba1bca3c2d2b6ffc307be52ff5.png][] image.png

`next` 方法:

一般情况下， `next` 方法不传入参数的时候，`yield` 表达式的返回值是 `undefined`。当 `next` 传入参数的时候，该参数会作为上一步 `yield` 的返回值。

`Generator` 生成器也是通过同步的方式写异步代码的，也可以解决回调地狱的问题，但是比较难以理解，希望下面的例子能够帮助你理解 `Generator` 生成器：

function* sum(a) {
      console.log('a:', a);
      let b = yield 1;
      console.log('b:', b);
      let c = yield 2;
      console.log('c:', c);
      let sum = a + b + c;
      console.log('sum:', sum)
      return sum;
    }
    复制代码

*  `next` 不传参时，`yield` 返回 `undefined`

如下图：

![2e5f52858bc7bee5d0a391662129ff7e.png][] image.png

*  当第一次执行 `next` 时，传参会被忽略，并且函数暂停在 `yield 1` 处，所以返回 `1`
 *  当第二次执行 `next` 时，不传参，那么 `yield 1` 返回的是 `undefined` ，所以 `b` 的值是 `undefined`
 *  第三次同理，`c` 的值为 `undefined`
 *  当 `next` 传入参数时，该参数会作为上一步 `yield` 的返回值

如下图：

![f3bade59ded390dceb5ffa0ce8f3af43.png][] image.png

*  当第一次执行 `next` 时，传参（`20`）会被忽略，并且函数暂停在 `yield 1` 处，所以返回 `1`
 *  当第二次执行 `next` 时，传参 `30`，作为 `yield 1` 返回的值，所以 `b = yield 1`，`b` 的值是 `30`
 *  当第二次执行 `next` 时，传参 `40`，作为 `yield 2` 返回的值，所以 `c = yield 2`， `c` 的值是 `40`

### 协程 ###

我们知道，`async`/`await` 是一个自动执行的 `Generator` 函数，上面已经介绍了 `Generator` 函数，那么接下来很有必要介绍一下 **V8 引擎是如何实现一个函数的暂停和恢复** 的呢？

要搞懂函数为何能暂停和恢复，首先要了解 **协程** 的概念。进程和线程我们都知道，那么协程是什么呢？

**协程是一种比线程更加轻量级的存在**。可以把协程看成是跑在线程上的任务，**一个线程上可以存在多个协程，但是在线程上同时只能执行一个协程**，比如当前执行的是 A 协程，要启动 B 协程，那么 A 协程就需要将主线程的控制权交给 B 协程，这就体现在 A 协程暂停执行，B 协程恢复执行；同样，也可以从 B 协程中启动 A 协程。通常，**如果从 A 协程启动 B 协程，我们就把 A 协程称为 B 协程的父协程**。

正如一个进程可以拥有多个线程一样，一个线程也可以拥有多个协程。最重要的是，协程不是被操作系统内核所管理，而是完全由**程序所控制**（即在用户态执行）。这样带来的好处就是性能得到了很大的提升，不会像线程切换那样消耗资源。

可以结合代码理解：

function* genDemo() {
      console.log("开始执行第一段")
      yield 'generator 2'
    
      console.log("开始执行第二段")
      yield 'generator 2'
    
      console.log("开始执行第三段")
      yield 'generator 2'
    
      console.log("执行结束")
      return 'generator 2'
    }
    
    console.log('main 0')
    let gen = genDemo()
    console.log(gen.next().value)
    console.log('main 1')
    console.log(gen.next().value)
    console.log('main 2')
    console.log(gen.next().value)
    console.log('main 3')
    console.log(gen.next().value)
    console.log('main 4')
    复制代码

执行过程如下图所示，可以重点关注协程之间的切换：![bf890327adbc7a7b336e11186b32919a.png][]

从图中可以看出来协程的四点规则：

*  通过调用生成器函数 `genDemo` 来创建一个 **协程 `gen`**，创建之后，`gen` 协程并没有立即执行。
 *  要让 `gen` 协程执行，**需要通过调用 `gen.next`**。
 *  当协程正在执行的时候，可以 **通过 `yield` 关键字来暂停 `gen` 协程的执行**，并返回主要信息给父协程。
 *  如果协程在执行期间，遇到了 `return` 关键字，那么 JS 引擎会结束当前协程，并将 `return` 后面的内容返回给父协程。

协程之间的切换：

*  `gen` 协程和父协程是在主线程上交互执行的，并不是并发执行的，它们之前的切换是 **通过 `yield` 和 `gen.next` 来配合完成** 的。
 *  当在 `gen` 协程中调用了 `yield` 方法时，JS 引擎会保存 `gen` 协程当前的调用栈信息，并恢复父协程的调用栈信息。同样，当在父协程中执行 `gen.next` 时，JS 引擎会保存父协程的调用栈信息，并恢复 `gen` 协程的调用栈信息。

![dcaaf04d63f672239b1110c89db7a7d5.png][] image.png

其实在 JS 中，`Generator` 生成器就是协程的一种实现方式。

### 成熟方案 `Promise` ###

关于 `Promise`，可以去看我上一篇文章：《异步编程 Promise：从使用到手写实现（4200字长文）》，在这一篇文章中详细介绍了 `Promise` 如何解决回调地狱的问题，了解 `Promise` 和微任务的渊源，然后带你一步一步的解构手写实现一个简单的 `Promise`，最后简单介绍并手写实现了一些 `Promise` 的 API，包括 `Promise.all`、`Promise.allSettled`、`Promise.race`、`Promise.finally` 等API。

### 终极解决方案 `async`/`await` ###

使用 `Promise` 能很好地解决回调地狱的问题，但是这种方式充满了 `Promise` 的 `then()` 方法，如果处理流程比较复杂的话，那么整段代码将充斥着 `then`，语义化不明显，代码不能很好地表示执行流程。

基于这个原因，ES7 引入了 `async`/`await`，这是 JavaScript 异步编程的一个重大改进，提供了 **在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力**，并且使得代码逻辑更加清晰。

其实 `async`/`await` 技术背后的秘密就是 `Promise` 和 `Generator` 生成器应用，往低层说就是 **微任务和协程应用**。要搞清楚 `async` 和 `await` 的工作原理，我们得对 `async` 和 `await` 分开分析。

#### `async` ####

`async` 到底是什么？根据 MDN 定义，`async` 是一个通过 **异步执行并隐式返回 `Promise`** 作为结果的函数。重点关注两个词：异步执行和隐式返回 `Promise`。

先来看看是如何隐式返回 `Promise` 的，参考下面的代码：

async function async1() {
      return '秀儿';
    }
    console.log(async1()); // Promise {<fulfilled>: "秀儿"}
    复制代码

执行这段代码，可以看到调用 `async` 声明的 `async1` 函数返回了一个 `Promise` 对象，状态是 `resolved`，返回结果如下所示：`Promise {<fulfilled>: "秀儿"}`。和 `Promise` 的链式调用 `then` 中处理返回值一样。

#### `await` ####

`await` 需要跟 `async` 搭配使用，结合下面这段代码来看看 `await` 到底是什么：

async function foo() {
      console.log(1)
      let a = await 100
      console.log(a)
      console.log(2)
    }
    console.log(0)
    foo()
    console.log(3)
    复制代码

站在 **协程** 的视角来看看这段代码的整体执行流程图：

![5a7a74ebdfe4b41e86a85f4e8588ee3c.png][] image.png

结合上图来分析 `async`/`await` 的执行流程：

*  首先，执行 `console.log(0)` 这个语句，打印出来 `0`。
 *  紧接着就是执行 `foo` 函数，由于 `foo` 函数是被 `async` 标记过的，所以当进入该函数的时候，JS 引擎会保存当前的调用栈等信息，然后执行 `foo` 函数中的 `console.log(1)` 语句，并打印出 `1`。
 *  当执行到 `await 100` 时，会默认创建一个 `Promise` 对象
 *  代码如下所示：`let promise_ = new Promise((resolve,reject){ resolve(100) })`
 *  在这个 `promise_` 对象创建的过程中，可以看到在 `executor` 函数中调用了 `resolve` 函数，JS 引擎会将该任务提交给微任务队列。
 *  然后 JS 引擎会暂停当前协程的执行，将主线程的控制权转交给父协程执行，同时会将 `promise_` 对象返回给父协程。
 *  主线程的控制权已经交给父协程了，这时候父协程要做的一件事是调用 `promise_.then` 来监控 `promise` 状态的改变。
 *  接下来继续执行父协程的流程，执行 `console.log(3)`，并打印出来 `3`。
 *  随后父协程将执行结束，在结束之前，会进入微任务的检查点，然后执行微任务队列，微任务队列中有 `resolve(100)` 的任务等待执行，执行到这里的时候，会触发 `promise_.then` 中的回调函数，如下所示：

promise_.then((value) => {
      // 回调函数被激活后
      // 将主线程控制权交给foo协程，并将vaule值传给协程
    })
    复制代码

*  该回调函数被激活以后，会将主线程的控制权交给 `foo` 函数的协程，并同时将 `value` 值传给该协程。
 *  `foo` 协程激活之后，会把刚才的 `value` 值赋给了变量 `a`，然后 `foo` 协程继续执行后续语句，执行完成之后，将控制权归还给父协程。

以上就是 `await`/`async` 的执行流程。正是因为 `async` 和 `await` 在背后做了大量的工作，所以我们才能用同步的方式写出异步代码来。

当然也存在一些缺点，因为 `await` 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 `await` 会导致性能上的降低。

#### `async`/`await`总结 ####

*  `Promise` 的编程模型依然充斥着大量的 `then` 方法，虽然解决了回调地狱的问题，但是在语义方面依然存在缺陷，代码中充斥着大量的 `then` 函数，这就是 `async`/`await` 出现的原因。
 *  使用 `async`/`await` 可以实现用同步代码的风格来编写异步代码，这是因为 `async`/`await` 的基础技术使用了 `Generator` 生成器和 `Promise`，`Generator` 生成器是协程的实现，利用 `Generator` 生成器能实现生成器函数的暂停和恢复。
 *  另外，V8 引擎还为 `async`/`await` 做了大量的语法层面包装，所以了解隐藏在背后的代码有助于加深你对 `async`/`await` 的理解。
 *  `async`/`await` 无疑是异步编程领域非常大的一个革新，也是未来的一个主流的编程风格。其实，除了 JavaScript，Python、Dart、C\# 等语言也都引入了 `async`/`await`，使用它不仅能让代码更加整洁美观，而且还能确保该函数始终都能返回 `Promise`。

### 异步编程总结 ###

*  早期的异步回调函数虽然解决了同步阻塞的问题，但是容易写出回调地狱。
 *  `Generator` 生成器最大的特点是可以控制函数的执行，是协程的一种实现方式。
 *  `Promise` 的更多内容可以看我的这篇文章：《异步编程 Promise：从使用到手写实现（4200字长文）》：https://juejin.cn/post/6978419919582920740
 *  `async`/`await` 可以算是异步编程的终极解决方案，它通过同步的方式写异步代码，可以把 `await` 看作是让出线程的标志，先去执行 `async` 函数外部的代码，等调用栈为空再回来调用 `await` 后面的代码。

关于本文

来源：起风了Q

https://juejin.cn/post/6978689182809997320

![2e735f30e854a2755dd014894043350e.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![6784020e71f988b6875abd6dc7af2ff7.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[ed0274797c214acf8ddf9a18fafcbcec.png]: /images/20221004/e5b81e72c9a24b9498fd45be26b87b90.png
[b3ab1eba1bca3c2d2b6ffc307be52ff5.png]: /images/20221004/6e3ac04a0491438bbe597e88452e0749.png
[2e5f52858bc7bee5d0a391662129ff7e.png]: /images/20221004/a160a869684d4ba08d7773a91195d4f0.png
[f3bade59ded390dceb5ffa0ce8f3af43.png]: /images/20221004/f70cd86d81fb4f01ad9e9f943ef6cf5d.png
[bf890327adbc7a7b336e11186b32919a.png]: /images/20221004/46e40c30ca3e4b98ab8041dd7731fef2.png
[dcaaf04d63f672239b1110c89db7a7d5.png]: /images/20221004/790ea9bb93de425b938237e3277f69b2.png
[5a7a74ebdfe4b41e86a85f4e8588ee3c.png]: /images/20221004/0de76d3ce463416594aba5e2a52da253.png
[2e735f30e854a2755dd014894043350e.gif]: /images/20221004/4f1fc98a150e4f87844f62c3370f3f8b.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[6784020e71f988b6875abd6dc7af2ff7.gif]: /images/20221004/571be8c16ec3401f8726dd1ab5787b87.png