JavaScript Promises | Lecture 9

 

JavaScript Promises are a way to handle asynchronous operations. A promise represents a value that might be available now, in the future, or never. They are used to avoid callback hell and make asynchronous code easier to read and manage.

Key States of a Promise:

  1. Pending: The promise is still pending and hasn't been resolved or rejected.
  2. Fulfilled: The promise was completed successfully.
  3. Rejected: The promise failed.

Basic Syntax

const promise = new Promise((resolve, reject) => {

  // asynchronous operation

  if (successCondition) {

    resolve("Success!"); // When operation succeeds

  } else {

    reject("Error!"); // When operation fails

  }

});

Handling Promises

  • then(): Executes when the promise is resolved.
  • catch(): Executes when the promise is rejected.
  • finally(): Executes after the promise is settled (either resolved or rejected).

Examples

Example 1: A Simple Promise

const myPromise = new Promise((resolve, reject) => {

  let success = true;

  if (success) {

    resolve("Promise resolved successfully!");

  } else {

    reject("Promise rejected.");

  }

});

 

myPromise

  .then((message) => {

    console.log("Success:", message);

  })

  .catch((error) => {

    console.log("Error:", error);

  })

  .finally(() => {

    console.log("Promise operation completed.");

  });

Example 2: Simulating Asynchronous Operations (e.g., API Call)

const fetchData = new Promise((resolve, reject) => {

  setTimeout(() => {

    let data = { id: 1, name: "John Doe" };

    resolve(data); // Simulating a successful API response

  }, 2000);

});

 

fetchData

  .then((data) => {

    console.log("Fetched Data:", data);

  })

  .catch((error) => {

    console.error("Error fetching data:", error);

  });

Example 3: Using Promise.all()

const promise1 = Promise.resolve(10);

const promise2 = Promise.resolve(20);

const promise3 = Promise.resolve(30);

 

Promise.all([promise1, promise2, promise3])

  .then((results) => {

    console.log("Results:", results); // [10, 20, 30]

  })

  .catch((error) => {

    console.error("Error in one of the promises:", error);

  });

Example 4: Using Promise.race()

const promise1 = new Promise((resolve) => setTimeout(() => resolve("First!"), 1000));

const promise2 = new Promise((resolve) => setTimeout(() => resolve("Second!"), 2000));

 

Promise.race([promise1, promise2])

  .then((result) => {

    console.log("First to complete:", result); // "First!"

  })

  .catch((error) => {

    console.error("Error:", error);

  });

Example 5: Chaining Promises

const step1 = () => Promise.resolve("Step 1 completed");

const step2 = (prev) => Promise.resolve(`${prev}, Step 2 completed`);

const step3 = (prev) => Promise.resolve(`${prev}, Step 3 completed`);

 

step1()

  .then(step2)

  .then(step3)

  .then((result) => {

    console.log("Final Result:", result);

  });

Promises are powerful tools for managing asynchronous code, and when used with modern syntax like async/await, they make code even more readable and maintainable.

 

Comments

Post a Comment

Popular posts from this blog

Classes and Objects in Javascript | Lecture 10

  In JavaScript, classes are templates for creating objects, and objects are instances of classes. Classes encapsulate data and methods to model real-world entities. Declaring a Class A class is defined using the class keyword, and it typically contains: Constructor : A special method for initializing the object. Methods : Functions defined within the class. Example: Creating a Class and an Object class Person {   // Constructor to initialize the object   constructor(name, age) {     this.name = name; // Instance property     this.age = age;   }     // Method   greet() {     return `Hello, my name is ${this.name} and I am ${this.age} years old.`;   } }   // Create an object (instance) of the class const person1 = new Person("John", 30);   // Access properties and methods console.log(person1.name); // Output: John console.log...
Read more

Destructuring in JavaScript | Lecture 5

  Destructuring in JavaScript is a syntax for unpacking values from arrays or properties from objects into distinct variables. This feature simplifies extracting data, making your code cleaner and more readable. Here are examples of destructuring for both arrays and objects: 1. Destructuring Arrays const fruits = ['apple', 'banana', 'cherry'];   // Basic Destructuring const [first, second] = fruits; console.log(first); // "apple" console.log(second); // "banana"   // Skipping Elements const [, , third] = fruits; console.log(third); // "cherry"   // Default Values const [a, b, c = 'default fruit'] = ['mango', 'pear']; console.log(c); // "default fruit"   // Rest Pattern const [d, ...rest] = fruits; console.log(rest); // ["banana", "cherry"] 2. Destructuring Objects const user = {   name: 'John',   age: 30,   count...
Read more

ECMA Script 6 Introduction of topics | Lecture 1

Image
ECMA Script 6 Introduction of topics 1. Let and Const let : Block-scoped variable. const : Block-scoped constant. let x = 10; x = 20; // Allowed   const y = 30; // y = 40; // Error: Assignment to constant variable   2. Arrow Functions Concise syntax for defining functions. // Regular function function add(a, b) {   return a + b; }   // Arrow function const add = (a, b) => a + b;   console.log(add(5, 3)); // Output: 8   3. Template Literals For string interpolation and multiline strings. const name = "John"; const greeting = `Hello, ${name}!`; console.log(greeting); // Output: Hello, John!   const multiline = `This is a multiline string.`; console.log(multiline);   4. Default Parameters Default values for function parameters. function greet(name = "Guest") {   return `Hello, ${name}!`; }   console.log(greet()); // Output: Hello, Guest! console.log(greet(...
Read more