Javascript - Promise Chaining

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > ECMAScript - Grammar Standard

1 - About

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

Advertising

3 - 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));

4 - Management

4.1 - 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) );

4.2 - 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));

Advertising

4.2.1 - 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

4.3 - Fulfillment

4.3.1 - Fulfillment of one promise

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

4.3.2 - 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);
});

Advertising

4.4 - 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);

4.4.1 - 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));

4.4.2 - 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))
);

4.5 - Failure

error handling in Promise has two mechanisms:

4.5.1 - Promise Failure

4.5.2 - 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');
});

web/javascript/es/chaining.txt · Last modified: 2019/06/19 09:24 by gerardnico