Skip to content

async await

参考 现代Javascript教程 - async/await

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

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

模拟实现

javascript
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 捕获

最近更新于:

Released under the MIT License