Detailed introduction to the knowledge points about promises in js

Now I will share with you a brief discussion on the use of js promise. It has a very good reference value and you will understand it after reading this article. I hope to be helpful.

1. Background

Everyone knows that nodejs is very fast. Why is it so fast? The reason is that node uses asynchronous callbacks to process Events that need to be waited for allow the code to continue executing 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. It is more elegant to write, more beautiful 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’s api

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

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);
  });

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)
  })

JavaScript Mediator Pattern (detailed tutorial)

How to use the Dom element in jQuery?

How to implement event-responsive progress bar component in Vue

The above is the detailed content of Detailed introduction to the knowledge points about promises in js. For more information, please follow other related articles on the PHP Chinese website!