5.1 ES6 Promise Object

❮ Android Tutorial Scrollview Android Animationdrawable ❯

5.1 ES6 Promise Object

Category ES6 Tutorial

Overview

It is a solution for asynchronous programming.

From a syntactic perspective, a Promise is an object from which one can obtain messages from asynchronous operations.

Promise States

Characteristics of States

There are three states of Promise asynchronous operations: pending (in progress), fulfilled (successfully completed), and rejected (failed). Apart from the results of the asynchronous operations, no other operations can change this state.

A Promise object only undergoes state changes from pending to fulfilled and from pending to rejected. Once in the fulfilled or rejected state, the state will not change anymore, i.e., resolved (finalized).

const p1 = new Promise(function(resolve,reject){
    resolve('success1');
    resolve('success2');
}); 
const p2 = new Promise(function(resolve,reject){  
    resolve('success3'); 
    reject('reject');
});
p1.then(function(value){  
    console.log(value); // success1
});
p2.then(function(value){ 
    console.log(value); // success3
});

Disadvantages of States

A Promise cannot be canceled; once created, it will execute immediately and cannot be canceled midway.

If no callback function is set, errors thrown inside the Promise will not be reflected externally.

When in the pending state, it is impossible to know which stage of progress is currently at (just started or about to complete).

then Method

The then method accepts two functions as parameters, the first is the callback when the Promise is successfully executed, and the second is the callback when the Promise fails to execute. Only one of the two functions will be called.

Characteristics of the then Method

Before the current run of the JavaScript event queue is completed, the callback function will never be called.

const p = new Promise(function(resolve,reject){
  resolve('success');
});

p.then(function(value){
  console.log(value);
});

console.log('first');
// first
// success

Callbacks added in the form of .then will always be called, no matter when.

By calling multiple times

.then

const p = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(value){ // First then // 1
  console.log(value);
  return value * 2;
}).then(function(value){ // Second then // 2
  console.log(value);
}).then(function(value){ // Third then // undefined
  console.log(value);
  return Promise.resolve('resolve'); 
}).then(function(value){ // Fourth then // resolve
  console.log(value);
  return Promise.reject('reject'); 
}).then(function(value){ // Fifth then // reject: reject
  console.log('resolve:' + value);
}, function(err) {
  console.log('reject:' + err);
});

The then method returns a Promise object in a resolved or rejected state for chain calls, and the value of the Promise object is this return value.

Points to Note for the then Method

It is best to keep the Promise chain flat and avoid nesting Promises.

Always pay attention to returning or terminating the Promise chain.

const p1 = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(result) {
  p2(result).then(newResult => p3(newResult));
}).then(() => p4());

When creating a new Promise and forgetting to return it, the corresponding chain is broken, causing p4 to proceed simultaneously with p2 and p3.

In most browsers, a Promise chain that cannot be terminated suggests that a .catch(error => console.log(error)); should be attached at the end.

JavaScript Promise Object