Overview

It is a solution for asynchronous programming.

Syntactically speaking, Promise is an object from which you can obtain messages about asynchronous operations.

Promise States

Characteristics of States

Promise asynchronous operations have three states: pending (in progress), fulfilled (succeeded), and rejected (failed). Except for the result of the asynchronous operation, no other operation can change this state.

Promise objects only have state transitions: from pending to fulfilled and from pending to rejected. Once in the fulfilled or rejected state, the state will no longer change, that is, resolved (settled).

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

Promise cannot be canceled. Once it is created, it executes immediately and cannot be canceled midway.

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

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

then Method

The then method accepts two functions as parameters. The first parameter is a callback for when the Promise executes successfully, and the second parameter is a callback for when the Promise fails. Only one of the two functions will be called.

Characteristics of the then Method

The callback function will not be called until the current run of the JavaScript event queue completes.

const p = new Promise(function(resolve,reject){ resolve('success'); }); p.then(function(value){ console.log(value); }); console.log('first'); // first // success

Through.thencallback functions added in the form will be called no matter when.

By calling multiple times

.then
you can add multiple callback functions, and they will run in insertion order and independently.

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 the resolved or rejected state for chained calls, and the value of the Promise object is this return value.

Points to Note about the then Method

For simple Promise chain programming, it is best to keep it flat and avoid nesting Promises.

Always remember to return or terminate a Promise chain.

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

When you create a new Promise but forget to return it, the corresponding chain is broken, causing p4 to proceed simultaneously with p2 and p3.

For rejections in a Promise chain that cannot be terminated in most browsers, it is recommended to always follow with.catch(error => console.log(error));

More Articles

JavaScript Promise Object