Class Promise
publicPromise objects represent the eventual result of an asynchronous operation. The
primary way of interacting with a promise is through its then
method, which
registers callbacks to receive either a promise’s eventual value or the reason
why the promise cannot be fulfilled.
Terminology
promise
is an object or function with athen
method whose behavior conforms to this specification.thenable
is an object or function that defines athen
method.value
is any legal JavaScript value (including undefined, a thenable, or a promise).exception
is a value that is thrown using the throw statement.reason
is a value that indicates why a promise was rejected.settled
the final resting state of a promise, fulfilled or rejected.
A promise can be in one of three states: pending, fulfilled, or rejected.
Promises that are fulfilled have a fulfillment value and are in the fulfilled state. Promises that are rejected have a rejection reason and are in the rejected state. A fulfillment value is never a thenable.
Promises can also be said to resolve a value. If this value is also a promise, then the original promise's settled state will match the value's settled state. So a promise that resolves a promise that rejects will itself reject, and a promise that resolves a promise that fulfills will itself fulfill.
Basic Usage:
let promise = new Promise(function(resolve, reject) {
// on success
resolve(value);
// on failure
reject(reason);
});
promise.then(function(value) {
// on fulfillment
}, function(reason) {
// on rejection
});
Advanced Usage:
Promises shine when abstracting away asynchronous interactions such as
XMLHttpRequest
s.
function getJSON(url) {
return new Promise(function(resolve, reject){
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
xhr.setRequestHeader('Accept', 'application/json');
xhr.send();
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error('getJSON: `' + url + '` failed with status: [' + this.status + ']'));
}
}
};
});
}
getJSON('/posts.json').then(function(json) {
// on fulfillment
}, function(reason) {
// on rejection
});
Unlike callbacks, promises are great composable primitives.
Promise.all([
getJSON('/posts'),
getJSON('/comments')
]).then(function(values){
values[0] // => postsJSON
values[1] // => commentsJSON
return values;
});
all (entries, label) Promise
Defined in node_modules/rsvp/lib/rsvp/promise/all.js:3
- entries
- Array
array of promises
- label
- String
optional string for labeling the promise. Useful for tooling.
- returns
- Promise
promise that is fulfilled when all
promises
have been fulfilled, or rejected if any of them become rejected.
Promise.all
accepts an array of promises, and returns a new promise which
is fulfilled with an array of fulfillment values for the passed promises, or
rejected with the reason of the first passed promise to be rejected. It casts all
elements of the passed iterable to promises as it runs this algorithm.
Example:
import Promise, { resolve } from 'rsvp';
let promise1 = resolve(1);
let promise2 = resolve(2);
let promise3 = resolve(3);
let promises = [ promise1, promise2, promise3 ];
Promise.all(promises).then(function(array){
// The array here would be [ 1, 2, 3 ];
});
If any of the promises
given to RSVP.all
are rejected, the first promise
that is rejected will be given as an argument to the returned promises's
rejection handler. For example:
Example:
import Promise, { resolve, reject } from 'rsvp';
let promise1 = resolve(1);
let promise2 = reject(new Error("2"));
let promise3 = reject(new Error("3"));
let promises = [ promise1, promise2, promise3 ];
Promise.all(promises).then(function(array){
// Code here never runs because there are rejected promises!
}, function(error) {
// error.message === "2"
});
catch (onRejection, label) Promise
Defined in node_modules/rsvp/lib/rsvp/promise.js:155
- onRejection
- Function
- label
- String
optional string for labeling the promise. Useful for tooling.
- returns
- Promise
catch
is simply sugar for then(undefined, onRejection)
which makes it the same
as the catch block of a try/catch statement.
function findAuthor(){
throw new Error('couldn\'t find that author');
}
// synchronous
try {
findAuthor();
} catch(reason) {
// something went wrong
}
// async with promises
findAuthor().catch(function(reason){
// something went wrong
});
finally (callback, label) Promise
Defined in node_modules/rsvp/lib/rsvp/promise.js:187
- callback
- Function
- label
- String
optional string for labeling the promise. Useful for tooling.
- returns
- Promise
finally
will be invoked regardless of the promise's fate just as native
try/catch/finally behaves
Synchronous example:
findAuthor() {
if (Math.random() > 0.5) {
throw new Error();
}
return new Author();
}
try {
return findAuthor(); // succeed or fail
} catch(error) {
return findOtherAuthor();
} finally {
// always runs
// doesn't affect the return value
}
Asynchronous example:
findAuthor().catch(function(reason){
return findOtherAuthor();
}).finally(function(){
// author was either found, or not
});
race (entries, label) Promise
Defined in node_modules/rsvp/lib/rsvp/promise/race.js:9
- entries
- Array
array of promises to observe
- label
- String
optional string for describing the promise returned. Useful for tooling.
- returns
- Promise
a promise which settles in the same way as the first passed promise to settle.
Promise.race
returns a new promise which is settled in the same way as the
first passed promise to settle.
Example:
import Promise from 'rsvp';
let promise1 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve('promise 1');
}, 200);
});
let promise2 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve('promise 2');
}, 100);
});
Promise.race([promise1, promise2]).then(function(result){
// result === 'promise 2' because it was resolved before promise1
// was resolved.
});
Promise.race
is deterministic in that only the state of the first
settled promise matters. For example, even if other promises given to the
promises
array argument are resolved, but the first settled promise has
become rejected before the other promises became fulfilled, the returned
promise will become rejected:
import Promise from 'rsvp';
let promise1 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve('promise 1');
}, 200);
});
let promise2 = new Promise(function(resolve, reject){
setTimeout(function(){
reject(new Error('promise 2'));
}, 100);
});
Promise.race([promise1, promise2]).then(function(result){
// Code here never runs
}, function(reason){
// reason.message === 'promise 2' because promise 2 became rejected before
// promise 1 became fulfilled
});
An example real-world use case is implementing timeouts:
import Promise from 'rsvp';
Promise.race([ajax('foo.json'), timeout(5000)])
reject (reason, label) Promise
Defined in node_modules/rsvp/lib/rsvp/promise/reject.js:6
- reason
- *
value that the returned promise will be rejected with.
- label
- String
optional string for identifying the returned promise. Useful for tooling.
- returns
- Promise
a promise rejected with the given
reason
.
Promise.reject
returns a promise rejected with the passed reason
.
It is shorthand for the following:
import Promise from 'rsvp';
let promise = new Promise(function(resolve, reject){
reject(new Error('WHOOPS'));
});
promise.then(function(value){
// Code here doesn't run because the promise is rejected!
}, function(reason){
// reason.message === 'WHOOPS'
});
Instead of writing the above, your code now simply becomes the following:
import Promise from 'rsvp';
let promise = Promise.reject(new Error('WHOOPS'));
promise.then(function(value){
// Code here doesn't run because the promise is rejected!
}, function(reason){
// reason.message === 'WHOOPS'
});
resolve (object, label) Promise
Defined in node_modules/rsvp/lib/rsvp/promise/resolve.js:6
- object
- *
value that the returned promise will be resolved with
- label
- String
optional string for identifying the returned promise. Useful for tooling.
- returns
- Promise
a promise that will become fulfilled with the given
value
Promise.resolve
returns a promise that will become resolved with the
passed value
. It is shorthand for the following:
import Promise from 'rsvp';
let promise = new Promise(function(resolve, reject){
resolve(1);
});
promise.then(function(value){
// value === 1
});
Instead of writing the above, your code now simply becomes the following:
import Promise from 'rsvp';
let promise = RSVP.Promise.resolve(1);
promise.then(function(value){
// value === 1
});
then (onFulfillment, onRejection, label) Promise
Defined in node_modules/rsvp/lib/rsvp/promise.js:248
- onFulfillment
- Function
- onRejection
- Function
- label
- String
optional string for labeling the promise. Useful for tooling.
- returns
- Promise
The primary way of interacting with a promise is through its then
method,
which registers callbacks to receive either a promise's eventual value or the
reason why the promise cannot be fulfilled.
findUser().then(function(user){
// user is available
}, function(reason){
// user is unavailable, and you are given the reason why
});
Chaining
The return value of then
is itself a promise. This second, 'downstream'
promise is resolved with the return value of the first promise's fulfillment
or rejection handler, or rejected if the handler throws an exception.
findUser().then(function (user) {
return user.name;
}, function (reason) {
return 'default name';
}).then(function (userName) {
// If `findUser` fulfilled, `userName` will be the user's name, otherwise it
// will be `'default name'`
});
findUser().then(function (user) {
throw new Error('Found user, but still unhappy');
}, function (reason) {
throw new Error('`findUser` rejected and we\'re unhappy');
}).then(function (value) {
// never reached
}, function (reason) {
// if `findUser` fulfilled, `reason` will be 'Found user, but still unhappy'.
// If `findUser` rejected, `reason` will be '`findUser` rejected and we\'re unhappy'.
});
If the downstream promise does not specify a rejection handler, rejection reasons will be propagated further downstream.
findUser().then(function (user) {
throw new PedagogicalException('Upstream error');
}).then(function (value) {
// never reached
}).then(function (value) {
// never reached
}, function (reason) {
// The `PedgagocialException` is propagated all the way down to here
});
Assimilation
Sometimes the value you want to propagate to a downstream promise can only be retrieved asynchronously. This can be achieved by returning a promise in the fulfillment or rejection handler. The downstream promise will then be pending until the returned promise is settled. This is called assimilation.
findUser().then(function (user) {
return findCommentsByAuthor(user);
}).then(function (comments) {
// The user's comments are now available
});
If the assimliated promise rejects, then the downstream promise will also reject.
findUser().then(function (user) {
return findCommentsByAuthor(user);
}).then(function (comments) {
// If `findCommentsByAuthor` fulfills, we'll have the value here
}, function (reason) {
// If `findCommentsByAuthor` rejects, we'll have the reason here
});
Simple Example
Synchronous Example
let result;
try {
result = findResult();
// success
} catch(reason) {
// failure
}
Errback Example
findResult(function(result, err){
if (err) {
// failure
} else {
// success
}
});
Promise Example;
findResult().then(function(result){
// success
}, function(reason){
// failure
});
Advanced Example
Synchronous Example
let author, books;
try {
author = findAuthor();
books = findBooksByAuthor(author);
// success
} catch(reason) {
// failure
}
Errback Example
function foundBooks(books) {
}
function failure(reason) {
}
findAuthor(function(author, err){
if (err) {
failure(err);
// failure
} else {
try {
findBoooksByAuthor(author, function(books, err) {
if (err) {
failure(err);
} else {
try {
foundBooks(books);
} catch(reason) {
failure(reason);
}
}
});
} catch(error) {
failure(err);
}
// success
}
});
Promise Example;
findAuthor().
then(findBooksByAuthor).
then(function(books){
// found books
}).catch(function(reason){
// something went wrong
});