es7-async
Playing around with ES7 async functions
Case study
In this case study our program must load 3 resources (json files). The requests must to be chained, one after another, logging the output for each request success.
Old friend Ajax
First, let's look how we can accomplish the mission with our old friend Ajax.
The ajax function is responsible for creating an xhr object and execute the callback returning the data.
No big deal here, we have done this a lot in the past, right?
// Getting data
ajax('data.json', (data) => {
console.log('AJAX/data >>>', JSON.parse(data));
// Getting users
ajax('users.json', (users) => {
console.log('AJAX/users >>>', JSON.parse(users));
// Getting products
ajax('products.json', (products) => {
console.log('AJAX/products >>>', JSON.parse(products));
});
});
});Not so new friend, Promises
Promises are around for a while, and now it is part of the ECMAScript 6º edition.
With promises we eliminate the pyramid of doom (callback hell), having a much more cleaner code.
Check it out:
// Promises
// Wrap the ajax function to return promises
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
// Getting data
requestP('data.json')
.then(function(data){
console.log('Promises/data >>>', data);
});
// Getting users
requestP('users.json')
.then(function(users){
console.log('Promises/users >>>', users);
});
// Getting products
requestP('products.json')
.then(function(products){
console.log('Promises/products >>>', products);
});With promises, we can easily have parallel execution:
// Parallel operations with promises
// Getting data, users and products
Promise.all([
requestP('data.json'),
requestP('users.json'),
requestP('products.json')
])
.then(function(data) {
console.log('Parallel promises >>>', data);
});The fetch API is the new Ajax substitute. We have a lot of new features and a very nice promise-based API:
// Promises with the fetch API
// Getting data
fetch('data.json')
.then(function(data) {
return data.json();
})
.then(function(data) {
console.log('Promises+fetch/data >>>', data);
});
// Getting users
fetch('users.json')
.then(function(data) {
return data.json();
})
.then(function(users) {
console.log('Promises+fetch/users >>>', users);
});
// Getting products
fetch('products.json')
.then(function(data){
return data.json();
})
.then(function(products) {
console.log('Promises+fetch/products >>>', products);
});New powerful friend, generators
Generators basically are functions that can have their execution paused. Take a look on what we can do with generators:
// Generators
function request(url) {
ajax(url, (response) => {
iterator.next(JSON.parse(response));
});
}
function *main() {
// Getting data
let data = yield request('data.json');
// Getting users
let users = yield request('users.json');
// Getting products
let products = yield request('products.json');
console.log('Generator/data >>>', data);
console.log('Generator/users >>>', users);
console.log('Generator/products >>>', products);
}
var iterator = main();
iterator.next();The new awesome beast, async functions
With async functions, we can await on Promises.
Take a look (awesomeness alert):
(async () => {
// Getting data
let data = await requestP('data.json');
// Getting users
let users = await requestP('users.json');
// Getting products
let products = await requestP('products.json');
console.log('ES7 Async/data >>>', data);
console.log('ES7 Async/users >>>', users);
console.log('ES7 Async/products >>>', products);
})();With the fetch API:
(async () => {
// Async/await using the fetch API
try {
// Getting data
let data = await fetch('data.json');
// Parsing data
let parsedData = await data.json();
// Getting users
let users = await fetch('users.json');
// Parsing users
let parsedUsers = await users.json();
// Getting products
let products = await fetch('products.json');
// Parsing products
let parsedProducts = await products.json();
console.log('ES7 Async+fetch/data >>>', parsedData);
console.log('ES7 Async+fetch/users >>>', parsedUsers);
console.log('ES7 Async+fetch/products >>>', parsedProducts);
} catch (error) {
console.log(error);
}
})();Parallel operations with async:
(async () => {
let parallelData = await Promise.all([
requestP('data.json'),
requestP('users.json'),
requestP('products.json')
]);
console.log('Async parallel >>>', parallelData);
})();Parallel operations with async + fetch (Oh my god this is great!):
(async () => {
let parallelDataFetch = await Promise.all([
(await fetch('data.json')).json(),
(await fetch('users.json')).json(),
(await fetch('products.json')).json()
]);
console.log('Async parallel+fetch >>>', parallelDataFetch);
})();How to run this experiment
npm install
gruntServe the dist folder, open the /sample/index.html and check it out you dev-tools console.
References
http://jakearchibald.com/2014/es7-async-functions/ http://pouchdb.com/2015/03/05/taming-the-async-beast-with-es7.html http://www.sitepoint.com/simplifying-asynchronous-coding-es7-async-functions/