Widely availableStill fundamental even when you mostly write async/await, because await itself is built on top of Promise.
Async Widely available

Promise (initial support)

Promise represents the eventual completion or failure of an asynchronous task. It lets you compose independent steps without deeply nested callbacks.

AsyncES2015Promises

Overview

Promise represents the eventual completion or failure of an asynchronous task. It lets you compose independent steps without deeply nested callbacks.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Promise
32
12
29
8
32
8
Promise.@@species

The Promise[Symbol.species] static accessor property returns the constructor used to construct return values from promise methods.
51
79
48
10
51
10
Promise.Promise

The Promise() constructor creates Promise objects. It is primarily used to wrap callback-based APIs that do not already support promises.
32
12
29
8
32
8
Promise.all

The Promise.all() 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.
32
12
29
8
32
8
Promise.catch

The catch() method of Promise instances schedules a function to be called when the promise is rejected. It immediately returns another Promise object, allowing you to chain calls to other promise methods. It is a shortcut for Promise/then.
32
12
29
8
32
8
Promise.incumbent settings object tracking

A settings object is an environment that provides additional information when JavaScript code is running. This includes the realm and module map, as well as HTML specific information such as the origin. The incumbent settings object is tracked in order to ensure that the browser knows which one to use for a given piece of user code.
50
Promise.race

The Promise.race() static method takes an iterable of promises as input and returns a single Promise. This returned promise settles with the eventual state of the first promise that settles.
32
12
29
8
32
8
Promise.reject

The Promise.reject() static method returns a Promise object that is rejected with a given reason.
32
12
29
8
32
8
Promise.resolve

The Promise.resolve() static method "resolves" a given value to a Promise. If the value is a promise, that promise is returned; if the value is a thenable, Promise.resolve() will call the then() method with two callbacks it prepared; otherwise the returned promise will be fulfilled with the value.
32
12
29
8
32
8
Promise.then

The then() method of Promise instances takes up to two arguments: callback functions for the fulfilled and rejected cases of the Promise. It stores the callbacks within the promise it is called on and immediately returns another Promise object, allowing you to chain calls to other promise methods.
32
12
29
8
32
8
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Constructor requires a new operator since version 37.
Notes 1 item(s)
Implementation note
  • Constructor requires a new operator since version 10.
Notes 1 item(s)
Implementation note
  • Constructor requires a new operator since version 10.

Syntax

JAVASCRIPT 
const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Data retrieved'), 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error));

// Parallel execution using Promise.all
const [users, posts] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
]);

Live demo

Chaining asynchronous steps

Resolve one task after another and inspect the values that flow through the chain.

JavaScript
Output
Press the Run button

Parallel work with Promise.all

Start multiple tasks together and wait until the slowest one finishes.

JavaScript
Output
Press the Run button

Use cases

  • Sequencing async work

    Chain dependent steps such as validation, transformation, and final save operations.

  • Running work together

    Use Promise.all or allSettled to coordinate multiple requests or background tasks.

Cautions

  • Always return a Promise from a then() callback when the next step depends on another async task.
  • Unhandled rejections are easy to miss during development, so keep catch paths intentional.

Accessibility

  • Async state changes such as loading, success, and failure should be announced with clear text instead of relying on color alone.

Related links

Powered by web-features