JavaScript Learn about asynchronous: Callbacks, Promises and Async / Await

Tram Ho

Most of the time we start working with JavaScript we are often confused and puzzled with the concept of asynchronous – asynchronous JS. In this article we will learn about this issue!

1. Asynchrony in JavaScript

Asynchrony in computer programming rising to the occurrence of events completed of the main program flow and ways to deal with such events.

Unlike C / C ++ or Java languages ​​… using multi-thread mechanism. This means that time-consuming tasks can be performed independently on a separate thread without interfering with the main thread. You can still do that and still be able to capture events on the main thread.
But for JavaScript is different, because the JavaScript program is single-thread , all processes execute in a sequential manner, not in parallel. Therefore can not multithreading in JavaScript that use the mechanism to handle asynchronous. Understand roughly in asynchronously, when performing tasks A and B. When starting to perform job A, continue to perform task A without waiting for A to finish. Time to perform AB is the time from A starting until A and B are finished. Thus increasing performance and increasing user experience.

There are 3 common mechanisms to help you do asynchronous in JavaScript: Callback , Promise or Async / await.

2. Callback

When executing a task, it takes a certain amount of time (eg fetch data from API). We perform a function request data and pass another function to handle the returned result ( handleResponse () () ). The handleResponse () function is now acting as the callback () function:

When the API request starts and ends, handleResponse () is now called. However, when we have to make 2 consecutive requests, request 2 can be executed only when request 1 ends. So we will have to make the 2nd request in the result of request 1. It sounds very complicated but it will look like this:

Imagine you have to make a few more requests, the result will certainly be much worse. This is called ** Callback Hell. **

To avoid Callback Hell, you can use a different mechanism. It is a Promise.

3. Promise

Unlike Callback, which needs to provide a callback function, Promise has available methods to call when the function executes success or fail, then () and catch (). It should look like this:

So similar to Callbacl Hell, what does the promise look like ??

It is clear that the program has become clearer and there are no more nested callback functions like the callback mechanism

4. Async / await

Async / await is a special syntax that helps you declare that the function will perform an asynchronous action. Await to declare waiting for the result of an asynchronous operation inside an action with the async keyword.

And even if you make many requests, it is much simpler, isn’t it. And in my opinion, this is probably the best way to handle asynchronous in JavaScript, in your opinion?


Above are some basic knowledge of handling asynchronous JavaScript with callback, promise and async / await. This article doesn’t cover Promise or async / await, it just helps you to see the basic usage, as well as their advantages compared to using a regular callback.


Chia sẻ bài viết ngay

Nguồn bài viết : Viblo