Javascript Es6 Promises And Async Await Complete Guide

Step 1: Understanding Asynchronous Operations

Before diving into Promises and async/await, it's important to understand what asynchronous operations are in JavaScript. An asynchronous operation is one that completes in the future, not immediately. Common examples include network requests, timers, and reading files.

Example of an Asynchronous Operation

console.log("Start");

setTimeout(() => {
  console.log("This prints after a 2-second delay");
}, 2000);

console.log("End");

Output:

Start
End
This prints after a 2-second delay

Step 2: Introduction to Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

Basic Example

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success: Data retrieved!");
  }, 2000);
});

promise.then((message) => {
  console.log(message);
}).catch((error) => {
  console.error(error);
});

Output:

Success: Data retrieved!

In this example:

• A new Promise is created with a function that takes two parameters, resolve and reject.
• Inside the Promise, setTimeout is used to simulate an asynchronous operation.
• After 2 seconds, resolve is called with a success message.
• The .then() method is used to handle the resolved value (the success message).
• The .catch() method is used to handle any errors that might occur (though in this case, we don’t expect any).

Handling Errors

Let's modify the previous example to include an error condition:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // Simulate an error
    let errorOccurred = true;
    if (errorOccurred) {
      reject("Error: Something went wrong!");
    } else {
      resolve("Success: Data retrieved!");
    }
  }, 2000);
});

promise.then((message) => {
  console.log(message);
}).catch((error) => {
  console.error(error);
});

Output:

Error: Something went wrong!

Step 3: Chaining Multiple Promises

You can chain multiple Promises using .then(). This allows you to perform a series of asynchronous operations in order.

Chaining Example

function fetchData(url) {
  return new Promise((resolve, reject) => {
    console.log(`Fetching data from ${url}`);
    setTimeout(() => {
      resolve({ url, data: "Fetched data!" });
    }, 2000);
  });
}

function processData(dataObj) {
  return new Promise((resolve, reject) => {
    console.log(`Processing data from ${dataObj.url}`);
    setTimeout(() => {
      resolve({ ...dataObj, processedData: `${dataObj.data} - Processed!` });
    }, 1000);
  });
}

fetchData('http://example.com')
  .then((dataObj) => {
    return processData(dataObj);
  })
  .then((finalData) => {
    console.log(finalData.processedData);
  })
  .catch((error) => {
    console.error(error);
  });

Output:

Fetching data from http://example.com
Processing data from http://example.com
Fetched data! - Processed!

In this example:

• fetchData and processData both return Promises.
• We chain them using .then(), where the result of one Promise is passed as input to the next.
• If any Promise is rejected, the error handling is done in the .catch() block.

Step 4: Introduction to async/await

The async/await syntax provides a cleaner way to work with Promises. async functions always return a Promise, and await can only be used inside an async function to wait for a Promise to resolve.

Simple async/await Example

function fetchData(url) {
  return new Promise((resolve, reject) => {
    console.log(`Fetching data from ${url}`);
    setTimeout(() => {
      resolve({ url, data: "Fetched data!" });
    }, 2000);
  });
}

async function performAsyncOperations() {
  try {
    let result = await fetchData('http://example.com');
    console.log(result.data);
  } catch (error) {
    console.error(error);
  }
}

performAsyncOperations();

Output:

Fetching data from http://example.com
Fetched data!

In this example:

• The performAsyncOperations function is marked as async.
• Inside the function, we await the fetchData Promise, which means the function execution will pause until fetchData resolves.
• The try...catch block is used to handle any errors that might occur during the Promise resolution.

Chained async/await Example

We can also use async/await with chained Promises:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    console.log(`Fetching data from ${url}`);
    setTimeout(() => {
      resolve({ url, data: "Fetched data!" });
    }, 2000);
  });
}

function processData(dataObj) {
  return new Promise((resolve, reject) => {
    console.log(`Processing data from ${dataObj.url}`);
    setTimeout(() => {
      resolve({ ...dataObj, processedData: `${dataObj.data} - Processed!` });
    }, 1000);
  });
}

async function performAsyncOperations() {
  try {
    let fetchedData = await fetchData('http://example.com');
    let finalData = await processData(fetchedData);
    console.log(finalData.processedData);
  } catch (error) {
    console.error(error);
  }
}

performAsyncOperations();

Output:

Fetching data from http://example.com
Processing data from http://example.com
Fetched data! - Processed!

Step 5: Concurrent Async Operations

Sometimes, you might want to perform several asynchronous operations concurrently instead of waiting for each one to finish sequentially. You can do this using Promise.all.

Promise.all Example

function fetchData(url) {
  return new Promise((resolve, reject) => {
    console.log(`Fetching data from ${url}`);
    setTimeout(() => {
      resolve({ url, data: `Data from ${url}` });
    }, Math.random() * 2000); // Random delay between 0 and 2 seconds
  });
}

let urls = ['http://api.example.com/first', 'http://api.example.com/second'];

async function fetchAllData() {
  try {
    let results = await Promise.all(urls.map(fetchData));
    results.forEach((result) => {
      console.log(result.data);
    });
  } catch (error) {
    console.error(error);
  }
}

fetchAllData();

Output: (Note that the order of the logged messages may vary due to the random timeout)

Fetching data from http://api.example.com/first
Fetching data from http://api.example.com/second
Data from http://api.example.com/first
Data from http://api.example.com/second

In this example:

• urls.map(fetchData) creates an array of Promises.
• Promise.all() waits for all Promises in the array to resolve.
• Once all Promises resolve, their results are available in the results array.
• Each result is then logged to the console.

Summary

• Promises: Objects that represent the eventual completion or failure of an asynchronous operation.
• Chaining Promises: Using .then() to perform multiple asynchronous operations in sequence.
• Error Handling: Using .catch() to handle errors for Promises.
• async/await: Cleaner, synchronous-looking syntax for dealing with Promises. Use await to pause execution of an async function until a Promise resolves.
• Concurrent Requests: Use Promise.all() when you need to perform multiple asynchronous operations at the same time and wait for all of them to complete.