Using async/await with Tonic

JavaScript Discussion
1

When you write code with Tonic, the last statement in a code cell gets shown to you as an interactive result. This lets you quickly explore and test new ideas and is one of the most exciting features of Tonic. Of course, many things in node.js happen asynchronously, which can make things a bit more complicated.

Consider this code:

var request = require("request")                         
request.get("https://www.google.com", function(err, result)  
{                                                        
    console.log(result)                                  
})

The result won’t be useful, because the request happens asynchronously. Fortunately, when you console.log with Tonic you’ll still get a nice interactive object viewer. But with await we can do even better:

var request = require("request-promise")
await request.get("https://www.google.com")

This produces a much better output, because we don’t get an unwanted undefined followed by the actual thing we wanted. And it more clearly expresses the desired behavior, in less code to boot.

How does it work? In short, you can await any value this is a Promise, and the execution will “pause” until the promise is fulfilled. You’ll notice we used the promisified version of the request library above to make things easier for us. You’ll find lots of promise ready libraries on npm, and more about async in this notebook.

The benefits become even more clear when you are working with a document that has more than one cell. If you simple use console.log, all of your results will show up at the end of your document, since all of the cells are first executed, and then the asynchronous results start coming in. When you use await you get the behavior you actually want: an asynchronous event happens, and then the result gets displayed, then finally the next code cell is run.

More about await

2

How come that await works at the top level? Does Tonic somehow wrap the entire code cell in an async function?

From https://ponyfoo.com/articles/understanding-javascript-async-await:

Note that await may only be used in functions marked with the async keyword.

Also, running this with Babel and the babel-plugin-transform-async-to-generator plugin fails with a syntax error after await.

3

Hi Dan,

Yes we do the equivalent of wrapping everything in an async function. We are planning to have the download button automatically apply this transformation (and also waiting on ES committee which I believe is currently discussing adding top level await to the standard too). Apologies for any confusion and we are happy to help out in any way.

For the example you mentioned, you can get it working with babel by just doing:

(async function()
{
// your code
})()

4

Hi Ross,

I toss you an article from our blog about how async/await comes to the rescue. I know that is a quite different topic (without Tonic) but it could be very helpful in general.

http://www.applandeo.com/en/async-await-rescue/

Have a nice day!