async await

参考 现代Javascript教程 - async/await

async/await 本质是 Generator 的语法糖，它的目的是简化 Promise 的使用，特别是处理链式调用。

它能以同步的写法来处理异步的操作，不过它的本质还是异步的。

模拟实现

function asyncToGenerator(generator) {
  return function () {
    // generator可以传参
    const gen = generator.apply(this, arguments)

    return new Promise((resolve, reject) => {
      function step(key, val) {
        // 1. gen.next(val) 2. gen.throw(err)
        let generatorResult
        try {
          generatorResult = gen[key](val)
        } catch (error) {
          reject(error)
          return
        }

        const { value, done } = generatorResult
        if (done) {
          // 最后一次
          return resolve(value)
        }
        return Promise.resolve(value).then(
          (val) => step('next', val),
          (err) => step('throw', err),
        )
      }

      // 第一次不需要传值
      step('next')
    })
  }
}

function* testG() {
  const data = yield new Promise((resolve) => {
    setTimeout(() => {
      resolve('hello')
    }, 2000)
  })
  console.log('data', data)
  const data2 = yield new Promise((resolve) => {
    setTimeout(() => {
      resolve('world')
    }, 2000)
  })
  console.log('data2', data2)
  return 'ending'
}

const test = generatorToAsync(testG)

test().then((result) => {
  console.log(result)
})

注意

• async 函数返回的是一个 Promise 对象
• await 只能在 async 函数中使用，或者 ES6 模块中顶层使用
• async 函数中使用 await 并不会阻塞函数之外的代码执行，只会使函数内的代码按顺序执行
• await 后面的 Promise 对象如果变为 reject 状态，会抛出异常，可以使用 try...catch 捕获