Asynchronous JavaScript (Async JS) is crucial for building responsive and efficient applications. Asynchronous programming allows you to perform tasks without blocking the main execution thread, ensuring a smoother user experience. In this comprehensive guide, we'll dive into the core concepts of Async JS, exploring Web APIs, Promises, and various techniques for handling asynchronous code.

What is Asynchronous JavaScript?

Asynchronous JavaScript refers to the ability to execute multiple operations simultaneously without waiting for each to complete before moving on to the next. Traditional JavaScript is synchronous programming and single Threaded language which can lead to performance bottlenecks, especially in web applications where user interactions and data fetching often occur concurrently.

Asynchronous operations in JavaScript are typically managed through concepts like the event loop, callbacks, Promises, and more recently, async/await syntax.

Event Loop and Inversion of Control

The event loop is a fundamental concept in JavaScript that allows for non-blocking operations. It continually checks the message queue for new events and executes them one at a time. This mechanism ensures that the program remains responsive even during time-consuming tasks.

console.log("start");
setTimeout(()=>{
console.log("callback");
),2000)
console.log("end");

/*output
start
end
callback
*/

Inversion of control in callbacks refers to the shift of control from the main program to an external function when an event occurs. This is a key aspect of asynchronous programming, allowing developers to handle events without blocking the execution flow.

Browser APIs

Browser APIs are interfaces provided by web browsers to interact with various functionalities like DOM manipulation, HTTP requests, and more. These APIs play a crucial role in enabling asynchronous behavior in web applications.

• setTimeout()
• DOM API
• fetch()
• Local Storage
• Console

Everything In this web api gives power to window so that we can use these web api in javascript.

CALLBACK

In JavaScript, a callback is a function that is passed as an argument to another function and is executed after the completion of some asynchronous operation or at a specified time. Callbacks are a fundamental concept in asynchronous programming, allowing you to control the flow of your code when dealing with tasks like reading files, making API requests, or handling user interactions.

Suppose an example of shopping Cart so see the flow firstly we have to create an order then Proceed to payment then we want to show the order Summary and then we want to update a Wallet.

const cart=["shoes","pants","kurta"];

api.createOrder(cart,function(){
      let paymentInfo="011"
      api.proceedToPayment(paymentInfo,function(){
                  api.showOrderSummary(orderSummary,function(){
                           api.updateWallet(wallet,function(){

                 }
           }
    }           
});

so here is The Problem of multiple nested callbacks within callbacks create code that is difficult to read and maintain. This typically occurs when dealing with asynchronous operations, such as making multiple nested API requests or handling multiple levels of callbacks. The indentation levels grow deeper, leading to code that resembles a pyramid, making it challenging to follow the logic.

Here's an example of callback hell:

getUser(userId, function (user) {
  getProfile(user.username, function (profile) {
    getPosts(user.id, function (posts) {
      posts.forEach(function (post) {
        getComments(post.id, function (comments) {
          // Process comments
        });
      });
    });
  });
});

Each function relies on the result of the previous one, leading to nested callbacks. While this works, it makes the code harder to read, understand, and maintain.

CALLBACK HELL (Pyramid of Doom)

Promise

A Promise is an object representing the eventual completion or failure of an async operation. Promises are a powerful abstraction for handling asynchronous operations. They provide a cleaner and more organized way to work with asynchronous code compared to traditional callback-based approaches.

Creating a Promise

To create a new Promise, use the Promise constructor. It takes a function with two parameters: resolve and reject.

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

Promise States

A Promise can be in one of three states: pending, fulfilled, or rejected. The initial state is pending, and it transitions to either fulfilled or rejected based on the outcome of the asynchronous operation.

Consuming a Promise

To consume an existing Promise, you can use the .then method to handle the successful resolution and the .catch method for error handling. Additionally, the .finally block executes regardless of the Promise's outcome.

  .then(result => {
    // Handle success
  })
  .catch(error => {
    // Handle error
  })
  .finally(() => {
    // Execute always
  });

Chaining Promises

Chaining promises is a powerful technique that allows you to sequence asynchronous operations. This is achieved by returning a new Promise inside the .then block.

fetchData()
  .then(processData)
  .then(displayData)
  .catch(handleError);

Promisifying Functions

Promisifying involves converting callback-based functions into Promise-based functions. This is particularly useful when working with APIs or libraries that use callback patterns.

function CreateOrder(cart){
const promise=new Promise((resolve,reject)=>{
       if(!cart){
      const error=new Error("cart is not valid");
      reject(err);
         }
       const orderid="12345";
      if(orderid){
      resolve("Your order is confirmed");
       }
   })
}

Promise Methods

JavaScript provides several static methods on the Promise object, offering additional functionalities:

• Promise.resolve: Resolves a Promise with a given value.
• Promise.reject: Rejects a Promise with a given reason.
• Promise.all: Resolves when all promises in the iterable resolve.
• Promise.allSettled: Resolves when all promises in the iterable have settled (fullfilled or rejected).
  • Promise.any: Resolves when at least one of the promises in the iterable resolves.
  • Promise.race: Resolves or rejects as soon as one of the promises in the iterable resolves or rejects.

Use Promises to flatten the callback structure and handle asynchronous operations in a more organized way.

getUser(userId)
  .then(user => getProfile(user.username))
  .then(profile => getPosts(profile.id))
  .then(posts => Promise.all(posts.map(post => getComments(post.id))))
  .then(commentsArray => {
    // Process comments
  })
  .catch(error => {
    // Handle errors
  });

Async / Await

Async/await is a powerful feature introduced in ECMAScript 2017 (ES8) that simplifies asynchronous code in JavaScript. It provides a more straightforward and synchronous-like syntax for handling promises and helps mitigate the issues of callback hell.

Basics of Async/Await:

Async Function Declaration:

An async function is declared using the async keyword before the function definition.

async function fetchData() {
  // Async operations
}

Await Expression:

Inside an async function, you can use the await keyword before a promise. It pauses the execution of the function until the promise is resolved and returns the resolved value.

async function fetchData() {
  const result = await somePromiseFunction();
  // Code here executes after somePromiseFunction resolves
}

Use Async Await to flatten the callback structure and handle asynchronous operations in a more organized way.

async function fetchData() {
  try {
    const user = await getUser(userId);
    const profile = await getProfile(user.username);
    const posts = await getPosts(profile.id);
    const commentsArray = await Promise.all(posts.map(post => getComments(post.id)));
    // Process comments
  } catch (error) {
    // Handle errors
  }
}

fetchData();

Conclusion

By using these patterns, developers can improve the readability and maintainability of their code when dealing with asynchronous operations, avoiding the pitfalls of callback hell. Promises and async/await, in particular, have become widely adopted in modern JavaScript development for managing asynchronous code more effectively.