Hack Frontend Community

Promises in JavaScript and Promise Methods — промисы JavaScript

Promise

Promise is a constructor function used to create promises in JavaScript. Promise is an object that allows working with asynchronous operations and executing them without blocking the main execution thread.

Promise can be in one of the following states:

  • Pending — initial state when asynchronous operation isn't complete yet.
  • Fulfilled — when asynchronous operation completed successfully.
  • Rejected — when asynchronous operation completed with error.

Promise Creation Example

let promise = new Promise((resolve, reject) => {
  let success = true;
  
  if (success) {
    resolve("Operation completed successfully!");  // Successful execution
  } else {
    reject("An error occurred!");  // Error
  }
});

Promise Methods

Promise.all

Promise.all() is used to execute multiple promises in parallel and returns a new promise that fulfills when all promises in array complete successfully. If at least one promise rejects, result will be rejected with error of that promise.

Promise.all Syntax

Promise.all([promise1, promise2, ...])
  .then((results) => { console.log(results); })
  .catch((error) => { console.log(error); });

Promise.all Example

let promise1 = new Promise((resolve) => setTimeout(resolve, 1000, "First"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 2000, "Second"));

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ["First", "Second"]
  })
  .catch((error) => {
    console.log(error); // If one promise rejects, error will be output
  });

Promise.race

Promise.race() takes an array of promises and returns a new promise that settles as soon as first promise in array settles (regardless of whether it fulfilled or rejected).

Promise.race Syntax

Promise.race([promise1, promise2, ...])
  .then((value) => { console.log(value); })
  .catch((error) => { console.log(error); });

Promise.race Example

let promise1 = new Promise((resolve) => setTimeout(resolve, 1000, "First"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 2000, "Second"));

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // "First", because it settled first
  });

Promise.allSettled

Promise.allSettled() executes all promises in array and returns result for each, regardless of whether they fulfilled or rejected.

Promise.allSettled Syntax

Promise.allSettled([promise1, promise2, ...])
  .then((results) => { console.log(results); });

Promise.allSettled Example

let promise1 = Promise.resolve("First");
let promise2 = Promise.reject("Error in second");

Promise.allSettled([promise1, promise2])
  .then((results) => {
    console.log(results);
    // [{ status: "fulfilled", value: "First" }, { status: "rejected", reason: "Error in second" }]
  });

Promise.any

Promise.any() returns a new promise that fulfills as soon as first promise in array fulfills successfully. If all promises reject, it rejects with error.

Promise.any Syntax

Promise.any([promise1, promise2, ...])
  .then((value) => { console.log(value); })
  .catch((error) => { console.log(error); });

Promise.any Example

let promise1 = new Promise((resolve, reject) => setTimeout(reject, 1000, "Error 1"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 2000, "Success"));

Promise.any([promise1, promise2])
  .then((value) => {
    console.log(value); // "Success", because second promise fulfilled first successfully
  })
  .catch((error) => {
    console.log(error); // If all promises reject, error will be output
  });