Blog

Asynchronous Programming with JavaScript Promises

Recently we began working on short and useful programming tips and tricks videos which you can find under the "How To" section on our YouTube channel. The goal of these quick tutorials is to share some of our knowledge and best practices with our passionate developer community. The first video in the series was done by our colleague Sava Katic, which you can check out below, and if you like what you see, make sure you subscribe to our channel for more free programming tutorials.

Transcription:

Hello, everyone, my name is Sava Katic, and I'm a software developer at Vivify Ideas. Today let's explore asynchronous programming, so, by understanding it better, we can write more readable, maintainable and bug-free code.

Okay, so let's take a look at a not-so-common example that will really help us understand the asynchronous behavior. Let's say we had a function that returns some data, let's say a project that takes in a callback as an argument. We will actually use the setTimeout function to mimic the asynchronous behavior and we will set it to two seconds. After that is completed, we will use the callback that was passed down and pass the name of the project to this function.

Also we should make the handlingFunction that we are going to use and just console.log the object pass down and we can call the getProject function and passing the handler.

This is actually the old fashioned classical approach to asynchronous programming where you provide a function as an argument like our callback to another function that is going to execute an asynchronous task. When the asynchronous task completes, the executing function then calls your callback function. But as JavaScript evolved, promises were made, and we can use them to refactor this code to make it more understandable. Let's return a promise here that will take in a callback with resolve and reject arguments. And it also uses the setTimeout, (the same one) and resolves the promise to a object that we just made. Instead of passing this callback function here, we can attach a "then" to our function and wait for promise to resolve. After it resolves, we can pass in the function that we made.

The main difference between callbacks and promises is that with callbacks, you tell the executing function what to do when the asynchronous task completes. Whereas with promises the executing function returns a special object to you (the promise that we made here) and then you tell the promise what to do when the asynchronous task completes.

Let's take a closer look at a more real-life example. Okay, this here is actually a good example of a callback hell from which some of applications felt the burn. We have a function that makes a request to database and passes username and password of our user. And if it returns an error, this error is passed down to our callback, or it checks if everything is fine. It checks whether this user has certain permissions to make this request. Also, if this request returns an error, this error is passed down to callback. And we have another function that logs that this request was made to the database. And if everything is fine, the callback is called with the data that we got from those requests.

Okay, so let's take a look how refactored version using promises will look like to really understand the difference and the actual gain in readability. This example actually uses the promise chaining and it makes the same database call. And every time the function returns data that we require for the next function, it is passed down to it. This doesn't really follow the dry principle that we should always follow and It can lead to many "then" calls that are trained. So the next step was actually made when async/await syntactic sugar was introduced in ES6. The same function using async/await would look like this, where this shows how making a function async and using awaits for each database call can really simplify our call and make it far more readable.

I hope this helped to grasp the concept of asynchronous programming a bit more. Next week you can join me in exploring the observables and how different they are from the concepts we have just learned.