Promise is a solution for asynchronous programming. It is an object that can obtain messages from asynchronous operations, greatly improving the difficulty of asynchronous programming, avoiding callback hell, which is more reasonable and powerful than traditional solutions callback functions and events.
Syntactically, a Promise is an object that can get messages from asynchronous operations. Provides a unified API, and all kinds of asynchronous operations can be processed in the same way.
1. The instance of Promise has three states:
(1) Pending (in progress)
(2) Resolved (completed)
(3)Rejected (rejected)
2. There are two processes for the instance of Promise
(1)pending > fulfiled :Resolved
(2)pending > rejected :Rejected
Note: Once the state of the purchase and sale item is changed to another state, the state can never be changed.
Basic usage of Promise:
1. Create a Promise object
The Promise object represents an asynchronous operation, with three states: pending (in progress), fulfilled (successfully), rejected (failed)
The Promise constructor receives a function as a parameter, and the two parameters of the function are resolve and reject
2. Promise method
There are five common methods for Promise:
(1)then()
The then method can receive two callback functions as parameters. The first callback function is called when the state of the Promise object changes to resoved, and the second callback function is called when the state of the Promise object changes to rejected. The second parameter can be omitted.
let promise = new Promise((resolve,reject)=>{ ajax('first').success(function(res){ resolve(res); }) }) (res=>{ return new Promise((resovle,reject)=>{ ajax('second').success(function(res){ resolve(res) }) }) }).then(res=>{ return new Promise((resovle,reject)=>{ ajax('second').success(function(res){ resolve(res) }) }) }).then(res=>{ })
(2)catch()
This method is equivalent to the second parameter of the then method, pointing to the callback function of reject.
Another function is that when executing the resolve callback function, if an error occurs, an exception will not be stopped, but will enter the catch method.
((data) => { ('resolved',data); },(err) => { ('rejected',err); } ); ((data) => { ('resolved',data); }).catch((err) => { ('rejected',err); });
(3)all()
The all method can complete and perform tasks. It receives an array, and each item in the array is a Promise object. When all the Promise states in the array reach resolved, the state of the all method will become resolved, if one state becomes rejected. Then the state of the all method will become rejected.
javascript let promise1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(1); },2000) }); let promise2 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(2); },1000) }); let promise3 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(3); },3000) }); ([promise1,promise2,promise3]).then(res=>{ (res); //The result is: [1,2,3]})
(4)rece()
The receive method is the same as all. The received parameter is an array with each item Promise, but unlike all, when the first event is executed, the value of the promise object is directly returned
The actual function of reception: When you want to do something and don’t do it for a long time, you can use this method to solve it.
([promise1,timeOutPromise(5000)]).then(res=>{})
(5)finally()
The finally method is used to specify operations that will be performed regardless of the last state of the Promise object. (This method is a standard introduced in ES2018)
promise .then(result => {···}) .catch(error => {···}) .finally(() => {···});
The callback function of the finally method does not accept any parameters, which means there is no way to know whether the previous Promise state is fulfilled or rejected
promise .finally(() => { // Statement}); // Equivalent topromise .then( result => { // Statement return result; }, error => { // Statement throw error; } );
In the above code, if you do not write the finally method, the same statement needs to be written once for both success and failure. With the finally method, just write it once
Summarize
That’s all for this article. I hope it can help you and I hope you can pay more attention to more of my content!