Asynchronous Coding

Asynchronous coding is crucial for handling operations that take time to complete, such as network requests, file reading, and timers. JavaScript provides various mechanisms to handle asynchronous operations, including callbacks, Promises, and async/await.

1. Understanding Asynchronous Operations

Asynchronous operations allow your code to continue running while waiting for the operation to complete. This is essential for creating responsive web applications that do not block the user interface.

Example of Asynchronous Operation:

setTimeout(() => {
  console.log("This message is shown after 2 seconds");
}, 2000);

In this example, the setTimeout function delays the execution of the code inside it by 2 seconds.

2. Callbacks

A callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Example:

function fetchData(callback) {
  setTimeout(() => {
    const data = "Fetched data";
    callback(data);
  }, 2000);
}

function processData(data) {
  console.log(data);
}

fetchData(processData);

In this example:

  • fetchData simulates fetching data asynchronously and then calls callback with the fetched data.

  • processData is the callback function that processes the data.

3. Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It allows you to write cleaner and more manageable asynchronous code.

Creating a Promise:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    let success = true;
    if (success) {
      resolve("Operation successful");
    } else {
      reject("Operation failed");
    }
  }, 2000);
});

Handling a Promise:

promise
  .then((message) => {
    console.log("Success: " + message);
  })
  .catch((error) => {
    console.log("Error: " + error);
  });

In this example:

  • The Promise simulates an asynchronous operation that resolves after 2 seconds if successful.

  • The then method handles the resolved value, and the catch method handles any errors.

4. Chaining Promises

Promises can be chained to handle sequences of asynchronous operations, improving readability and maintainability.

Example:

let firstPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("First Promise");
  }, 1000);
});

let secondPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Second Promise");
  }, 2000);
});

firstPromise
  .then((message) => {
    console.log(message);
    return secondPromise;
  })
  .then((message) => {
    console.log(message);
  });

In this example, secondPromise is executed after firstPromise resolves.

5. Async/Await

Async/Await is a syntactic sugar built on Promises, allowing you to write asynchronous code that looks and behaves like synchronous code, making it easier to read and understand.

Example:

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

async function processData() {
  console.log("Start");
  let data = await fetchData();
  console.log(data);
  console.log("End");
}

processData();

In this example:

  • fetchData returns a Promise that resolves after 2 seconds.

  • processData is an async function that waits for fetchData to resolve before continuing.

6. Handling Errors with Async/Await

You can use try/catch blocks to handle errors in async functions.

Example:

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

processData();

In this example, the try block contains the code that might throw an error, and the catch block handles any errors that occur.

Use Case:

Suppose you're building a web application that fetches user data from an API and displays it. You can use async/await to handle the asynchronous operations.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Fetch User Data</title>
  </head>
  <body>
    <button id="loadUserButton">Load User</button>
    <div id="userData"></div>

    <script src="script.js"></script>
  </body>
</html>

JavaScript:

document.getElementById("loadUserButton").addEventListener("click", async function() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    let user = await response.json();
    document.getElementById("userData").innerHTML = `
      <h2>${user.name}</h2>
      <p>Email: ${user.email}</p>
      <p>Phone: ${user.phone}</p>
    `;
  } catch (error) {
    document.getElementById("userData").innerHTML = "Error loading user data";
    console.log("Error: " + error);
  }
});

In this example:

  • Clicking the button fetches user data from an API asynchronously.

  • The fetched data is displayed in the userData div.

  • Errors are handled gracefully with a try/catch block.

This use case demonstrates how to handle asynchronous operations in a web application using async/await, making your code more readable and maintainable. Understanding asynchronous coding is essential for creating responsive and efficient web applications. As you progress, you'll learn more advanced techniques and patterns for handling asynchronous operations, further enhancing your JavaScript skills.

Help us improve the content 🤩

You can leave comments here.

PreviousDynamic RenderingNextAsync/Await

Last updated