Promise instance analysis in js

Everyone knows that nodejs is very fast. Why is it so fast? The reason is that node uses asynchronous callbacks to handle events that need to be waited for, so that the code will continue to execute without waiting somewhere. But there is also a disadvantage. When we have many callbacks, for example, after executing this callback, we need to execute the next callback, and then execute the next callback. This will cause layers of nesting and unclear code, which is very difficult. It is easy to enter the "callback jail", which can easily lead to the following example:

async(1, function(value){
 async(value, function(value){
 async(value, function(value){
  async(value, function(value){
  async(value, function(value){
   async(value, final);
  });
  });
 });
 });
});

This way of writing will make people collapse. So is there any way to solve this problem, or is there any other way of writing? The answer is yes. The new promise object of es6 and the async await of es7 can solve this problem. Of course, the promise object will be introduced here first, and the async await of es7 will be shared in the following articles. The Promise object will be introduced below.

2. Introduction

Promise is an object that is used to handle asynchronous operations. It allows us to write asynchronous calls more elegantly, more beautifully and easier to read. As the name suggests, it means promise, which means that after using Promise, he will definitely give us a reply, no matter whether it succeeds or fails, he will give us a reply, so we don't have to worry about him running away, haha. Therefore, Promise has three states: pending (in progress), resolved (completed), and rejected (failed). Only structures returned asynchronously can change their state. Therefore, there are generally only two promise processes: pending->resolved or pending->rejected.

The promise object also has a more commonly used then method, which is used to execute the callback function. The then method accepts two parameters. The first is a successful resolved callback, the other is a failed rejected callback, and the second Optional callback parameters for failure. And the then method can also return a promise object, so that it can be called in a chain. Next, the code:

var Pro = function (time) {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    console.log('123');
    //模拟接口调用
    setTimeout(function () {
     //这里告诉Promise 成功了，然后去执行then方法的第一个函数
     resolve('成功返回');
    }, time);
   })
  };
  (function(){
   console.log('start');
   Pro(3000)
   .then(function(data){
    console.log(data);
    return Pro(5000);})
   .then(function(data){
    console.log(data);
    console.log('end');
   })
  })();

In the above code, a Pro variable is defined, and then an anonymous function is assigned to it. The function returns a Promise object, and then receives a function in the object, and uses the resolve and reject methods respectively. When the parameters are passed in, setTimeOut is used to simulate an asynchronous request. When the resolve method is executed, a function of the then method will be called. The results are as follows:

3. Promise API

1, Promise.resolve()
2, Promise.reject()
3 , Promise.prototype.then()
4, Promise.prototype.catch()
5, Promise.all() // All are completed, equivalent to
6, Promise.race( ) // Just complete one, which is equivalent to or

1. The function of Promise.resolve() is to convert the existing object into a Promise object resolvedl;Promise.resolve('test')==new Promise(resolve =>resolve('test'))

2. Promise.reject() also returns a Promise object with a status of rejected;

3. The then method has been introduced above, here it is No more introduction.

4. catch(): callback function when an error occurs.

5. Promise.all() is suitable for executing then() successfully after all results are completed. For example:

let p1 =new Promise(function(resolve,reject){
   resolve(1);
  });
  let p2 = new Promise(function(resolve,reject){
   resolve(2);
  });
  let p3 = new Promise(function(resolve,reject){
   resolve(3);
  });
  Promise.all([p1, p2, p3]).then(function (results) {
   console.log('success:'+results);
  }).catch(function(r){
   console.log("error");
   console.log(r);
  });

Final output:

6. The function of Promise.race() is to execute multiple instances at the same time, as long as one instance changes State, the Promise is changed to the state changed by that instance;

4. Example

var Pro = function () {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    //模拟接口调用
    setTimeout(function () {
     resolve(true);
    }, 1000);
   })
  };
  var Pro2 = function () {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    //模拟接口调用
    setTimeout(function () {
     resolve('Pro2成功执行');
    }, 1000);
   })
  };
  
  Pro().then(function(data){
   var val = data;
   console.log(val)
   if (val) {
    console.log(1111)
    return Pro2()
   }
   
  }).then(function(data1){
   console.log(data1)
  })

Output:

This way you can use The then method can now implement chain calls.

Related recommendations:

ES6 Promise extended always method instance detailed explanation

How to use jQuery’s Promise correctly

Detailed explanation of the sequential execution of promsie.all and promise

The above is the detailed content of Promise instance analysis in js. For more information, please follow other related articles on the PHP Chinese website!