How To Handle Asynchronous JavaScript: The 2021 Way

Introduction

A Brief History Of Asynchronous JavaScript

Then, we got Promises. Using this pattern, the code was now much easier to handle, but many cases of the same code were repeated to manage the application’s flow properly. This was in direct contrast to the Don’t Repeat Yourself (DRY) principle.

The latest addition came in the form of async/await statements, which finally made asynchronous code in JavaScript easy to read and write as any other code piece.

Let’s take a glance at the samples of each of these solutions and reflect on the evolution of asynchronous programming in JavaScript.

Go Through This Simple Task To Help Us Understand The Concepts:

  1. Get tasks for the user.
  2. Log the user’s access time.

Approach 1: Callback/Callback Hell/The Pyramid of Doom

Each function gets an argument which is another function that’s called with a parameter that’s the response of the previous action. As these functions tend to get more and more complex, the nesting starts to extend, and it becomes a nightmare for the developer to stay on track of the inner conditional statements and nesting.

Too many folks will experience headaches just by reading the code above. Having an application with many similar code blocks will cause even more trouble for the person maintaining the code, despite the fact that they wrote it themselves.

Once you realise that db.getTasks is another function containing nested callbacks, this example gets even more complicated.

In addition to having code that is difficult to maintain, the Don’t Repeat Yourself (DRY) principle has absolutely no value in this case. For example, error handling is repeated in each function and, therefore, the main callback is called from each nested function. More complex asynchronous JavaScript operations, like looping through asynchronous calls, pose an even more significant challenge.

That’s where JavaScript Promises come in to (kind of) save the day.

Approach 2: Promises

What Is A Promise?

A promise has handlers that are queued up to its then method called when either a promise is fulfilled or rejected.

With promises in place, our code would look much cleaner and easier to understand.

To attain this form of simplicity, the functions used in the example need to be Promisified. Let’s take a look at how the getTasks method would be updated to return a Promise:

We have modified the getTasks method to return a Promise, with two callbacks, and the Promise itself performs actions from the technique. The reject and resolve callbacks will be assigned to promise.then and promise.catch methods, respectively.

You will find that the getTasks method is still internally prone to the pyramid of doom phenomenon. This is related to how database methods are created as they do not provide us with a Promise. If our database access methods also returned Promise the getTasks process would look similar to the code shown below:

Approach 3: Async/Await

ECMAScript 2017 brought in async/await which was syntactic sugar on top of Promises. This was one of the coolest improvements in JavaScript.

Async/Await was one of the coolest improvements in JavaScript which was brought in as syntactic sugar on top of promises by ECMAScript 2017. It enabled developers to write asynchronous promise-based code which behaved just like any synchronous code, but without blocking the main thread, as this code sample demonstrates:

The verifyUser method should be defined using an async function as only inside these functions; it is possible to await promises. This small change enables you to await promises without making any other changes to the other existing methods.

Async functions are the subsequent logical step in the evolution of asynchronous programming in JavaScript. They will make your code a lot cleaner and simpler to manage. Declaring a function as async will ensure that it always returns a Promise, so you don’t have to be worried about it anymore. In case you face any troubles, you can always consult with or hire a Node.js developer to help you out.

Benefits Of Using Async-Await:

  1. The resulting code is much cleaner.
  2. Debugging is much simpler. You’ll be able to step through await calls as if they were synchronous calls.

Wrapping Up

Through this blog, we have tried to anticipate how web development developers, such as yourself, can handle AJAX in 2021. While it may be a combination of primary and a few advance principals, the motive is to help the community. In case of further questions, feel free to drop in at the comments section below!

Originally published at https://www.zealousweb.com.

We Fuel Notions that grow! We know Web, We know your industry and we’re here to help you.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store