The Promise
object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
To learn about the way promises work and how you can use them, we advise you to read Using promises first.
A Promise
is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
A Promise
is in one of these states:
A pending promise can either be fulfilled with a value or rejected with a reason (error). When either of these options happens, the associated handlers queued up by a promise's then
method are called. If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.
As the
and Promise.prototype.then()
methods return promises, they can be chained.Promise.prototype.catch()
Not to be confused with: Several other languages have mechanisms for lazy evaluation and deferring a computation, which they also call "promises", e.g. Scheme. Promises in JavaScript represent processes that are already happening, which can be chained with callback functions. If you are looking to lazily evaluate an expression, consider the arrow function with no arguments: f = () => expression
to create the lazily-evaluated expression, and f()
to evaluate.
Note: A promise is said to be settled if it is either fulfilled or rejected, but not pending. You will also hear the term resolved used with promises — this means that the promise is settled or “locked-in” to match the state of another promise. States and fates contain more details about promise terminology.
The methods promise.then()
, promise.catch()
, and promise.finally()
are used to associate further action with a promise that becomes settled. These methods also return a newly generated promise object, which can optionally be used for chaining; for example, like this:
const myPromise = (new Promise(myExecutorFunc)) .then(handleFulfilledA,handleRejectedA) .then(handleFulfilledB,handleRejectedB) .then(handleFulfilledC,handleRejectedC); // or, perhaps better ... const myPromise = (new Promise(myExecutorFunc)) .then(handleFulfilledA) .then(handleFulfilledB) .then(handleFulfilledC) .catch(handleRejectedAny);
Handling a rejected promise too early has consequences further down the promise chain. Sometimes there is no choice because an error must be handled immediately; in such cases we must throw
something, even if it is a dummy error message like throw -999
, to maintain error state down the chain. On the other hand, in the absence of an immediate need it is simpler to leave out error handling until a final .catch()
statement.
The termination condition of a promise determines the "settled" state of the next promise in the chain. Any termination other than a throw
creates a "resolved" state while terminating with a throw
creates a "rejected" state.
handleFulfilled(value) { /*...*/; return nextValue; } handleRejection(reason) { /*...*/; throw nextReason; } handleRejection(reason) { /*...*/; return nextValue; }
The returned nextValue
can be another promise object, in which case the promise gets dynamically inserted into the chain.
When a .then()
lacks the appropriate function that returns a Promise object, processing simply continues to the next link of the chain. Therefore, a chain can safely omit every handleRejection
until the final .catch()
. Similarly, .catch()
is really just a .then()
without a slot for handleFulfilled
.
The promises of a chain are nested like Russian dolls, but get popped like the top of a stack. The first promise in the chain is most deeply nested and is the first to pop.
(promise D, (promise C, (promise B, (promise A) ) ) )
When a nextValue
is a promise, the effect is a dynamic replacement. The return
causes a promise to be popped, but the nextValue
promise is pushed into its place. For the nesting shown above, suppose the .then()
associated with "promise B" returns a nextValue
of "promise X". The resulting nesting would look like this:
(promise D, (promise C, (promise X) ) )
A promise can participate in more than one nesting. For the following code, the transition of promiseA
into a "settled" state will cause both instances of .then()
to be invoked.
const promiseA = new Promise(myExecutorFunc); const promiseB = promiseA.then(handleFulfilled1, handleRejected1); const promiseC = promiseA.then(handleFulfilled2, handleRejected2);
An action can be assigned to an already "settled" promise. In that case, the action (if appropriate) will be performed at the first asynchronous opportunity. Note that promises are guaranteed to be asynchronous. Therefore, an action for an already "settled" promise will occur only after the stack has cleared and a clock-tick has passed. The effect is much like that of setTimeout(action,10)
.
const promiseA = new Promise( (resolutionFunc,rejectionFunc) => { resolutionFunc(777); }); // At this point, "promiseA" is already settled. promiseA.then( (val) => console.log("asynchronous logging has val:",val) ); console.log("immediate logging"); // produces output in this order: // immediate logging // asynchronous logging has val: 777
Promise()
Promise
object. The constructor is primarily used to wrap functions that do not already support promises.Promise.all(iterable)
Promise.allSettled(iterable)
Promise.any(iterable)
Promise.race(iterable)
Promise.reject(reason)
Promise
object that is rejected with the given reason.Promise.resolve(value)
Promise
object that is resolved with the given value. If the value is a thenable (i.e. has a then
method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise, the returned promise will be fulfilled with the value.Promise.resolve(value)
it instead and work with the return value as a promise.Promise.prototype.catch()
Promise.prototype.then()
onFulfilled
or onRejected
is not a function).Promise.prototype.finally()
let myFirstPromise = new Promise((resolve, reject) => { // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed. // In this example, we use setTimeout(...) to simulate async code. // In reality, you will probably be using something like XHR or an HTML5 API. setTimeout( function() { resolve("Success!") // Yay! Everything went well! }, 250) }) myFirstPromise.then((successMessage) => { // successMessage is whatever we passed in the resolve(...) function above. // It doesn't have to be a string, but if it is only a succeed message, it probably will be. console.log("Yay! " + successMessage) });
This example shows diverse techniques for using Promise capabilities and diverse situations that can occur. To understand this, start by scrolling to the bottom of the code block, and examine the promise chain. Upon provision of an initial promise, a chain of promises can follow. The chain is composed of .then()
calls, and typically (but not necessarily) has a single .catch()
at the end, optionally followed by .finally()
. In this example, the promise chain is initiated by a custom-written new Promise()
construct; but in actual practice, promise chains more typically start with an API function (written by someone else) that returns a promise.
The example function tetheredGetNumber()
shows that a promise generator will utilize reject()
while setting up an asynchronous call, or within the call-back, or both. The function promiseGetWord()
illustrates how an API function might generate and return a promise in a self-contained manner.
Note that the function troubleWithGetNumber()
ends with a throw()
. That is forced because an ES6 promise chain goes through all the .then()
promises, even after an error, and without the "throw()", the error would seem "fixed". This is a hassle, and for this reason, it is common to omit rejectionFunc
throughout the chain of .then()
promises, and just have a single rejectionFunc
in the final catch()
. The alternative is to throw a special value (in this case "-999", but a custom Error type would be more appropriate).
This code can be run under NodeJS. Comprehension is enhanced by seeing the errors actually occur. To force more errors, change the threshold
values.
"use strict"; // To experiment with error handling, "threshold" values cause errors randomly const THRESHOLD_A = 8; // can use zero 0 to guarantee error function tetheredGetNumber(resolve, reject) { try { setTimeout( function() { const randomInt = Date.now(); const value = randomInt % 10; try { if(value >= THRESHOLD_A) { throw new Error(`Too large: ${value}`); } } catch(msg) { reject(`Error in callback ${msg}`); } resolve(value); return; }, 500); // To experiment with error at set-up, uncomment the following 'throw'. // throw new Error("Bad setup"); } catch(err) { reject(`Error during setup: ${err}`); } return; } function determineParity(value) { const isOdd = value % 2 ? true : false ; const parityInfo = { theNumber: value, isOdd: isOdd }; return parityInfo; } function troubleWithGetNumber(reason) { console.error(`Trouble getting number: ${reason}`); throw -999; // must "throw" something, to maintain error state down the chain } function promiseGetWord(parityInfo) { // The "tetheredGetWord()" function gets "parityInfo" as closure variable. var tetheredGetWord = function(resolve,reject) { const theNumber = parityInfo.theNumber; const threshold_B = THRESHOLD_A - 1; if(theNumber >= threshold_B) { reject(`Still too large: ${theNumber}`); } else { parityInfo.wordEvenOdd = parityInfo.isOdd ? 'odd' : 'even'; resolve(parityInfo); } return; } return new Promise(tetheredGetWord); } (new Promise(tetheredGetNumber)) .then(determineParity,troubleWithGetNumber) .then(promiseGetWord) .then((info) => { console.log("Got: ",info.theNumber," , ", info.wordEvenOdd); return info; }) .catch((reason) => { if(reason === -999) { console.error("Had previously handled error"); } else { console.error(`Trouble with promiseGetWord(): ${reason}`); } }) .finally((info) => console.log("All done"));
This small example shows the mechanism of a Promise
. The testPromise()
method is called each time the <button>
is clicked. It creates a promise that will be fulfilled, using window.setTimeout()
, to the promise count (number starting from 1) every 1-3 seconds, at random. The Promise()
constructor is used to create the promise.
The fulfillment of the promise is simply logged, via a fulfill callback set using p1.then()
. A few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise.
"use strict"; var promiseCount = 0; function testPromise() { let thisPromiseCount = ++promiseCount; let log = document.getElementById('log'); // begin log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Started (Sync code started)'); // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) let p1 = new Promise((resolve, reject) => { // The executor function is called with the ability to resolve or reject the promise log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise started (Async code started)'); // This is only an example to create asynchronism window.setTimeout(function() { // We fulfill the promise ! resolve(thisPromiseCount); }, Math.random() * 2000 + 1000); }); // We define what to do when the promise is resolved with the then() call, // and what to do when the promise is rejected with the catch() call p1.then(function(val) { // Log the fulfillment value log.insertAdjacentHTML('beforeend', val + ') Promise fulfilled (Async code terminated)'); }).catch((reason) => { // Log the rejection reason console.log(`Handle rejected promise (${reason}) here.`); }); // end log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise made (Sync code terminated)'); }
This example is started by clicking the button. (You need a browser that supports Promise
. )
By clicking the button several times in a short amount of time, you'll even see the different promises being fulfilled one after another.
Another simple example using Promise
and XMLHttpRequest
to load an image is available at the MDN GitHub js-examples repository. You can also see it in action. Each step is commented on and allows you to follow the Promise and XHR architecture closely.
Desktop | ||||||
---|---|---|---|---|---|---|
Promise |
32 | 12 | 29 | No | 19 | 8 |
Promise() constructor |
32 | 12 | 29
|
No | 19 | 8
|
all() |
32 | 12 | 29 | No | 19 | 8 |
allSettled() |
76 | 79 | 71 | No | 63 | 13 |
any |
85 | No | 79 | No | No | 14 |
catch() |
32 | 12 | 29 | No | 19 | 8 |
finally() |
63 | 18 | 58 | No | 50 | 11.1 |
race() |
32 | 12 | 29 | No | 19 | 8 |
reject() |
32 | 12 | 29 | No | 19 | 8 |
resolve() |
32 | 12 | 29 | No | 19 | 8 |
then() |
32 | 12 | 29 | No | 19 | 8 |
Mobile | ||||||
---|---|---|---|---|---|---|
Promise |
4.4.3 | 32 | 29 | 19 | 8 | 2.0 |
Promise() constructor |
4.4.3 | 32 | 29
|
19 | 8
|
2.0 |
all() |
4.4.3 | 32 | 29 | 19 | 8 | 2.0 |
allSettled() |
76 | 76 | No | 54 | 13 | No |
any |
85 | 85 | 79 | No | 14 | No |
catch() |
4.4.3 | 32 | 29 | 19 | 8 | 2.0 |
finally() |
63 | 63 | 58 | 46 | 11.3 | 8.0 |
race() |
4.4.3 | 32 | 29 | 19 | 8 | 2.0 |
reject() |
4.4.3 | 32 | 29 | 19 | 8 | 2.0 |
resolve() |
4.4.3 | 32 | 29 | 19 | 8 | 2.0 |
then() |
4.4.3 | 32 | 29 | 19 | 8 | 2.0 |
Server | |
---|---|
Promise |
0.12 |
Promise() constructor |
0.12
|
all() |
0.12 |
allSettled() |
12.9.0 |
any |
No |
catch() |
0.12 |
finally() |
10.0.0 |
race() |
0.12 |
reject() |
0.12 |
resolve() |
0.12 |
then() |
0.12 |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise