JavaScript Promises #

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Promises are a core feature of modern JavaScript for handling async code.

Creating a Promise #

You can create a promise using the Promise constructor, which takes a function (the “executor”) as an argument. The executor itself takes two functions as arguments: resolve and reject.

const myPromise = new Promise((resolve, reject) => {
 // Asynchronous operation
 setTimeout(() => {
 const success = true;
 if (success) {
 resolve("The operation was successful!");
 } else {
 reject("The operation failed.");
 }
 }, 1000);
});

Consuming a Promise #

You can consume a promise using the then(), catch(), and finally() methods.

myPromise
 .then(result => {
 console.log(result); // "The operation was successful!"
 })
 .catch(error => {
 console.error(error); // "The operation failed."
 })
 .finally(() => {
 console.log("Promise finished.");
 });

Async/Await #

async/await is syntactic sugar built on top of promises, making asynchronous code look and behave more like synchronous code.

async function fetchData() {
 try {
 const response = await fetch('https://api.example.com/data');
 const data = await response.json();
 console.log(data);
 } catch (error) {
 console.error("Failed to fetch data:", error);
 }
}
fetchData();

An async function always returns a promise. If the function returns a value, the promise will be resolved with that value. If the function throws an exception, the promise will be rejected with that exception.

Promise Chaining #

You can chain promises to execute asynchronous operations in sequence.

fetch('https://api.example.com/users/1')
 .then(response => response.json())
 .then(user => fetch(`https://api.example.com/users/${user.id}/posts`))
 .then(response => response.json())
 .then(posts => {
 console.log(posts);
 })
 .catch(error => {
 console.error("Error fetching data:", error);
 });