javascript - zombiejs代码中的synax `async/await`是什么？

Question

在阅读Zombie.js的源码时，发现了async/await关键字:

before(async function() {
  await browser.visit('/streaming');
  await browser.pressButton('1');
});

https://github.com/assaf/zombie/blob/41807a39c7aa1a13c4ef51575e0d581be96175bc/test/event_source_test.js#L60

为什么它可以使用这样的关键字？代码的行为是什么？我试图从代码库中找到一些线索，但并不幸运

Answer 1

如果我们查看 gulpfile用于构建该项目，我们可以看到源代码通过 babel 进行管道传输。

gulp.task('build', ['clean'], function() {
  return gulp
    .src('src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel({
      experimental: true,
      loose:        'all',
      optional:     [
        'bluebirdCoroutines',
        'runtime'
      ]
    }))
});

Babel是一个转译器，允许您编写 ES6+ 代码并将其转译回 ES5。

Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support.

如果我们查看 Babel 网站上的文档，我们可以在 experimental section 的 ES7 部分看到，有一个 asyncFunctions 的实现。

这些关键字是 ES7 规范的一部分，但尚未稳定下来。因此，它们被包含为 Babel 的实验性功能。

简单来说，async 函数将允许您await 一个返回promise 的调用。

async function() {
  // flow will be suspended here until
  // the promise returned by someFunction is resolved
  await someFunction()
}

ES6 将包含所谓的生成器，它们做类似的事情，但并不特定于 promise 。您可能会开始看到 yield 关键字，或者像这样声明的函数 function* () {}。它们就是所谓的生成器函数。

有一个特别good article来自 PouchDB，它解释了这些功能的真实用例。