1. Promise?

2. Asynchronous operations can be queued, executed in the desired order (simple understanding is that asynchronous requests become synchronous requests), and the expected results can be returned. 3. 4. Solve callback hell caused by asynchronous programming (solve callback hell)

2. Promise to understand

1. The Promise constructor is executed synchronously, while the THEN method is typically executed asynchronously

new Promise(res=>{ console.log(1); resolve(3); }).then(res=>{ console.log(res); }); console.log(2); // Result 1 2 3Copy the code

Promises are used to manage asynchronous programming. They are not asynchronous. New Promises will execute executor functions immediately, but we will normally handle an asynchronous operation within executor functions

let p1 = new Promise(()=>{ setTimeout(()=>{ console.log(1); }); console.log(2); }); console.log(3); / / 2, 3, 1Copy the code

3. Resolve and reject

1. ‘resolve

First, let’s look at several states of Promise:

Pending: Initial status, success or failure status.

This is a pity: which means that the operation will be completed successfully.

Rejected: Indicates that the operation fails.

When we call the resolve method in the excutor function, the state of the Promise becomes fulfilled, which is the fulfilled state. Remember the then and catch methods above in promise.prototype? So if we do the then method when the Promise is in the fullfilled state, notice, There are two parameters onfulfilled(fulfilled Promise) and onrejected (fulfilled Promise) in the then method. The steps are as follows:

1. Instantiate Promise (new Promise (function (resolve,reject)))

2. Call the THEN method with an instance of Promise.

Var p = new Promise(function (resolve, reject) {var timer = setTimeout(function () {console.log(' execute action 1')); Resolve (' This is data 1'); }, 1000); }); p.then(function (data) { console.log(data); Console. log(' This was a successful operation '); });Copy the code

The simple understanding is to call the resolve method, the Promise will become the successful state (depressing), and perform the operations in the ondepressing then method. The function in then is what we call a callback function, but we just separate it out here. We can see the output from the console as follows:

2. The use of the reject

Reject = reject (reject); reject (reject) = reject (reject); reject (reject) = reject (reject); One is fulfilled onfulfilled (fulfilled) when the Promise state is fulfilled (fulfilled), and the other is fulfilled (fulfilled) when the Promise state is fulfilled (fulfilled). In fact, this is similar to the two parameters in the hover method in jquery.

var p = new Promise(function (resolve, reject) { var flag = false; If (flag){resolve(' this is data 2'); }else{reject(' this is data 2'); }}); P.teng (function(data){// Console. log(data) will be fulfilled someday; Console. log(' This was a successful operation '); },function(reason){console.log(reason) {// Console. log(reason); Console. log(' This is a failed operation '); });Copy the code

3. The catch

We notice that in addition to the then method, there is another method called catch on the Promise prototype, so what does this method do? Then (reject) {reject (reject) = reject (reject); then (reject) {reject (reject) = reject (reject); As follows:

var p = new Promise(function (resolve, reject) { var flag = false; If (flag){resolve(' this is data 2'); }else{reject(' this is data 2'); }}); p.then(function(data){ console.log(data); Console. log(' This was a successful operation '); }).catch(function(reason){ console.log(reason); Console. log(' This is a failed operation '); });Copy the code

4. Why Promise

First let’s take a look at such an example, take four timers, set the delay time to 1s, and then output the words’ I ‘, ‘ai’, ‘mi’ and ‘rice’ on the console every 1s in turn. The code is as follows:

SetTimeout (function () {console.log(' I '); SetTimeout (function () {console.log(' love '); SetTimeout (function () {console.log(' m '); SetTimeout (function () {console.log(' dinner '); }, 1000); }, 1000); }, 1000); }, 1000);Copy the code

Do you see any problems? Doesn’t it feel like there’s too much nesting of callbacks, but what if there were more? Does it make the code much less readable and maintainable (callback hell? If we use Promise to achieve this effect, the code might be as readable or more, but it would be significantly more readable and maintainable. Take a look at the following examples:

Function getStr1() {return Promise(function (resolve, reject) {setTimeout(function () {resolve(' I '); }, 1000); }); } function getStr2() {return new Promise(function (resolve, reject) {setTimeout(function () {resolve(' love '); }, 1000); }); } function getStr3() {return new Promise(function (resolve, reject) {setTimeout(function () {resolve(' m '); }, 1000); }); } function getStr4() {return new Promise(function (resolve, reject) {setTimeout(function () {resolve(' I '); }, 1000); }); } getStr1().then(function (data) { console.log(data); return getStr2(); }).then(function (data) { console.log(data); return getStr3(); }).then(function (data) { console.log(data); return getStr4(); }).then(function (data) { console.log(data); })Copy the code

In this example, the process of getting a Promise instance is wrapped into a function (getStr1, getStr2,getStr3,getStr4) that returns a Promise instance and uses the instance to call the corresponding THEN method. Return the next level of Promise instance in each then method. For example, in the first Promise instance (getStr1 ()) then method, return the next Promise object (getStr2 ()), Then call the then method to perform the operation and return the next Promise object (getStr3() in this case), so the chain calls are implemented step by step. Although the code is increased, this method makes the code more readable and maintainable than the previous nesting method.

4. The use of the Promise

1. I promise

2. I promise