What is a Promise?

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation.

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

States of a Promise

Promises have three states:

let promise = new Promise((resolve, reject) => {
  // initially pending
});

Example of Promise Resolution

The resolve() function signals the success of the asynchronous operation.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Success!"), 1000);
});
 
promise.then(result => console.log(result)); // "Success!" after 1 second

Example of Promise Rejection

The reject() function is used to signal failure in the operation.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("Failure!")), 1000);
});
 
promise.catch(error => console.error(error)); // Error: Failure!

Promise Methods: then, catch, finally

• then(): Used to handle the success case.
• catch(): Used to handle errors or rejection.
• finally(): Runs regardless of the outcome.

promise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Operation complete"));

Chaining Promises

Promises can be chained to handle sequences of asynchronous operations.

fetchData()
  .then(data => processData(data))
  .then(result => displayResult(result))
  .catch(error => handleError(error));

What is Async/Await?

• Async/Await is a syntactic sugar built on top of Promises, introduced in ECMAScript 2017 (ES8).
• It allows you to write asynchronous code that reads and behaves like synchronous code.
• Makes code more readable and easier to maintain, especially for complex chains of Promises.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

How async Works

• When a function is declared as async, it automatically returns a Promise.
• The async keyword allows the use of the await keyword within that function.

async function myAsyncFunction() {
  return "Hello, Async!";
}
 
myAsyncFunction().then(result => console.log(result)); // "Hello, Async!"

• Without async, the above function would just return a regular value, not a Promise.

How await Works

• The await keyword is used inside async functions to pause the execution of the function until the Promise is resolved.
• It makes asynchronous code behave as if it were synchronous, without blocking the main thread.

async function fetchData() {
  let response = await fetch('https://api.example.com/data'); 
  let data = await response.json(); 
  console.log(data); 
}

Key Characteristics of await

• Pauses execution: await pauses the function execution until the promise is settled (either resolved or rejected).
• Non-blocking: Even though await pauses the async function, it does not block the execution of other code outside the function.

async function demo() {
  console.log("Start");
  let result = await someAsyncTask();
  console.log(result);
}
console.log("Code after async call");  // This will run immediately

Handling Errors with Async/Await

• Instead of using .catch() to handle errors in Promises, async/await allows you to handle errors with try-catch blocks.

async function fetchData() {
  try {
    let response = await fetch('https://api.invalid-url.com');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

Parallelism with Async/Await

• Multiple awaits in a function will run sequentially by default. However, you can execute Promises in parallel by calling them first and then awaiting their resolution.

async function loadData() {
  let promise1 = fetch('https://api.example.com/data1');
  let promise2 = fetch('https://api.example.com/data2');
  
  let [data1, data2] = await Promise.all([promise1, promise2]);
  console.log(data1, data2);
}

Using Promise.all() with Async/Await

• Promise.all() allows you to run multiple asynchronous tasks in parallel and wait for all of them to complete.
• This is useful when you have independent asynchronous operations that can be executed simultaneously.

async function getData() {
  let [result1, result2] = await Promise.all([
    fetch('https://api.example.com/data1'),
    fetch('https://api.example.com/data2')
  ]);
 
  console.log(result1, result2);
}

Benefits of Async/Await

• Simplicity: Makes code more readable and easier to maintain compared to Promise chains.
• Error handling: Uses try-catch, making error management more straightforward.
• Non-blocking: Code execution continues normally without being blocked by async operations.

Async/Await vs Promises

• Promises: Use .then() and .catch() for handling asynchronous operations.
• Async/Await: Allows asynchronous code to be written in a synchronous style using await and try-catch for error handling.

Conclusion

• Async/Await simplifies asynchronous programming by making it more readable.
• It builds on top of Promises and is great for writing cleaner, more maintainable code.
• Always consider combining it with Promise.all() for parallelism when needed.