Asynchronous JavaScript: Promises, Async/Await, and Callbacks

Originally published on Makemychance.com

Asynchronous programming is a core concept in JavaScript, which allows you to perform tasks without blocking the execution of other code. This becomes especially important when dealing with operations that take time to complete, such as network requests, file I/O, or timers. In this article, we will explore the three main techniques for handling asynchronous code in JavaScript: Callbacks, Promises, and Async/Await.

1. Callbacks

Callbacks are the oldest way of handling asynchronous operations in JavaScript. A callback is simply a function passed as an argument to another function, which is then executed after the completion of a task.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 2000);
}

fetchData((message) => {
  console.log(message);
});

In the example above, fetchData simulates a network request with setTimeout, and the callback function logs the message after the request is completed.

Callback Hell

One of the downsides of using callbacks is the infamous “callback hell” or “pyramid of doom,” where multiple nested callbacks make the code difficult to read and maintain.

fetchData((message) => {
  console.log(message);
  fetchMoreData((moreData) => {
    console.log(moreData);
    fetchEvenMoreData((evenMoreData) => {
      console.log(evenMoreData);
      // And so on...
    });
  });
});

2. Promises

Promises, introduced in ES6, offer a cleaner approach to handling asynchronous tasks, helping to overcome the challenges of deeply nested callbacks. Essentially, a promise is an object that symbolizes the outcome of an asynchronous operation, whether it successfully completes or fails, and it provides a structured way to handle the resulting value.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

fetchData()
  .then((message) => {
    console.log(message);
    return "Next step";
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

In this example, fetchData returns a promise. The .then() method is used to handle the resolved value of the promise, and .catch() is used to handle any errors.

Chaining Promises

Promises can be chained, making the code more readable and maintainable.

fetchData()
  .then((message) => {
    console.log(message);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
    return fetchEvenMoreData();
  })
  .then((evenMoreData) => {
    console.log(evenMoreData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

3. Async/Await

Async/Await, introduced in ES8 (2017), is a syntactic sugar built on top of promises, making asynchronous code look and behave more like synchronous code.

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function processData() {
  try {
    const message = await fetchData();
    console.log(message);
    const moreData = await fetchMoreData();
    console.log(moreData);
    const evenMoreData = await fetchEvenMoreData();
    console.log(evenMoreData);
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

In this example, the processData function uses the await keyword to wait for the promise returned by fetchData to resolve. This makes the code much cleaner and easier to follow compared to promise chaining.

Error Handling

Error handling in async/await is done using try...catch blocks, providing a straightforward way to handle errors without the need for a .catch() method.

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}