异步解决方案历程
1. 回调函数
回调函数是最开始的异步解决方案，在异步代码执行完后去执行回调函数
fs.readFile('./1.txt', 'utf-8', (err, data) => {
if(err) console.error(err)
console.log('here is data', data)
})
这样做有几个缺点：
- 如果回调太多，会形成回调地狱，代码可读性会变差
- 难以进行错误捕获
- 回调套回调的方式是串行的，效率低
- 无法通过 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'
整体流程如下：
第一次调用 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 方法。
以上。
感谢你看到了这里，更多个人博文戳这
