Callbacks, promises, and generators turn out to be the weapons at our disposal to deal with asynchronous code in JavaScript and in Node.js. As we have seen, generators are very interesting because they offer a way to actually suspend the execution of a function and resume it at a later stage. Now we can adopt this feature to write asynchronous code that allows developers to write functions that "appear" to block at each asynchronous operation, waiting for the results before continuing with the following statement.

The problem is that generator functions are designed to deal mostly with iterators and their usage with asynchronous code feels a bit cumbersome. It might be hard to understand, leading to code that is hard to read and maintain.

But there is hope that there will be a cleaner syntax sometime in the near future. In fact, there is an interesting proposal that will be introduced with the ECMAScript 2017 specification that defines the async function's syntax.

The async function specification aims to dramatically improve the language-level model for writing asynchronous code by introducing two new keywords into the language: async and await.

To clarify how these keywords are meant to be used and why they are useful, let's see a very quick example:

const request = require('request'); 
 
function getPageHtml(url) { 
  return new Promise(function(resolve, reject) { 
    request(url, function(error, response, body) { 
      resolve(body); 
    }); 
  }); 
} 
 
async function main() { 
  const html = await getPageHtml('http://google.com'); 
  console.log(html); 
} 
 
main(); 
console.log('Loading...'); 

In this code,there are two functions: getPageHtml and main. The first one is a very simple function that fetches the HTML code of a remote web page given its URL. It's worth noticing that this function returns a promise.

The main function is the most interesting one because it's where the new async and await keywords are used. The first thing to notice is that the function is prefixed with the async keyword. This means that the function executes asynchronous code and allows it to use the await keyword within its body. The await keyword before the call to getPageHtml tells the JavaScript interpreter to "await" the resolution of the promise returned by getPageHtml before continuing to the next instruction. This way, the main function is internally suspended until the asynchronous code completes without blocking the normal execution of the rest of the program. In fact, we will see the string Loading... in the console and, after a moment, the HTML code of the Google landing page.

Isn't this approach much more readable and easy to understand?

Unfortunately, this proposal is not yet final, and even if it will be approved we will need to wait for the next version of the ECMAScript specification to come out and be integrated in Node.js to be able to use this new syntax natively.

So what do we do today? Just wait? No, of course not! We can already leverage async await in our code thanks to transpilers such as Babel.

npm install --save-dev babel-cli

npm install --save-dev babel-plugin-syntax-async-functions 
    babel-plugin-transform-async-to-generator

node_modules/.bin/babel-node --plugins 
    "syntax-async-functions,transform-async-to-generator"index.js