js中异步方案比较完整版(callback,promise,generator,async)

JS 异步已经告一段落了，这里来一波小总结

1. 回调函数（callback）

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

缺点：回调地狱，不能用 try catch 捕获错误，不能 return

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

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

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

优势：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。）

2. 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 ，错误须要经过回调函数来捕获

3. Generator

特色：能够控制函数的执行，能够配合 co 函数库使用

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 会致使性能上的下降。

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

下面来看一个使用 await 的例子：

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 的话，其实本身就能够实现这样的语法糖。