async.js for to make your javascript asynchronous

I don’t need to go into their definitions. Synchronous javascript is blocking execution of javascript where everything stops executing until that piece of code done processing on VM or callback is received. Like jQuery’s AJAX when you setasync:false. Asynchronous on other hand, does not block call stack, rather it registers an event which will be resolved when code is done processing or callback is received.

While working on node.js, all of it’s API is asynchronous. Except few like fs where they also provide synchronous CRUD. But where it is asynchronous, it’s very hard maintain an order.

http.get('url-1', callback1) // request 1
http.get('url-2', callback2) // request 2
http.get('url-3', callback3) // request 3
http.get('url-4', callback4) // request 4

In above example, there is no way to provide an order to http GET requests. Either you have to initiate next request from inside of the callback of previous request or simply put them inside setTimeout block which is awful.

Async.js is a library which gonna make your life simpler than you thought. Read their API documentation here and install/use on node or browser.

npm install --save async
bower install async

So, how does it work? Have you used lodash or underscope.js? Even if you haven’t, simple example is javascript’sforEach, map, reduce or filter function. They are synchronous function, but if there is any asynchronous code block inside the loop, you are fued for life**.

This is where async.js comes into play. They provide similar functions but in asynchronous manner where next loop call will not be called unless first resolves manually. Yes, we need to call next call in loop call stack manually to tellasync that we are done with current call.

So, let’s take asyncJS’s .map function. We have an array of numbers but we need to transform that array into squares of each elements but asynchronously. Hence we will use setTimeout block with 1s latency. Normally, we return the number we want to replace in the current place the element inside map function, but here, we can not do that. async.jsexpect a callback from inside map function with two arguments. First one will be error and second will be value to transform/replace.

const async = require('async');
async.map(
[1,2,3],
function(val, callback){
// loop callbacks
setTimeout(function(){
callback(null, val * val);
}, 1000);
}, function(err, Tarr){
// final callback
}
)

In above example, first parameter is array we want to transform. Second parameter is where all magic happens. As I said, until callback is called, loop will be frozen.

We have passed null as first argument to the callback because we don’t have any errors. If we passed a truthy object instead of null, loop will stop and final callback will be called with error object.

Second argument to callback function inside loop will be the number that we want to replace with in the transformation. One callback is called, loop will move to next call in call stack.

When all callbacks has been consumed by async.js without any errors, it will go to final callback of the function. Here,err object will be null as we didn’t pass any error. Tarr will be a new transformed array [1,4,9].

There are tons for functions like this that you can use to perform javascript tasks asynchronously. These are calledcollection methods

There are other functions that async.js provides to control the flow of function executions called as control flowfunctions.

Let’s take http get request example once again. As we want to provide an order or a flow to these request, we need to use series or waterfall control flow function from async.js.

async.series([
function(callback){
http.get('url-1', function(res1){
callback(null, res.data);
})
},
function(callback){
http.get('url-2', function(res2){
callback(null, res.data);
})
},
...
], function(err, data){
//data => [res1.data, res2.data, ...]
})

.series function will not call next function in flow until first one resolves by calling callback. Styles of evoking callback is the same as earlier. Final callback to series function is also the same as map where first parameter is error object if any. But the second data object is array with responses collected from resolution of each callback function in the flow.

There are waterfall, parallel, cargo, queue and forever functions which provide similar control flow.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.