September 30th, 2015
While we work on rounding out our ES6/ES2015 support, the Chakra team is already looking ahead to ES2016 and, especially, to Async Functions. Today, we’re excited to announce the availability of Async Functions in Microsoft Edge as an experimental feature, available to preview starting in Microsoft Edge (EdgeHTML 13.10547).
ES7/ES2016 Async Functions
ES6 Promises helped improve the way to write asynchronous code by standardizing and by including the feature directly in the web browser. But it did not totally solve the problem as we still need to use callbacks to retrieve the result.
Async Functions are based on Promises, but take them a step further. When you add an
async keyword to a function or an arrow function it will automatically return a Promise. For example, the following code is a standard ES2015 program that performs an Http request with promises:
If we rewrite the same code and get the same behavior with Async Functions, the result is smaller and more readable code. The code below also has a refactoring to change the way we manage the error in the function:
async keyword also works with ES6 arrow functions, simply by adding the keyword before the arguments. Following in an example of the same:
- Use the
asynckeyword with any function declaration or arrow function to get asynchronous code with a Promise. This includes functions in classes and static function. For this last one, the
asynckeyword should be placed after the
statickeyword and before the function’s name.
- Use the
awaitkeyword to make execution wait for the end of an
asyncexpression (a call to an
asyncfunction for example) and get the returned value of the Promise.
- If you don’t use the
awaitkeyword, you will get a Promise.
- You cannot use the
awaitkeyword outside an
asyncfunction, including the global scope.
How is it implemented in Chakra?
In a previous post, we discussed the architecture of the Chakra engine in detail using the diagram below. The parts requiring the most modification to support Async Functions are highlighted in green.
async keyword will generate a Promise constructor, according to the specifications, that wraps the function’s body. To perform this action, Chakra’s Bytecode Generator generates a call to a built-in function that describe the following behavior:
The spawn function above is designed to manage all the
async expressions in the function’s body and decide to stop or continue the process depending of the behavior inside the
async function. If an
async expression called with an
await keyword fails, for example because of an error inside the
async function or something being awaited, the promise will be rejected to make it possible to manage the error higher in the stack.
Now the engine needs to make the JS script call this spawn function to get the Promise and run the function’s body. To do this, when the parser detects an
async keyword, the engine changes the AST (Abstract Syntax Tree), which represents the developer’s algorithm, to add a call to the Spawn function with the function’s body. Consequently, the
httpGetJson function is converted like this by the parser:
Note the use of Generators and the
yield keyword to perform the
await keyword’s behavior. Indeed, the implementation of the
await keyword is extremely similar to the
Behavior with a default argument
One of the new feature from ES6 is the possibility to set a default value to an argument in a function. When default value is set, the Bytecode Generator will set the value at the top of the function’s body.
In the case of an
async keyword, if the default value sets to this argument throw an error, the specifications ask to reject a Promise. This allows the exception to be caught easily.
To realize it, the Chakra team had two choices: change the AST (Abstract Syntax Tree), or implement it directly in the Bytecode Generator. We chose to implement it directly in the Bytecode Generator by moving the argument’s initialization to the top of the function’s body directly in the Bytecode, because it is an easier and cleaner solution in this engine. Since a
try/catch needs to be added to intercept any error from the argument’s default value, it’s easier to change the Bytecode directly when we detect an
How to enable Async Functions in Microsoft Edge?
Async Functions are available to preview via the Windows Insider Program starting in Microsoft Edge 13.10547.We can’t wait to hear about how you will be using the feature in your ES2016 code and look forward to sharing more soon about our next investments in Chakra. In the meantime, feel free to join the comment discussion, reach out on Twitter @MSEdgeDev, or on Connect.