Javascript - Promise Chaining

About

promise chaining is one of the two promise syntax to manipulate promise

Example

  • The promise function addOne that will add one.
addOne = function(x){
   return new Promise( resolve => {resolve(x+1)} )
};
  • The chain
addOne(0)
 .then(addOne)
 .then(addOne)
 .then(addOne)
 .then(addOne)
 .then(a => console.log("after 5 then call we get "+a));

Management

Constructor

The creation of a promise is done via a constructor that accept an executor function that is invoked immediately (with two feedback functions) Syntax:

new Promise( executor(resolve, reject) );

Executor

The executor is function:

  • invoked immediately
  • with two state functions as arguments in order to:
    • resolve to resolve the promise (ie return a value to the promise and change the state to resolve)
    • reject to reject (ie return a value, generally an error to the promise and change the state to rejected)

Syntax:

executor(resolve, reject)

Example:

const fn = new Promise((resolve, reject) => {
  // do something asynchronous which eventually calls either:
  //   resolve(someValue); // fulfilled
  // or
  //   reject("failure reason"); // rejected
  resolve(1);
});
console.log(fn.constructor)
fn.then(v=>console.log("The returned value is "+v));

Resolve

Resolve is a promise state but it's also the name of the function that is:

  • passed as first argument to the executor function.
  • used to:
    • send the value back to the promise
    • and change the promise state to resolve

Fulfillment

Fulfillment of one promise

You get the result of an executor function via callback. See callback

Fulfillment of promises

Promise.all(iterable);
  • Promise.all waits for all fulfillments (or the first rejection).
  • If the iterable contains non-promise values, they will be ignored, but still returned
  • Promise.all resolves synchronously if and only if the iterable passed is empty
var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});

Callback

A promise is a returned object to which you can attach callbacks with the then keyword (ie callbacks are not passed into a function).

promise().then(successCallback, failureCallback);

Success Callback

The success callback is the first argument of the callback function (then) and get the result of a resolved promise.

Example:

Example with the promise function addOne that will add one.

addOne = function(x){
   return new Promise( resolve => {resolve(x+1)} )
}
  • With then (A promise chaining)
addOne(0)
 .then(a => console.log("The value after then is "+a));

Failure Callback

The failure callback is the second argument of the callback function (then) and get the result of a rejected promise.

Example:

const fn = new Promise((resolve, reject) => {
  // do something asynchronous which eventually calls either:
  //   resolve(someValue); // fulfilled
  // or
  //   reject("failure reason"); // rejected
  reject("bad, bad");
});
fn.then(
   (v=>v), //Successcallback
   (e=>console.log("FailureCallback reports the following error !"+e))
);

Failure

error handling in Promise has two mechanisms:

Promise Failure

See failure_callback

Chaining Failure (catch)

The exception in the chaining code (

Not in a promise. For a promise error handling, see failure_callback

) can be catched via the catch keyword

new Promise((resolve, reject) => {
    console.log('Initial');
    resolve();
})
.then(() => {
    throw new Error('Something failed in the `then` code'); 
    console.log('This text will not be printed because of failure just above');
})
.catch((e) => {
    console.log('We have caught the chaining failure ('+e.message+')');
})
.then(() => {
    console.log('You can continue your code in the chain');
});





Discover More
Javascript - Await and Async Syntax

await and async is the second promise syntax that permits to manipulate promise. The async/await syntax is part of ECMAScript 2017 and reduces the callback nesting find in the chaining syntax. The...
Javascript Es Promise State
Javascript - Promise Function

in the Javascript context A promise is a function that encapsulate a executor function in order to: execute it asynchronously and returns its result (ie ) A promise is one way of enabling asynchrony...



Share this page:
Follow us:
Task Runner