JavaScript – From callbacks, promises to async / await

Those of us who have dig deeper into Javascript will know that this is a single thread, which means that it can only do one job at a time. However, imagine that, when we call the API and while waiting for the result to return, the main thread gets blocked so the site cannot respond or interact with the user, until the API call has completed. socks. That is why the concept of asynchronous (asynchronous) appears in Javascript. There are 3 ways to do asynchronous implementation in Javascript: callbacks, Promises, and async / await. Let’s find out together!

Callback

In javascript, we can pass a function as an argument of another function, which is the callback. First of all, we will look at an example using the following callback:

We can see that in the doHomework function, we pass the second parameter as another function and will be called inside the function that wraps it, the callback function. The code above will “fire” two alerts, which is Starting my math homework. , then comes Finished my homework . This example is very easy to understand, right.

I will take one more example of using the callback to solve the problem of calling request and waiting for the response to return as I mentioned at the beginning of the post:

The above request function has one parameter, which is the callback function. This function will be called when the request is successfully created ( callback(null, xhr.response) ) or fails ( callback(xhr.status, null) ).

The callback function is very easy to understand and use, however, to perform complex code, the callback shows its weakness, which is callback hell , it will make our code very bad, difficult to read and difficult to maintain. For a very long time, we had to rely on callbacks to work with asynchronous code in javascript. As a result, many of us have had terrible experiences dealing with functions that look like this:

Promises

With promises, you can write asynchronous code that is easier to read and maintain. To use promises, we declare with the new Promise keyword:

Let’s analyze the above code:

• A promise is initialized with the new keyword, with resolve and reject as two parameters passed.
• Inside the Promise function, resolve will be called when the code is executed correctly, otherwise reject will be called.
• When resolve is called, the code inside the .then function is executed, and with reject , the code inside .catch is executed.

In order to properly use Promises, we need to note the following:

• resolve and reject only accept one parameter even if you pass the two resolve('yey', 'works') parameters, they only accept the first parameter as ‘yey’ and pass that parameter to the callback function in .then
• If you want to use .then serial .then need to add return otherwise the value of next .then call will be undefined
• When using .then succession, if an error occurs, the code will skip executing the next .then function until the .catch appears.
• A Promise has 3 statuses: pending while waiting for a resolve or reject be called, to be resolved and rejected . Once the Promise is resolved or rejected , it cannot be changed anymore.

Async / await

Async / await is a feature for working with the last asynchronous functions I want to talk about. Compared to callbacks and Promises, async / await will make our code easier to understand and much more interesting. Async / await is built on Promises and is compatible with all API-based Promises.

First, let’s learn about async / await concepts:

• Async : The async keyword is equivalent to declaring a new Promise
  • Automatically converts an ordinary function into a Promise.
  • When the async function is called, it will process everything and return the result in its function.
  • Async allows to use Await.
• Await : As its name suggests : “Wait a minute”
  • When pre-booking a Promise, it waits until the Promise ends and returns results.
  • Await works only with Promises, it doesn’t work with callbacks or works alone.
  • Await can only be used inside async functions.

I will take the example of sending the request as above, but do it by async / await:

We will make the request send:

In the above code, the request(userGet) function will be executed, when the response is successful, it will be assigned to the users variable, then the code below will be executed. Through the above example we can see that using async / await makes our code look like normal synchronous code, very easy to read and understand compared to callbacks or Promises.

Conclude

All 3 methods I introduced above have their own advantages, so let’s use them most effectively depending on the target and different contexts. Proficient and efficient use of these methods will make maintaining code a lot easier.

References :

https://medium.com/free-code-camp/javascript-from-callbacks-to-async-await-1cc090ddad99

https://topdev.vn/blog/giai-thich-ve-async-await-javascript-trong-10-phut/