Things to know about asynchronous in JavaScript

Tram Ho

When programming, the “asynchronous” keyword in javascript will definitely need to be known and will certainly be important if you want to work better with it. However, understanding and using it properly is sometimes a problem.

So in this article, I would like to introduce a few basic things, which can help you solve some difficulties when approaching asynchronous programming.

1. Basics

First of all, to solve the “asynchronous” problem, you need to understand and know three common solutions: Callback, promise, async / await.

Promise solves callback issues, async / await solves promises for promises. However, depending on the case, I will use which solution is reasonable. Let’s take a look at the following examples to better understand the 3 options above.

2. Example between callback and promise

Consider the example:

This is a code for reading files

The fs.readFile function takes the path of a file and returns the argument. The callback function returns an error or null when read incorrectly and returns a file upon successful reading.

When switching to Promise:

Or write wrap in a Promise:

Now the readFileAsync function takes a file path then executes readFile and returns a promise. If the readFile error function receives an error message via reject , and if successful, it receives the file information via resolve .

We notice here, promises are also written based on callbacks. This is also a way of writing promises based on callbacks.

3. Example between promise and async / await

1. Another example with FileReader :

Read the browser file and turn it into an ArrayBuffer

Writing with callback

How to write with Promise:

Pretty clear and easy to understand, because quite similar to the previous example, however, the promise writing seems shorter and clearer.

However, let’s consider more examples working with promises and how to solve using async / await.

If you work with promises a lot, you will probably have overlapping problems like:

3 actions: getUser, getOrders, getOrders perform one after the other. However, in the above code, after taking the getOrders action, the orders of the following then cannot be accessed, because it is within the Promise callback scope previously returned from db.getOrders() .

So the solution is:

Now it is okay, however, if under the product there are a series of then again, then there are a series of initialized variables (haiz). If instead we use async / await then:

Wow, more concise and we don’t have to create more variables after each promise, all variables in getUserData have the same scope and are accessible.

In particular, you can write:

Or combine promises and async / await:

Because, async always returns a promise.

2. Another example when dealing with multiple api calls at once.

Send email to 100 customers / 1 time

However, with promise.all, it is impossible to know exactly which customers were sent an error mail, but only identified in the batch that sent the error mail.

And this is the power of async / await

Now, each item will have a response, to know if the item has successfully sent or not.

4. Conclusion

Above are some basic examples when working with callbacks, promises, async / await. However, when used, there are many other problems encountered, (because of javascript sida 😄 ), but this is also a basic knowledge for us to get closer to “asynchronous”, hoping to help you.

Thank you for reading, I hope there are many suggestions for the article to be better.

Reference source: -gi /

Share the news now

Source : Viblo