Promise

Objects that help handle asynchronous operations in a synchronous-like manner
One of resolve or reject must be called
executor: executing a function that automatically runs when Promise created

Constructor

  new Promise(executor);

  new Promise((resolve, reject) => {
      // code
  });

Promise State

Pending
Fulfilled: operation completed -> can proceed to next operation with .then(callback)
Rejected: operation completed

Promise.then(callback)

Becomes fulfilled state when resolve is called
Moves to .then() when Promise is fulfilled

Takes the argument from resolve(argument) as a parameter for the callback in .then()

  const resolvePromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('First');
      resolve('Resolve!'); 
    }, 1000);
  });

  resolvePromise
      .then((data) => {
        console.log('Middle');
        console.log('Last');
        console.log(data);
      })

  // Print: First -> 1 sec later
  // Middle
  // Last
  // Resolve!

Promise.catch(callback)

Becomes rejected state when reject is called
Moves to .catch() when Promise is rejected

Takes the argument from reject(argument) as a parameter for the callback in .catch()

  const errorPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('First');
          reject('Error!!'); // if we call reject explicitly, Promise regards the error occurred
      }, 1000);
  });

  errorPromise
      .then(() => {
          console.log('Middle');
          console.log('Last');
      })
      .catch((error) => {
          console.log(error);
      });

  // Print: 'Error!!'

Promise.resolve(value)

A static method call the then() method passing argument: value, Promise, or 'thenable' to resolve

When a Promise returns a value, the returned value is always wrapped in a Promise

  const firstPromise = Promise.resolve('First');

  firstPromise.then((value) => {
      console.log(value);
  });

  // Print: 'First'

Can be used like Functional Programming

  const firstPromise = Promise.resolve('First');

  firstPromise.then(console.log);

  // Print: 'First'

  const countPromise = Promise.resolve(0);

  function increment(value) {
      return value + 1;
  }

  const resultPromise = countPromise.then(increment).then(increment).then(increment);
  resultPromise.then(console.log);

  // Print: 3

Promise.all(iterable)

A static method takes an iterable of promises as input and returns a single Promise
This returned promise fulfills when all of the input's promises fulfill (including when an empty iterable is passed), with an array of the fulfillment values
It rejects when any of the input's promises rejects, with this first rejection reason

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Expected output: Array [3, 42, "foo"]

Promise.race(iterable)

A static method takes an iterable of promises as input and returns a single Promise
This returned promise settles (completed) with the eventual state of the first promise that settles

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// Expected output: "two"

[JavaScript] Promise

Table of contents