then-catch syntax

Overview

Promises came late to JavaScript (they were actually in before, taken out and put back in again). They allow you to avoid nested callback functions.

The .then and .catch syntax is covered here. The more modern and easier to use syntax is using async and await.

See Using promises guide in Mozilla docs.

Resolve

You can create an immediately resolved promise using:

const foo = new Promise()
foo.then(value => console.log(value))

Or:

const foo = Promise.resolve(3);
foo.then(value => console.log(value))
// 3

Then

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

// Or
const promise2 = doSomething()
  .then(successCallback, failureCallback);

A more concrete example. Functions could of course be anonymouse and inline.

function resolved(result) {
  console.log('Resolved');
}

function rejected(result) {
  console.error(result);
}

Promise.reject(new Error('fail'))
  .then(resolved, rejected);

Often you’ll use a call to package which handles a promise so you just to .then() to chain promises.

Small example, using arrow functions for readability.

foo('bar')
  .then(resp => resp.json())
  .then(data => console.log(data))

Longer chain, using function syntax and .catch at the end.

doSomething()
  .then(function(result) {
    return doSomethingElse(result);
  })
  .then(function(newResult) {
    return doThirdThing(newResult);
  })
  .then(function(finalResult) {
    console.log('Got the final result: ' + finalResult);
  })
  .catch(failureCallback);

Catch

Promise.reject(new Error("My error message")
  .catch(failureCallback)

Or you can define the function in place.

Promise.reject(new Error("My error message"))
  .catch(e => console.error("Critical failure: " + e.message))

This is similar to synchronous code approach:

try {
  // ...
} catch(error) {
  failureCallback(error);
}

All

Using Promises.all(). See all docs.

The Promise.all(iterable) method returns a single Promise that resolves when all of the promises in the iterable argument have resolved or when the iterable argument contains no promises. It rejects with the reason of the first promise that rejects.

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

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

Take two arrays such as lists retrieved from two endpoints, then combine them into single array.

```javascript const a = Promise.resolve([ 10, 20, 30 ]); const b = Promise.resolve([ 5, 15, 40 ]);

Promise.all([ a, b ]) .then(function(values) { const flat = [].concat.apply([], values); flat.sort((a, b) => a - b); console.log(flat); });