Class Promise

public

Promise 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 a then method whose behavior conforms to this specification.
  • thenable is an object or function that defines a then 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
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 XMLHttpRequests.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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.

1
2
3
4
5
6
7
8
9
Promise.all([
  getJSON('/posts'),
  getJSON('/comments')
]).then(function(values){
  values[0] // => postsJSON
  values[1] // => commentsJSON

  return values;
});

Show:

Module: rsvp
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
});
Module: rsvp
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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:

1
2
3
4
5
findAuthor().catch(function(reason){
  return findOtherAuthor();
}).finally(function(){
  // author was either found, or not
});
Module: rsvp
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.

1
2
3
4
5
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.

1
2
3
4
5
6
7
8
9
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.

1
2
3
4
5
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.

1
2
3
4
5
6
7
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

1
2
3
4
5
6
7
8
let result;

try {
  result = findResult();
  // success
} catch(reason) {
  // failure
}

Errback Example

1
2
3
4
5
6
7
findResult(function(result, err){
  if (err) {
    // failure
  } else {
    // success
  }
});

Promise Example;

1
2
3
4
5
findResult().then(function(result){
  // success
}, function(reason){
  // failure
});

Advanced Example

Synchronous Example

1
2
3
4
5
6
7
8
9
let author, books;

try {
  author = findAuthor();
  books  = findBooksByAuthor(author);
  // success
} catch(reason) {
  // failure
}

Errback Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;

1
2
3
4
5
6
7
findAuthor().
  then(findBooksByAuthor).
  then(function(books){
    // found books
}).catch(function(reason){
  // something went wrong
});