Async.js

When a function is executed asynchronously, the execution of subsequent calls to other functions does not stop until the end of the first one. For example:

Since $ .set () is asynchronous, the following functional call (to display products) will be executed immediately, regardless of whether they have been able to get the products or if the request failed. This means that our data is not available for display, because it is still running the previous call to find them.

Now the main problem with asynchronous programming is how to call asynchronous functions that depend on each other. How does a function ensure that is over before calling the function B?

Callback pattern

In the callback pattern, a function is passed as an argument to an asynchronous method. When the call is over, the “host” executes the callback function.

In fact, the above example implements the callback pattern, in half. The method of jQuery $ .get () takes two arguments: the first is the URL to be obtained, and the second is the callback function to execute once the data arrives. In the above example, we are passing an anonymous function as the second argument to $ .get (). This function takes data from the server as an argument, and only runs when data is ready.
To adapt the above code (which is wrong) to the callback pattern, you only have to move the call to showProducts () within the callback of $ .get ():

This ensures that showProducts () is executed only after obtaining the products.

Hell Callback

Callbacks themselves are not bad. But the frequent misuse of callbacks in our industry has led to the notion of “hell” callbacks: nesting many callbacks code ends up being unreadable.

Just like one tries to avoid nested if / else statements, you should do the same with callbacks, such as:

There are several problems with the code above.

It is difficult to follow the complicated flow control and isolate trouble spots. The second reason is that in the above code, are closely linked one function to another. This makes it difficult to reuse in other situations, it is difficult to gradually improve over time, and is difficult to prove.

Promises
An alternative for handling an asynchronous code is to use promise objects. There are a lot of different implementations of JavaScript promise object, but the basics are the same.

A promise represents a value that is still being repaired or calculated. A promise object can answer questions about their status, such as “Did they get my data?” or “Were there errors during the production?” Once a promise object and the value obtained is in the “Fulfilled”, it can alert other data objects that have come and dependent functions can be executed.

For more information see:
https://developer.mozilla.org/es/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise

The promises are very useful, but we will focus on async.js library in this post. Async.js is easier to start and is especially convenient for refactoring a case of “callback hell”. The promises are implemented differently in all browsers, and popular libraries promises (Q, jQuery deferreds, among others) deserve their own blog post each.

You can start using without any knowledge of Async.js promises.
The promises are very useful, but we will focus on async.js library in this post. Async.js is easier to start and is especially convenient for refactoring a case of “callback hell”. The promises are implemented differently in all browsers, and popular libraries promises (Q, jQuery deferreds, among others) deserve their own blog post each.

You can start using without any knowledge of Async.js promises.

Async.js

Async.js is a library that provides powerful functions to work with asynchronous JavaScript. Although originally designed to use with Node.js, it can also be used directly in the browser.

The above example could be refactored using Async.js and would look like this:

Another option is to pass an array of functions and a final callback to check if there was an error in any of the initial callbacks (if there had been an error in any callback, it would not continue its execution and it would show “There was an error” in the console browser in this example):

This library has other great features like waterfall (for when a callback needs to work with the results of previous callback), parallel (to run parallel functions), among others. You can see the complete documentation Async.js, here:

This library has other great features like waterfall (for when a callback needs to work with the results of previous callback), parallel (to run parallel functions), among others. You can see the complete documentation Async.js, here: https://github.com/caolan/async#documentation

Share this articleShare on LinkedInTweet about this on TwitterShare on FacebookShare on Google+Email this to someone
Go Back