Asynchronous Programming in JavaScript: A Beginner’s Guide to Promises and Async/Await

Welcome to this beginner-friendly guide on asynchronous programming in JavaScript. In this tutorial, we will be discussing the concepts of Promises and Async/Await, which are essential when working with asynchronous programming. Asynchronous programming is crucial when you need to perform tasks without blocking the main thread of execution in JavaScript. This allows you to perform tasks like fetching data from an API, reading a file, or making database queries without freezing the UI or causing your application to become unresponsive.

Introduction to Asynchronous Programming

JavaScript is a single-threaded language, which means it can only execute one task at a time. However, in real-world applications, we often need to perform time-consuming tasks such as network requests or file operations. To prevent these tasks from blocking the main thread and keeping our applications responsive, we use asynchronous programming.

Asynchronous programming allows you to perform these time-consuming tasks in the background, without blocking the main thread. JavaScript has evolved over time, introducing different techniques to handle asynchronous operations. Some of the most common techniques are:

Callback Functions
Promises
Async/Await

In this blog post, we'll focus on the latter two techniques, Promises and Async/Await, as they are more modern and provide a cleaner way to handle asynchronous code.

Understanding Promises

A Promise is a JavaScript object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. A Promise is in one of three states:

Pending: The initial state; neither fulfilled nor rejected.
Fulfilled: The operation completed successfully, and the Promise has a resulting value.
Rejected: The operation failed, and the Promise has a reason for the failure.

A Promise is said to be "settled" if it is either fulfilled or rejected.

To create a Promise, you can use the Promise constructor, which takes a single argument: a function called the "executor". The executor function takes two arguments: a resolve function and a reject function.

const myPromise = new Promise((resolve, reject) => {
  // Perform the asynchronous operation
});

The resolve function is used to fulfill the Promise with a value, while the reject function is used to reject the Promise with a reason.

Handling Promise Results

Once a Promise is settled, you can use the .then() method to attach callbacks that will be called when the Promise is fulfilled or the .catch() method to attach callbacks that will be called when the Promise is rejected. You can also use the .finally() method to attach callbacks that will be called when the Promise is settled, regardless of its outcome.

myPromise
  .then((value) => {
    console.log('Promise fulfilled with value:', value);
  })
  .catch((reason) => {
    console.error('Promise rejected with reason:', reason);
  })
  .finally(() => {
    console.log('Promise settled');
  });

Chaining Promises

Promises can be chained together using the .then() method. When a callback inside a .then() method returns a value, it will be passed to the next .then() in the chain. If the callback returns a Promise, the next .then() will wait for that Promise to be settled before executing.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise1
  .then((value) => {
    console.log('First value:', value);
    return value + 1;
  })
  .then((value) => {
    console.log('Second value:', value);
    return new Promise((resolve, reject) => {
      setTimeout(() =>        resolve(value + 1);
      }, 1000);
    });
  })
  .then((value) => {
    console.log('Third value:', value);
  })
  .catch((reason) => {
    console.error('Promise rejected with reason:', reason);
  })
  .finally(() => {
    console.log('All Promises settled');
  });

In the example above, we first create a Promise promise1 that resolves with the value 1 after a 1-second delay. We then chain multiple .then() methods to handle the value and create a new Promise that resolves after another 1-second delay. The final .then() method logs the third value, and the .catch() and .finally() methods handle rejection and settlement, respectively.

Introduction to Async/Await

Async/Await is a more recent addition to JavaScript, providing a cleaner and more readable way to handle asynchronous code using Promises. The async and await keywords allow you to write asynchronous code that looks and behaves like synchronous code.

Async Functions

An async function is a function that is declared with the async keyword before the function keyword or before the parentheses for arrow functions.

async function myAsyncFunction() {
  // ...
}

const myAsyncArrowFunction = async () => {
  // ...
};

An async function always returns a Promise. If the function returns a value, the Promise will be fulfilled with that value. If the function throws an exception, the Promise will be rejected with the exception.

Await Keyword

Inside an async function, you can use the await keyword to wait for a Promise to be settled before continuing the execution of the function. The await keyword can only be used inside an async function and will cause the function to pause and wait for the Promise to be fulfilled or rejected.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

In the example above, we use the await keyword to wait for the fetch() function to return a response and then wait for the response.json() method to return the parsed data. If an error occurs during the fetch operation or while parsing the JSON, the catch block will handle the error.

Combining Promises and Async/Await

Promises and Async/Await can be used together to create more complex asynchronous workflows. You can use the Promise.all() method to wait for multiple Promises to be fulfilled before continuing the execution of an async function.

async function fetchMultipleData() {
  try {
    const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];

    const fetchPromises = urls.map((url) => fetch(url));

    const responses = await Promise.all(fetchPromises);

    const dataPromises = responses.map((response) => response.json());

    const data = await Promise.all(dataPromises);

    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

In the example above, we create an array of fetch Promises and use Promise.all() to wait for all of them to be fulfilled. We then create an array of Promises to parse the JSON data and use Promise.all() again to wait for all the data to be parsed before logging the results.

FAQ

Q: What is the difference between Promises and callbacks in JavaScript?

A: Callbacks and Promises are both techniques for handling asynchronous operations in JavaScript. Callbacks are functions that are passed as arguments to other functions and are executed at a later time when the asynchronous operation completes. Promises, on the other hand, are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises provide a cleaner and more structured way to handle asynchronous code compared to callbacks, which can lead to the so-called "callback hell" when dealing with complex nested callbacks.

Q: Can I use async/await with any function that returns a Promise?

A: Yes, you can use async/await with any function that returns a Promise. The await keyword is used to pause the execution of an async function until the Promise is settled (either fulfilled or rejected), allowing you to write asynchronous code that looks and behaves like synchronous code.

Q: How do I handle errors with async/await?

A: To handle errors with async/await, you can use a try/catch block inside your async function. When an error occurs, the catch block will be executed, allowing you to handle the error gracefully.

async function fetchAndHandleData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Q: How can I run multiple asynchronous operations concurrently using async/await?

A: To run multiple asynchronous operations concurrently using async/await, you can use the Promise.all() method. This method takes an array of Promises and returns a new Promise that is fulfilled with an array of the fulfilled values, in the same order as the input Promises. The returned Promise is rejected if any of the input Promises are rejected.

async function fetchAllData(urls) {
  try {
    const fetchPromises = urls.map((url) => fetch(url));
    const responses = await Promise.all(fetchPromises);
    const dataPromises = responses.map((response) => response.json());
    const data = await Promise.all(dataPromises);
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Q: Can I use async/await in a forEach loop?

A: While it's technically possible to use async/await within a forEach loop, it is not recommended because the loop will not wait for the async operations to complete before continuing to the next iteration. Instead, you should use a for...of loop or the map() method in combination with Promise.all() to properly handle asynchronous operations within a loop.

// Using a for...of loop
async function processData(array) {
  for (const item of array) {
    const result = await someAsyncOperation(item);
    console.log('Result:', result);
  }
}

// Using map() and Promise.all()
async function processData(array) {
  const results = await Promise.all(array.map((item) => someAsyncOperation(item)));
  console.log('Results:', results);
}