异步解决方案历程

1. 回调函数

回调函数是最开始的异步解决方案，在异步代码执行完后去执行回调函数

fs.readFile('./1.txt', 'utf-8', (err, data) => {
  if(err) console.error(err)
  console.log('here is data', data)
})

这样做有几个缺点：

1. 如果回调太多，会形成回调地狱，代码可读性会变差
2. 难以进行错误捕获
3. 回调套回调的方式是串行的，效率低
4. 无法通过 return 返回数据

2. 回调函数 + 发布订阅

除了回调嵌套，我们还可以通过发布订阅模式，我们希望让多个异步任务同时进行, 等到全部执行完毕后通知我们，这样可以解决串行效率低的问题。

class eventBus {
  constructor(){
    this.bus = {}
  }
  on(eventName, callback){  // 监听
    this.bus[eventName] = callback
  }
  emit(eventName, data){  // 触发
    this.bus[eventName](data)
  }
}

const event = new eventBus()
event.on('getData', (function(){
  const collection = [] // 用来收集异步返回的数据
  return function(data) {
    collection.push(data)
    if(collection.length === 2){
      console.log('here is all data!', collection)  // 全部执行完毕了
    }
  }
}()))

只需在每次异步任务的回调里 emit 一下 getData 事件即可。

每次 emit getData 事件都会触发 eventBus 通过 on 绑定的回调函数，将数据存储起来。

当存储数据的长度达到要求时，标志着所有异步函数已经执行完毕。

fs.readFile('./1.txt', 'utf-8', (err, data) => {
  if(err) console.error(err)
  event.emit('getData', data)
})

fs.readFile('./2.txt', 'utf-8', (err, data) => {
  if(err) console.error(err)
  event.emit('getData', data)
})

这样写确实可以让异步并发，但是代码稍微有点复杂。

3. generator

generator 方案的出现使得函数不再是一次执行到底的了，他可以将函数分成多个执行段，将执行控制权交出。

先来看看 generator 的语法。

function* generator(){
  console.log(1)
  let b = yield 'a'
  console.log('b', b)
  let c = yield b
  console.log('c', c)
  return c
}

函数不会直接执行，会生成函数的迭代器对象，通过迭代器对象上的 next 方法，可以使函数段往下执行

let go = generator()
console.log(go.next())  // 'a'
console.log(go.next('b_value'))  // 'b_value'
console.log(go.next('c_value')) // 'c_value'

整体流程如下：

1573283719

第一次调用 next 方法时，函数会执行到 yield 'a' 处，然后停止。yield 'a' 会返回一个形如 {value: 'a', done: false} 的对象，下一次调用 next 方法的输入参数会作为 b 的值

generator 将代码的执行权交出，使得我们可以像同步一样执行异步代码了

function* generator(){
  let b = yield setTimeout(() => { console.log('1');go.next()}, 100);
  let c = yield setTimeout(() => { console.log(2);go.next()}, 0);
  return c
}
let go = generator()
go.next()

实际上，一般不会这样一次次调用 next 方法，都是采用 co 库 + generator 来实现

这里我们自己实现一个简单的 co 库

我们期望的 co 的使用方式如下：

co(generator())
.then(
  data => console.log(data),
  err => console.log(err)
)

给 co 传入一个 generator 函数的执行（相当于传入 it），然后 co 库会自动帮我们执行 next 方法，并将每次 next 的返回值作为下一次 next 的参数传入

co 执行完会返回一个 Promise，generator 函数 return 的值（注意如果没有 return，默认会 return undefined）会传给 .then 方法

编写我们的 co 库：

function co(it){
  return new Promise((resolve, reject) => {
    function next(input){
      const {value, done} = it.next(input)
      if(done){
        return resolve(value)
      }
      // 将 it.next() 的返回值统一处理为 promise
      Promise.resolve(value).then(data => {
        try {
          next(data) // 将上一个 next 的返回值传给下一个 next
        } catch (e) {
          reject(e)
        }
      })
    }
    try {
      next()
    } catch (e) {
      reject(e)
    }
  })
}

async await

有了上面 co + generator 的基础，async await 理解起来就很轻松了

async await 其实就是 generator + co 的语法糖，被号称异步的终极解决方案

async function asyncFn(){
  const a = await new Promise((resolve, reject) => {
    console.log('a')
    resolve('a')
  })
  console.log('haha')
  return 1
}

asyncFn()
.then(d=>console.log(d))

打印结果如下：

'a'
'haha'
1

让我们再来捋一捋 async await 的原理：
async 函数实际上就是 generator 函数的语法糖，当我们执行 async 函数的时候，会自动帮我们调用 .next() 方法。

await 实际上就是 yield 的语法糖，await 后面的代码执行完的返回值会被包装成一个 promise，这个 promise 执行后，会在 then 方法中将返回值传给下一次 next 方法，这也就是上面为什么 'a' 比 'haha'先打印的原因。

总之，不管 await 后面的代码是不是异步的，都会马上执行，然后将返回值包装成 promise，在 .then 中执行下一次 next 方法。

以上。

感谢你看到了这里，更多个人博文戳这