JavaScript 异步编程回顾

由于 JavaScript 是单线程执行模型，因此必须支持异步编程才能提高运行效率。异步编程的语法目标是让异步过程写起来像同步过程。

1. 回调函数

回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。

1const fs = require('fs')
2fs.readFile('/etc/passwd', (err, data) => {
3  if (err) {
4    console.error(err)
5    return
6  }
7  console.log(data.toString())
8})

回调函数最大的问题是容易形成回调地狱，即多个回调函数嵌套，降低代码可读性，增加逻辑的复杂性，容易出错。

1fs.readFile(fileA, function (err, data) {
2  fs.readFile(fileB, function (err, data) {
3    // ...
4  })
5})

2. Promise

为解决回调函数的不足，社区创造出 Promise。

1const fs = require('fs')
2
3const readFileWithPromise = file => {
4  return new Promise((resolve, reject) => {
5    fs.readFile(file, (err, data) => {
6      if (err) {
7        reject(err)
8      } else {
9        resolve(data)
10      }
11    })
12  })
13}
14
15readFileWithPromise('/etc/passwd')
16  .then(data => {
17    console.log(data.toString())
18    return readFileWithPromise('/etc/profile')
19  })
20  .then(data => {
21    console.log(data.toString())
22  })
23  .catch(err => {
24    console.log(err)
25  })

简单的 Promise 实现，窥探下本质

Promise 实际上是利用编程技巧将回调函数的横向加载，改成纵向加载，达到链式调用的效果，避免回调地狱。最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。

3. async、await

为了解决 Promise 的问题，async、await 在 ES8 中被提了出来，是目前为止最好的解决方案

1const fs = require('fs')
2async function readFile() {
3  try {    
4    var f1 = await readFileWithPromise('/etc/passwd')
5    console.log(f1.toString())
6    var f2 = await readFileWithPromise('/etc/profile')
7    console.log(f2.toString())
8  } catch (err) {
9    console.log(err)
10  }
11}\

async、await 函数写起来跟同步函数一样，条件是需要接收 Promise 或原始类型的值。异步编程的最终目标是转换成人类最容易理解的形式。

async、await

分析 async、await 实现原理之前，先介绍下预备知识

1. generator

generator 函数是协程在 ES6 的实现。协程简单来说就是多个线程互相协作，完成异步任务。

预览

整个 generator 函数就是一个封装的异步任务，异步操作需要暂停的地方，都用 yield 语句注明。generator 函数的执行方法如下：

1function* gen(x) {
2  console.log('start')
3  const y = yield x * 2
4  return y
5}
6
7const g = gen(1)
8g.next()   // start { value: 2, done: false }
9g.next(4)  // { value: 4, done: true }

gen() 不会立即执行，而是一上来就暂停，返回一个 Iterator 对象（具体可以参考 Iterator遍历器）
每次 g.next() 都会打破暂停状态去执行，直到遇到下一个 yield 或者 return
遇到 yield 时，会执行 yield 后面的表达式，并返回执行之后的值，然后再次进入暂停状态，此时 done: false 。
next 函数可以接受参数，作为上个阶段异步任务的返回结果，被函数体内的变量接收
遇到 return 时，会返回值，执行结束，即 done: true
每次 g.next() 的返回值永远都是 {value: ... , done: ...} 的形式

2. thunk函数

JavaScript 中的 thunk 函数（译为转换程序）简单来说就是把带有回调函数的多参数函数转换成只接收回调函数的单参数版本

1const fs = require('fs')
2const thunkify = fn => (...rest) => callback => fn(...rest, callback)
3const thunk = thunkify(fs.readFile)
4const readFileThunk = thunk('/etc/passwd', 'utf8')
5readFileThunk((err, data) => {
6   // ...
7})

单纯的 thunk 函数并没有很大的用处，大牛们想到了和 generator 结合：

1function* readFileThunkWithGen() {
2  try {
3    const content1 = yield readFileThunk('/etc/passwd', 'utf8')
4    console.log(content1)
5    const content2 = yield readFileThunk('/etc/profile', 'utf8')
6    console.log(content2)
7    return 'done'
8  } catch (err) {
9    console.error(err)
10    return 'fail'
11  }  
12}
13
14const g = readFileThunkWithGen()
15g.next().value((err, data) => {
16  if (err) {
17    return g.throw(err).value
18  }
19  g.next(data.toString()).value((err, data) => {
20    if (err) {
21      return g.throw(err).value
22    }
23    g.next(data.toString())
24  })
25})

thunk 函数的真正作用是统一多参数函数的调用方式，在 next 调用时把控制权交还给 generator，使 generator 函数可以使用递归方式自启动流程

1const run = generator => {
2  const g = generator()
3  const next = (err, ...rest) => {
4    if (err) {
5      return g.throw(err).value
6    }
7    const result = g.next(rest.length > 1 ? rest : rest[0])
8    if (result.done) {
9      return result.value
10    }
11    result.value(next)
12  }
13  next()
14}
15run(readFileThunkWithGen)

有了自启动的加持之后，generator 函数内就可以写"同步"的代码了。generator 函数也可以与 Promise 结合：

1function* readFileWithGen() {
2  try {    
3    const content1 = yield readFileWithPromise('/etc/passwd', 'utf8')
4    console.log(content1)
5    const content2 = yield readFileWithPromise('/etc/profile', 'utf8')
6    console.log(content2)
7    return 'done'
8  } catch (err) {
9    console.error(err)
10    return 'fail'
11  }
12}
13
14const run = generator => {
15  return new Promise((resolve, reject) => {
16    const g = generator()
17    const next = res => {
18      const result = g.next(res)
19      if (result.done) {
20        return resolve(result.value)
21      }
22      result.value
23        .then(
24          next,
25          err => reject(gen.throw(err).value)
26        )
27    }
28    next()
29  })
30}
31
32run(readFileWithGen)
33  .then(res => console.log(res))
34  .catch(err => console.log(err))

generator 可以暂停执行，很容易让它和异步操作产生联系，因为我们在处理异步操作时，在等待的时候可以暂停当前任务，把程序控制权交还给其他程序，当异步任务有返回时，在回调中再把控制权交还给之前的任务。generator 实际上并没有改变 JavaScript 单线程、使用回调处理异步任务的本质。

3. co 函数库

每次执行 generator 函数时自己写启动器比较麻烦。 co函数库是一个 generator 函数的自启动执行器，使用条件是 generator 函数的 yield 命令后面，只能是 thunk 函数或 Promise 对象，co 函数执行完返回一个 Promise 对象。

1const co = require('co')
2co(readFileWithGen).then(res => console.log(res)) // 'done'
3co(readFileThunkWithGen).then(res => console.log(res)) // 'done'

co 函数库的源码实现其实就是把上面两种情况做了综合:

1// 做了简化，与源码基本一致
2const co = (generator, ...rest) => {
3  const ctx = this
4  return new Promise((resolve, reject) => {
5    const gen = generator.call(ctx, ...rest)
6    if (!gen || typeof gen.next !== 'function') {
7      return resolve(gen)
8    } 
9    
10    const onFulfilled = res => {
11      let ret
12      try {
13        ret = gen.next(res)
14      } catch (e) {
15        return reject(e)
16      }
17      next(ret)
18    }    
19
20    const onRejected = err => {
21      let ret
22      try {
23        ret = gen.throw(err)
24      } catch (e) {
25        return reject(e)
26      }
27      next(ret)
28    }
29
30    const next = result => {
31      if (result.done) {
32        return resolve(result.value)
33      }
34      toPromise(result.value).then(onFulfilled, onRejected)
35    }
36
37    onFulfilled()
38  })  
39}
40
41const toPromise = value => {
42  if (isPromise(value)) return value
43  if ('function' == typeof value) {
44    return new Promise((resolve, reject) => {
45      value((err, ...rest) => {
46        if (err) {
47          return reject(err)
48        }
49        resolve(rest.length > 1 ? rest : rest[0])
50      })
51    })
52  }
53}
54

4. 理解 async、await

一句话，async、await 是 co 库的官方实现。也可以看作自带启动器的 generator 函数的语法糖。不同的是，async、await 只支持 Promise 和原始类型的值，不支持 thunk 函数。

1// generator with co
2co(function* () {
3  try {    
4    const content1 = yield readFileWithPromise('/etc/passwd', 'utf8')
5    console.log(content1)
6    const content2 = yield readFileWithPromise('/etc/profile', 'utf8')
7    console.log(content2)
8    return 'done'
9  } catch (err) {
10    console.error(err)
11    return 'fail'
12  }
13})
14
15// async await
16async function readfile() {
17  try {
18    const content1 = await readFileWithPromise('/etc/passwd', 'utf8')
19    console.log(content1)
20    const content2 = await readFileWithPromise('/etc/profile', 'utf8')
21    console.log(content2)
22    return 'done'
23  } catch (err) {
24    throw(err)
25  }
26}
27readfile().then(
28  res => console.log(res),
29  err => console.error(err)
30)

总结

不论以上哪种方式，都没有改变 JavaScript 单线程、使用回调处理异步任务的本质。人类总是追求最简单易于理解的编程方式。

问答题【722/1593】async、await 实现原理