Handling Asynchronous Operations

Async JavaScript refers to techniques for handling asynchronous operations, which are tasks that take some time to complete without blocking the main thread. This allows your web page to remain responsive while waiting for these operations to finish.

There are two main ways to write asynchronous code in JavaScript:

Promises:

Promises are objects that represent the eventual completion (or failure) of an asynchronous operation. They provide a way to handle the result of the operation when it becomes available.

Async/Await:

Async/await is a syntactic sugar built on top of Promises that makes asynchronous code look more synchronous. It uses the async keyword to define asynchronous functions and the await keyword to pause execution until a Promise resolves.

Here's a breakdown of both approaches:

Promises:

Involve creating a Promise object using the Promise constructor.

The constructor takes an executor function that defines the asynchronous operation.

The executor function takes two arguments: resolve and reject callbacks.

Call resolve with the result when the operation finishes successfully.

Call reject with an error if the operation fails.

Use .then and .catch methods on the Promise to handle the resolved value or rejection.

Example:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { message: "Data from " + url };
      resolve(data); // Simulate successful data retrieval after a delay
    }, 2000);
  });
}

fetchData("https://example.com/api/data")
  .then(data => {
    console.log("Data received:", data);
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

console.log("This line executes immediately");

fetchData function takes a URL and returns a Promise.

Inside the Promise, a timeout simulates asynchronous data retrieval

resolve is called with the data object if successful.

reject is called with an error if there's an issue.

We call fetchData and use .then to handle resolved data (logging it).

.catch handles any errors during data retrieval (logging the error).

Even though fetchData is asynchronous, the line after it executes immediately because JavaScript doesn't wait for Promises.

Async/Await:

Uses async functions to declare asynchronous functions.

Uses await keyword before Promise-based operations to pause execution until the Promise resolves.

Makes asynchronous code appear more synchronous, but still relies on Promises behind the scenes.

Example:

async function fetchData(url) {
  try {
    const response = await fetch(url); // Await the fetch call (assuming fetch is available)
    const data = await response.json(); // Await conversion to JSON
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

(async () => {
  const data = await fetchData("https://example.com/api/data");
  console.log("Data received:", data);
})();

console.log("This line executes immediately");

fetchData is now an async function.

We use fetch to retrieve data and await it to pause execution until the response is received.

We use await again to convert the response to JSON and return the data.

We wrap the call to fetchData in an Immediately Invoked Function Expression (IIFE) with async keyword.

Inside the IIFE, we use await with fetchData to get the data and log it.

Similar to the Promises example, the line after the IIFE executes immediately.

Benefits of Async/Await:

Improves readability of asynchronous code compared to raw Promises.

Makes asynchronous code look more like synchronous code.