Mastering Async Code in JavaScript: From Callbacks to Async/Await

Imagine opening a weather app, and it hangs while fetching data — frustrating, right? Asynchronous JavaScript comes to the rescue, allowing your app to stay smooth and responsive while handling multiple tasks simultaneously. It ensures that while the app fetches data, the rest of the interface remains responsive.

But how do you manage asynchronous code efficiently?

Let’s explore three popular approaches: Callbacks, Promises, and Async/Await.

Before we dive into these topics, check out my previous article, which unravels the inner workings of Asynchronous JavaScript, providing a solid foundation for today’s discussion.

You can find the link here.

Inside the World of Asynchronous JavaScript

Understanding Callbacks:

A callback is just a function you pass to another function, which is called after some work is done. It’s like setting a timer to remind you to do something after a certain task finishes.

Example:

function greetUser(name, callback) {
  setTimeout(() => {   
    console.log('Hello, ' + name + '!');
  }, 2000);     // Simulates a delay of 2 seconds
  callback();     // Calls the callback immediately
}

function sayGoodbye() {
  console.log('Goodbye!');
}

// Using the callback
greetUser('Alice', sayGoodbye);

Output:

Goodbye!
Hello, Alice!

When greetUser('Alice', sayGoodbye) is called:

• Immediately, it calls sayGoodbye(), which logs Goodbye!
• After 2 seconds, the setTimeout completes, and the greeting Hello, Alice! is logged.

The Challenge of Callback Hell

• As projects become more complex, simple callbacks often become deeply nested structures, leading to what’s infamously known as ‘Callback Hell’ or the ‘Pyramid of Doom.’

• This makes your code difficult to read and introduces challenges in debugging and error handling — especially when each callback depends on the result of the previous one.

function task(name, callback) {
  setTimeout(() => {
    console.log(`${name} completed`);
    callback();
  }, 1000);
}

// Callback Hell
task('Task 1', () => {
  task('Task 2', () => {
    task('Task 3', () => {
      console.log('All tasks completed');
    });
  });
});

• The task function takes a task name and a callback. It simulates an asynchronous operation using setTimeout.
• Each task calls the next one in a nested manner, leading to a Callback Hell situation.

Output

Task 1 completed
Task 2 completed
Task 3 completed
All tasks completed

As apps become more complex, using callbacks alone feels like walking through quicksand. Luckily, promises came along to offer a more structured, readable way of handling async tasks.

Promises: A Cleaner Approach

A Promise in JavaScript represents a value that may be available now, later, or possibly never.

Promises can be in one of the 4 states:

• pending: The operation is still ongoing.
• resolved (or fulfilled): The operation was completed successfully.
• rejected: The operation has failed.
• settled: The promise has been concluded, either fulfilled or rejected.

A Promise is created using the Promise constructor, which accepts a callback function with two parameters: resolve and reject.

Example:

Let’s convert the callback hell example to a promise-based approach to demonstrate how promises make asynchronous code cleaner and more manageable.

function task(name) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`${name} completed`);
      resolve();
    }, 1000);
  });
}

The task() function now returns a promise that is resolved after setTimeout is complete.

Promise Chaining: Each task is run sequentially, and .then() is used to ensure the next task is called after the previous one finishes, avoiding callback hell.

Let’s call the function task:

// Promise Chain
task('Task 1')
  .then(() => task('Task 2'))
  .then(() => task('Task 3'))
  .then(() => console.log('All tasks completed'))

Error Handling with Promises

Handling errors is crucial when working with asynchronous code, especially when you’re dealing with external data sources like APIs. Promises give us a structured way to catch and handle errors gracefully using the .catch() method.

Below is a simple example to demonstrate the error handling in Promises:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject("Error fetching data: " + error))
  });
}

fetchData('https://example.com/api')
  .then(data => console.log(data))
  .catch(error => console.error(error))
  .finally(() => console.log("Fetch attempt completed."));

The fetchData function gets information from a website (or API) and either shows the data if successful or an error message if something goes wrong.

Promises helped tidy up the chaos of callbacks, but chaining promises can still be tricky for complex applications. That’s where async/await shines: it offers a more straightforward, readable solution.

Async/Await: Simplifying Asynchronous Code

Async/await, introduced in ES8, simplifies working with promises by making asynchronous code look like synchronous code while remaining non-blocking.

This not only eliminates the dreaded Callback Hell but also enhances code readability.

Example:

async function fetchData() {   
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
}  

fetchData();

The async keyword defines an asynchronous function that returns a Promise, while await pauses execution until the Promise resolves.

Error Handling with Async/await

Error handling is a critical aspect of async operations, especially when working with APIs or external services.

Using try/catch blocks inside async functions ensures that even if an API call fails, your application can handle it gracefully, displaying a user-friendly message or retrying the operation.

async function getData(url) {

  try {
    const response = await fetch(url);  // Wait for the fetch request to complete
    const data = await response.json();   // Wait for the response to be converted to JSON
    console.log(data);  // Print the data
  } 

  catch (error) {
    throw new Error("Error fetching data: " + error);  // Throw an error if something goes wrong
  }
}

// Call the getData function
getData('https://example.com/api');

Comparison Table

Conclusion

Mastering asynchronous JavaScript is your key to unlocking faster, more responsive apps.

• Callbacks: Simple but can lead to Callback Hell; best for basic asynchronous tasks.
• Promises: Clean up callback chains and allow for better error handling; ideal for managing multiple asynchronous operations.
• Async/Await: Makes code more readable and easier to maintain; recommended for complex applications.

If you enjoyed this article, feel free to give it a 👏 to show your support! Happy reading!