When I read the source code of Zombie.js, I found async/await keyword:
before(async function() {
await browser.visit('/streaming');
await browser.pressButton('1');
});
Why can it use such keywords? What is the behaviour of the code? I tried to find some clue from the codebase, but not lucky
If we check out the gulpfile used to build that project, we can see that the source is piped through babel.
gulp.task('build', ['clean'], function() {
return gulp
.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(babel({
experimental: true,
loose: 'all',
optional: [
'bluebirdCoroutines',
'runtime'
]
}))
});
Babel is a transpiler which allows you to write ES6+ code and transpile it back to ES5.
Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support.
If we check out the docs on Babel's site, we can see that in the ES7 section of the experimental section, there is an implementation for asyncFunctions.
These keywords are part of the ES7 specification, but they haven't stabilised. Hence them being included as experimental features of Babel.
In simplified terms, an async function will allow you to await a call which returns a promise.
async function() {
// flow will be suspended here until
// the promise returned by someFunction is resolved
await someFunction()
}
ES6 will include what are known as generators, which do a similar thing, but aren't specific to promises. You might start seeing the yield keyword around, or functions declared like this function* () {}. They are what's known as generator functions.
There is a particularly good article from PouchDB which explains a real world use case for these features.
Those keywords aren't available in EcmaScript 5, but are proposed for EcmaScript 7 (the version coming after the upcoming version 6). Right now you can use Babel to transcompile ES6 and some ES7 code into ES5, with some exceptions (notably proxying since it's not possible within ES5). Specifically for this, you can reference Babel's experimental features, specifically Stage 1, es7.asyncFunctions.
It is a new feature planned for ES7 that depends on promises and generators.
Why can it use such keywords?
Beacause they transpile the code with Babel.
What is the behaviour of the code?
It basically means the following in continuation passing style:
before(function() {
browser.visit('/streaming', function() {
browser.pressButton('1');
});
});
It's one of the best things to ever come to JavaScript besides modules and classes. Check out these two articles and library to get an feel for the power:
Additionally, a search for "javascript async await" will surface some more good articles and examples.
