前端面试题（24）—— JS异步解决方案的发展历程以及优缺点

回调函数（callback）

setTimeout(() => {
    // callback 函数体
}, 1000)

优点：解决了同步的问题（整体任务执行时长）；
缺点：回调地狱，不能用try catch捕获错误，不能return；

• 回调地狱的根本问题在于：

1. 缺乏顺序性： 回调地狱导致的调试困难，和大脑的思维方式不符；
2. 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，即（控制反转）；
3. 嵌套函数过多的多话，很难处理错误；

ajax('XXX1', () => {
    // callback 函数体
    ajax('XXX2', () => {
        // callback 函数体
        ajax('XXX3', () => {
            // callback 函数体
        })
    })
})

Promise
Promise就是为了解决callback的问题而产生的；
Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise，如果我们在 then 中 return ，return 的结果会被 Promise.resolve() 包装；

ajax('XXX1')
  .then(res => {
      // 操作逻辑
      return ajax('XXX2')
  }).then(res => {
      // 操作逻辑
      return ajax('XXX3')
  }).then(res => {
      // 操作逻辑
  })

优点：解决了回调地狱的问题；
缺点：无法取消Promise，错误需要通过回调函数来捕获；

Generator
特点：可以控制函数的执行；

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()

Async/Await

优点：代码清晰，不用像Promise写了一大堆then链，处理了回调地狱的问题；
缺点：await将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用await会导致性能上的降低。

async function test() {
  // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
  // 如果有依赖性的话，其实就是解决回调地狱的例子了
  await fetch('XXX1')
  await fetch('XXX2')
  await fetch('XXX3')
}

————————————————
版权声明：本文为CSDN博主「前端瓶子君」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lunahaijiao/article/details/87167417