Transform async/await

Babel has a async to generator plugin which transforms async functions into generator functions. We'll use a simple NodeJS application to demonstrate the usage of this Babel plugin.

The code below shows the .babelrc file.

{
  "plugins": [
    "transform-es2015-modules-commonjs",
    "syntax-async-functions",
    "transform-async-to-generator"
  ]
}

Given JavaScript code shown below,

async function foo() {
  await bar();
}

After applying the plugin, the output is shown as below. The transformation is straightforward and relies on a helper method _asyncToGenerator. async function is transformed into generator function and await is transformed into yield. The _asyncToGenerator helper is responsible for transforming generator functions into a regular function that returns a Promise.

"use strict";

let foo = (() => {
  var _ref = _asyncToGenerator(function* () {
    yield bar();
  });

  return function foo() {
    return _ref.apply(this, arguments);
  };
})();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { return step("next", value); }, function (err) { return step("throw", err); }); } } return step("next"); }); }; }

From the source code of asyncToGenerator, we can see that it transforms a generator function into a Promise chain.