## 题目 ### JS 异步解决方案的发展历程以及优缺点 ### 1. 回调函数（callback） ~~~js setTimeout(() => { // callback 函数体 }, 1000) ~~~ **缺点：回调地狱，不能用 try catch 捕获错误，不能 return** 回调地狱的根本问题在于： * 缺乏顺序性： 回调地狱导致的调试困难，和大脑的思维方式不符 * 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，即（**控制反转**） * 嵌套函数过多的多话，很难处理错误 ~~~js ajax('XXX1', () => { // callback 函数体 ajax('XXX2', () => { // callback 函数体 ajax('XXX3', () => { // callback 函数体 }) }) }) ~~~ **优点：解决了同步的问题**（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。） #### 2. Promise Promise就是为了解决callback的问题而产生的。 Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise，如果我们在 then 中 return ，return 的结果会被 Promise.resolve() 包装 **优点：解决了回调地狱的问题** ~~~js ajax('XXX1') .then(res => { // 操作逻辑 return ajax('XXX2') }).then(res => { // 操作逻辑 return ajax('XXX3') }).then(res => { // 操作逻辑 }) ~~~ **缺点：无法取消 Promise ，错误需要通过回调函数来捕获** #### 3. Generator **特点：可以控制函数的执行**，可以配合 co 函数库使用 ~~~js function *fetch() { yield ajax('XXX1', () => {}) yield ajax('XXX2', () => {}) yield ajax('XXX3', () => {}) } let it = fetch() let result1 = it.next() let result2 = it.next() let result3 = it.next() ~~~ #### 4. Async/await async、await 是异步的终极解决方案 **优点是：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题** **缺点：await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。** ~~~js async function test() { // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式 // 如果有依赖性的话，其实就是解决回调地狱的例子了 await fetch('XXX1') await fetch('XXX2') await fetch('XXX3') } ~~~ 下面来看一个使用`await`的例子： ~~~js let a = 0 let b = async () => { a = a + await 10 console.log('2', a) // -> '2' 10 } b() a++ console.log('1', a) // -> '1' 1 ~~~ 对于以上代码你可能会有疑惑，让我来解释下原因 * 首先函数`b`先执行，在执行到`await 10`之前变量`a`还是 0，因为`await`内部实现了`generator`，**`generator`会保留堆栈中东西，所以这时候`a = 0`被保存了下来** * 因为`await`是异步操作，后来的表达式不返回`Promise`的话，就会包装成`Promise.reslove(返回值)`，然后会去执行函数外的同步代码 * 同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候`a = 0 + 10` 上述解释中提到了`await`内部实现了`generator`，其实`await`就是`generator`加上`Promise`的语法糖，且内部实现了自动执行`generator`。如果你熟悉 co 的话，其实自己就可以实现这样的语法糖。 ## 摘自 [ 第 12 题：JS 异步解决方案的发展历程以及优缺点](https://www.muyiy.cn/question/async/12.html)