Detailed explanation of ES6 Promise usage

What is a Promise?

Promise is a solution for asynchronous programming. It is actually a constructor with methods such as all, reject, and resolve. Its prototype has methods such as then and catch. (ps: What is a prototype: https://www.jb51.net/article/231967.htm)

The Promise object has the following two characteristics.

• (1) The state of an object is not affected by the outside world. The Promise object represents an asynchronous operation and has three states: pending (in progress), fulfilled (successful), and rejected (failed). Only the result of the asynchronous operation can determine the current state, and any other operation cannot change this state. This is also the origin of the name Promise, which means "promise" in English, indicating that it cannot be changed by other means.
• (2) Once the state changes, it will not change again, and the result can be obtained at any time. There are only two possibilities for the state of a Promise object to change: from pending to fulfilled and from pending to rejected. As long as these two situations occur, the state is solidified and will not change anymore. The result will always be maintained. At this time, it is called resolved. If the change has already occurred, you will get the result immediately if you add a callback function to the Promise object. This is completely different from an event. The characteristic of an event is that if you miss it and then listen to it, you will not get any results.

Let's create a new Promise

let p = new Promise(function(resolve, reject){
		//Do some asynchronous operations setTimeout(function(){
			console.log('Execution completed Promise');
			resolve('The data to be returned can be any data, such as interface return data');
		}, 2000);
	});

Refresh the page and you will find that the console directly prints

The execution process is: an asynchronous operation is executed, that is, setTimeout, and after 2 seconds, "execution completed" is output and the resolve method is called.

Notice! I just created a new object and didn't call it. The function we passed in has been executed. This is a detail that needs attention. So when we use Promise, we usually wrap it in a function and run the function when needed, such as:

<div onClick={promiseClick}>Start asynchronous request</div>
 
const promiseClick = () => {
	 console.log('Click method is called')
	 let p = new Promise(function(resolve, reject){
		//Do some asynchronous operations setTimeout(function(){
				console.log('Execution completed Promise');
				resolve('The data to be returned can be any data, such as interface return data');
			}, 2000);
		});
        return p
	}

There is no response when refreshing the page, but the console prints after clicking

When placed in a function, it will only be executed when called.

So, let’s solve two problems:

• 1. Why should it be placed in the function?
• 2. What is resolve?

At the end of our packaged function, we will return a Promise object, that is, we get a Promise object by executing this function. Next, you can use the then and catch methods on the Promise object. This is the power of Promise. See the following code:

promiseClick().then(function(data){
    console.log(data);
    //You can use the passed data to do other operations later//......
});

This console output

First, the method is called to execute the promise, and finally the then method of the promise is executed. The then method is a function that accepts a parameter that accepts the data returned by resolve. This outputs 'the data to be returned can be any data, such as interface return data'

At this point you should have realized that the function in then is the same as our usual callback function, which can be executed after the asynchronous task of promiseClick is completed. This is the role of Promise. Simply put, it can separate the original callback writing method, and execute the callback function in a chain call manner after the asynchronous operation is executed.

You might think that this is no different than writing a callback function; so what if there are multiple layers of callbacks? What if the callback is also an asynchronous operation and a corresponding callback function is required after execution? You can't define another callback2 and pass it into callback. The advantage of Promise is that you can continue to write Promise objects in the then method and return them, and then continue to call then to perform callback operations.

So: the essence is: Promise can only simplify the writing of layers of callbacks, but in fact, the essence of Promise is "state", which uses the method of maintaining and passing state to enable the callback function to be called in time. It is much simpler and more flexible than passing the callback function. So the correct scenario for using Promise is this:

promiseClick()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

In this way, the content of each asynchronous callback can be output in sequence every two seconds, and the data passed to resolve in runAsync2 can be obtained in the next then method.

(P.S.: The reason why it is executed multiple times here is that when I was studying this usage, I was doing it in a react demo. The changes in multiple elements on the page caused the page to be rendered multiple times. If a normal page is only rendered once, it will only be executed once.)

Usage of reject

The above is an explanation of the usage of resolve of promise. Resolve is equivalent to the callback when promise succeeds. It changes the state of promise to

fullfiled, then reject is the callback when it fails. It changes the state of promise to rejected, so that we can capture it in then and execute the callback of the "failure" situation.

function promiseClick(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('The value of the random number generated:', num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('The number is too large to be 10 and the callback will fail');
				}
			}, 2000);
		   })
		   return p
	   }
 
	promiseClick().then(
		function(data){
			console.log('resolved successful callback');
			console.log('The value accepted by the successful callback:',data);
		}, 
		function(reason){
			console.log('rejected failed callback');
			console.log('Failed execution callback throws failure reason:',reason);
		}
	);

Execution Result:

(PS: This is also executed multiple times so the output is multiple times. The reason for multiple executions is the same as the last time)

The above code: calls the promiseClick method to execute, and obtains a random number after 2 seconds. If it is less than 10, we consider it a success and call resolve to change the state of Promise to fullfiled. Otherwise we consider it a "failure" and call reject and pass a parameter as the reason for the failure. And change the status to rejected

Run promiseClick and pass two parameters in then. These two parameters are two functions. The then method can accept two parameters, the first one corresponds to the resolve callback, and the second one corresponds to the reject callback. (That is to say, the then method accepts two callbacks, one for success and one for failure, and can get the success data and the reason for failure in the callback function), so we can get the data passed by success and failure respectively, and we have the above running results

Usage of catch

A method that runs parallel to the then method of the Promise object is catch. Similar to try catch, catch is used to catch exceptions, which is the same as the callback of the rejected second parameter accepted by the then method, as follows:

function promiseClick(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('The value of the random number generated:', num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('The number is too large to be 10 and the callback will fail');
				}
			}, 2000);
		   })
		   return p
	   }
 
	promiseClick().then(
		function(data){
			console.log('resolved successful callback');
			console.log('The value accepted by the successful callback:',data);
		}
	)
	.catch(function(reason, data){
		console.log('catch to rejected failure callback');
		console.log('catch failed to execute callback throw failure reason:',reason);
	});

Execution Result:

The effect is the same as writing it in the second parameter of then. It outputs the reason for the failed callback when the value is greater than 10. However, it also has another function: when executing the resolve callback (that is, the first parameter in the then above), if an exception is thrown (code error), it will not report an error and freeze JS, but will enter this catch method. as follows:

function promiseClick(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('The value of the random number generated:', num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('The number is too large to be 10 and the callback will fail');
				}
			}, 2000);
		   })
		   return p
	   }
 
	promiseClick().then(
		function(data){
			console.log('resolved successful callback');
			console.log('The value accepted by the successful callback:',data);
			console.log(noData);
		}
	)
	.catch(function(reason, data){
		console.log('catch to rejected failure callback');
		console.log('catch failed to execute callback throw failure reason:',reason);
	});

Execution Result:

In the resolve callback, we console.log(noData); but the variable noData is not defined. If we don't use Promise, the code will report an error in the console when it runs to this point and will not run further. But here, we will get the result shown in the figure above, which means that we enter the catch method and pass the cause of the error to the reason parameter. Even if there is an error in the code, no error will be reported.

Usage of all

Another method at the same level as then, the all method, provides the ability to execute asynchronous operations in parallel, and executes the callback only when all asynchronous operations are executed and the execution results are successful.

Copy the above method twice and rename it promiseClick3(), promiseClick2(), promiseClick1() as follows

function promiseClick1(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('The value of the random number generated:', num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('The number is too large to be 10 and the callback will fail');
				}
			}, 2000);
		   })
		   return p
	   }
	   function promiseClick2(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('The value of the random number generated:', num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('The number is too large to be 10 and the callback will fail');
				}
			}, 2000);
		   })
		   return p
	   }
	   function promiseClick3(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('The value of the random number generated:', num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('The number is too large to be 10 and the callback will fail');
				}
			}, 2000);
		   })
		   return p
	   }
 
	Promises
		.all([promiseClick3(), promiseClick2(), promiseClick1()])
		.then(function(results){
			console.log(results);
		});

Promise.all is used to execute. all receives an array parameter. This set of parameters is all the methods that need to perform asynchronous operations. The values ​​in it are finally considered to return the Promise object. In this way, the three asynchronous operations are executed in parallel, and the then operation will not be entered until they are all executed. So, where did the data returned by the three asynchronous operations go? All are in then. All will put the results of all asynchronous operations into an array and pass it to then. Then, the successful callback of then method will be executed to receive the results. The results are as follows: (the results are obtained by executing them separately. All will execute the three functions uniformly and store the values ​​in an array and return them to then for callback output):

In this way, you can use all to execute multiple asynchronous operations in parallel and process all the returned data in one callback. For example, when you need to prepare all the data in advance before rendering the page, you can use all to execute multiple asynchronous operations to process all the data before rendering.

Usage of race

all means to wait until all asynchronous operations are completed before executing the then method, while the race method is the opposite. The callback will be executed first if the operation is completed first. The first one to be executed, regardless of whether it is a successful callback or a failed callback of race, will not enter any callback of race again

We change the delay of the above method to 234 seconds respectively

 
function promiseClick1(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('2s random number generated value:',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('The 2s number is too large to be 10 and the callback will fail');
				}
			}, 2000);
		   })
		   return p
	   }
	   function promiseClick2(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('3s random number generated value:',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('The 3s number is too large to be 10 and the callback will fail');
				}
			}, 3000);
		   })
		   return p
	   }
	   function promiseClick3(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //Generate a random number from 1 to 10 console.log('4s random number generated value:',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('4s number is too large to be 10 and the callback will fail');
				}
			}, 4000);
		   })
		   return p
	   }
 
	Promises
		.race([promiseClick3(), promiseClick2(), promiseClick1()])
		.then(function(results){
			console.log('success',results);
		},function(reason){
			console.log('failed',reason);
		});

When promiseClick1 is executed after 2s, it has entered the callback in then. When the callback in then starts to execute, promiseClick2() and promiseClick3() have not stopped and are still executing. Then after another 3 seconds, their respective values ​​are output, but no callback of race will be entered again. As shown in the figure, after 2s generates 10 and enters the successful callback of race, the remaining functions continue to execute, but will not enter any callback of race again. 2s generates 16 and enters the failure callback of race, and the rest continue to execute, but will not enter any callback of race again.

For example, race can be used to execute the then method if a request is successful within 10 seconds. If the request is not successful within 10 seconds, it will enter the reject callback to perform another operation.

Supplement: (Since someone asked me how to implement the use of race, for example, if a request is successful within 10 seconds, then the then method will be used. If the request is not successful within 10 seconds, then the reject callback will be entered to perform another operation. This question, I think there is something wrong with my expression, so let me give an example)

 //Request a table data function requestTableList(){
        var p = new Promise((resolve, reject) => {
               //Go to the backend to request data, this can be ajax, axios, or fetch 
                resolve(res);
        });
        return p;
    }
  //Delay function, used to time the request for 10 seconds
      function timeout(){
          var p = new Promise((resolve, reject) => {
              setTimeout(() => {
                  reject('Request timeout');
              }, 10000);
          });
          return p;
      }
      Promise.race([requestTableList(), timeout()]).then((data) => {
        //Perform successful callback processing console.log(data);
      }).catch((err) => {
        // Failure callback processing console.log(err);
      });

Request an interface data, display the data if the request is completed within 10 seconds, and prompt that the request failed if the request is not completed within 10 seconds

Two promises are defined here, one to request data and the other to time 10s. The two promises are thrown into the race to race. If the data request is completed first, it will directly enter the .then success callback to display the requested data; if the timing is completed first, that is, the data request is not successful after 10s, it will first enter the race failure callback, prompting the user that the data request failed and enter the .catch callback. (ps: or enter the reject failure callback. When there is no reject callback in .then, the failure callback will directly enter .catch)

This concludes this article on the detailed usage of ES6 Promise. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.