关于前端:异步编程的终极解决方案-asyncawait用同步的方式去写异步代码

4次阅读

共计 5084 个字符，预计需要花费 13 分钟才能阅读完成。

回调函数咱们常常有写到，比方：

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

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 办法，指针就会从函数头部或者上一次停下来的中央开始执行。如下：

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

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

如下图：

当第一次执行 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')

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

从图中能够看进去协程的四点规定：

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

协程之间的切换：

gen 协程和父协程是在主线程上交互执行的，并不是并发执行的，它们之前的切换是通过 yield 和 gen.next 来配合实现的。
当在 gen 协程中调用了 yield 办法时，JS 引擎会保留 gen 协程以后的调用栈信息，并复原父协程的调用栈信息。同样，当在父协程中执行 gen.next 时，JS 引擎会保留父协程的调用栈信息，并复原 gen 协程的调用栈信息。

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

应用 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)

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

联合上图来剖析 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 生成器最大的特点是能够管制函数的执行，是协程的一种实现形式。
async/await 能够算是异步编程的终极解决方案，它通过同步的形式写异步代码，能够把 await 看作是让出线程的标记，先去执行 async 函数内部的代码，等调用栈为空再回来调用 await 前面的代码。

正文完