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

243次阅读  |  发布于3年以前

早期的回调函数

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

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);
      // ...处理代码
    })
  })
})
复制代码

这个就是 回调地狱：

早期回调函数的优缺点：

过渡方案 Generator

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

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

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

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

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

如下：

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;
}
复制代码

如下图：

image.png

如下图：

image.png

协程

我们知道，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')
复制代码

执行过程如下图所示，可以重点关注协程之间的切换：

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

协程之间的切换：

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)
复制代码

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

image.png

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

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

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

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

async/await总结

异步编程总结

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8