Tutorial by Examples

The then method of a promise returns a new promise. const promise = new Promise(resolve => setTimeout(resolve, 5000)); promise // 5 seconds later .then(() => 2) // returning a value from a then callback will cause // the new promise to resolve with this value .then...

A Promise object represents an operation which has produced or will eventually produce a value. Promises provide a robust way to wrap the (possibly pending) result of asynchronous work, mitigating the problem of deeply nested callbacks (known as "callback hell"). States and control flow ...

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. It is also a trivial way to achieve an asynchronous operation. In this example calling the wait function resolves the promise after the time specified as first argument: function wait(ms) ...

The Promise.all() static method accepts an iterable (e.g. an Array) of promises and returns a new promise, which resolves when all promises in the iterable have resolved, or rejects if at least one of the promises in the iterable have rejected. // wait "millis" ms, then resolve with &quot...

The Promise.race() static method accepts an iterable of Promises and returns a new Promise which resolves or rejects as soon as the first of the promises in the iterable has resolved or rejected. // wait "milliseconds" milliseconds, then resolve with "value" function resolve(va...

The Promise.resolve static method can be used to wrap values into promises. let resolved = Promise.resolve(2); resolved.then(value => { // immediately invoked // value === 2 }); If value is already a promise, Promise.resolve simply recasts it. let one = new Promise(resolve => ...

Given a function that accepts a Node-style callback, fooFn(options, function callback(err, result) { ... }); you can promisify it (convert it to a promise-based function) like this: function promiseFooFn(options) { return new Promise((resolve, reject) => fooFn(options, (err, re...

Errors thrown from promises are handled by the second parameter (reject) passed to then or by the handler passed to catch: throwErrorAsync() .then(null, error => { /* handle error here */ }); // or throwErrorAsync() .catch(error => { /* handle error here */ }); Chaining If you hav...

In some cases you may want to wrap a synchronous operation inside a promise to prevent repetition in code branches. Take this example: if (result) { // if we already have a result processResult(result); // process it } else { fetchResult().then(processResult); } The synchronous and async...

This design pattern is useful for generating a sequence of asynchronous actions from a list of elements. There are two variants : the "then" reduction, which builds a chain that continues as long as the chain experiences success. the "catch" reduction, which builds a chain t...

It is possible to effectively apply a function (cb) which returns a promise to each element of an array, with each element waiting to be processed until the previous element is processed. function promiseForEach(arr, cb) { var i = 0; var nextPromise = function () { if (i >= arr.leng...

There is currently a proposal (not yet part of the ECMAScript standard) to add a finally callback to promises that will be executed regardless of whether the promise is fulfilled or rejected. Semantically, this is similar to the finally clause of the try block. You would usually use this functional...

This is an example of a simple GET API call wrapped in a promise to take advantage of its asynchronous functionality. var get = function(path) { return new Promise(function(resolve, reject) { let request = new XMLHttpRequest(); request.open('GET', path); request.onload = resolve; ...

The same example above, Image loading, can be written using async functions. This also allows using the common try/catch method for exception handling. Note: as of April 2017, the current releases of all browsers but Internet Explorer supports async functions. function loadImage(url) { return...