Async operations in JavaScript

January 06, 2019

• 4 min read

Async

Photo by Héctor J. Rivas on Unsplash

Synchronous tasks/programs are the ones in which each instruction is executed step by step, each blocking the processor until it completes execution. Asynchronous on the other hand does not block the processor but execute the tasks in parallel or use a mechanism that makes it look like they work in parallel. To achieve parallelism most programming languages use the concept of threads. The main thread spawns other threads to do some work so that the main program is not blocked.

Javascript is a synchronous language, it is single threaded. Javascript takes on parallelism with the help of something called event loop. The workings of the event loop are amazing but out of the scope of this post. I would recommend you to watch this talk by Philip Roberts. He explains it in-depth and in a fun way. In simple terms event loop makes it look like different tasks in our program are executing in parallel but that’s not the case. Asynchronous code looks different and behaves differently then synchronous one. If you are not careful then you might face issues such as undefined being used rather than the actual value of the async operations.

Why not just go Synchronous?

Well if we just went with Synchronous operations then our programs, UI would be unresponsive during the operation. Imagine if you could not interact with the page each time it made an API call, all the websites would feel laggy and you would get irritated. If your program was dealing with some CPU heavy task other tasks also would have to wait. This would not be a good world to live in. Input-output operations, Network calls are few examples of async operations.

Dealing with async operations

There are different mechanisms that help you deal with async operations lets get into them.

Callbacks

A callback is a function that will be executed when an async operation is completed. You pass the callback to the async operation and it calls the function when it’s done executing. Let’s take an example of reading from a file. To do this we will use the fs module from Nodejs.

const fs = require('fs') // syntax to load a module
fs.readFile('/file-path', (err, data) => {
  if (err) console.log(err)
  console.log(data)
})

A thing to note about callbacks for most of the operations is their function signature. The convention is that the first argument will be an error object if some error occurred null/undefined otherwise, and the second will be the result of the operation.

Although callback helped us dealing with async operations it created another problem for us, the callback hell.

Callback hell

Consider this situation, you have file1 that has the name of the file2 that you want to read data from. Well, this exact scenario with files is strange but this happens commonly when dealing with API calls when you need to call the second API based on the result of the first one.

const fs = require('fs') // syntax to load a module
fs.readFile('/file1', 'utf8', (err, file2) => {
  if (err) console.log(err)
  fs.readFile(`${file2}`, (err2, data) => {
    if (err) console.log(err2)
    console.log(data)
  })
})

You have callback inside another callback if you had to do another operation add more callback and so on. The code becomes difficult to look at, debug. As your codebase grows this will lead to bugs, maintenance issues.

Promises

Promises are alternatives to a callback, to use this you need a function that returns a promise object. A promise can either resolve (be successful) or reject (some error occurred), pending: still executing.

This makes the syntax much simpler

readFile('file-path')
  .then(res => {})
  .catch(err => {})

.then() and .catch() also return a promise so you can have another async operation inside of your then without having to go through callback hell.

The .catch() block helps you handle any error that occurs in the .then() chain.

There are few operations that still don’t support promises, as of this writing the fs module does not support promises, to solve this you would rather write a wrapper around this, use fs-extra npm package or if you are using node 8 and above use util.promisify() method.

const util = require('util')
const fs = require('fs')

const readFile = util.promisify(fs.readFile)

readFile('./test.txt', 'utf8')
  .then(res => {
    console.log('File data ', res)
  })
  .catch(err => {
    console.log(err)
  })

Async/ Await

While promises made our life easy async await has made it even easier. This is a different syntax internally async-await uses promises, generators. The syntax is so clean that an async piece of code looks synchronous. This is amazing as debugging becomes simpler. There are two steps when using this, use the async keyword before a function that is asynchronous, use the await keyword to wait for the async function to return data. You can use the async keyword only inside an async function.

async function getData() {
  let data = await readFile('./test.txt', 'utf8')
  console.log(data)
}
getData()

Error handling in Async / Await

Since Async await are just promises you can just chain a catch block after the async operation, just like with normal promises. If you are not a fan of this you can also use a traditional try-catch block.

If you are starting with node I hope this article helps, in the future article we will take a look at how much asynchronous code helps when dealing with API calls. If you are facing issues with the result of asynchronous operations do check how you have handled them.

Do share the post if you liked it.

Share on