First, why use promises, which problems can they solve?

Promises are a solution to asynchronous programming: syntactically, promises are an object from which to retrieve messages for asynchronous operations; In its original sense, it is a promise that will resolve over a period of time. Ta has three states: pending, fulfiled and Rejected. Once its pending state is turned into one of the rejected states, it is irreversible, that is, there is no conversion between success and failure. When a promise is made, it is immediately implemented. Look at the code:

let P = new Promise((resolve,reject) => {
  setTimeout(() => {
    resolve(1)
  }, 3000)
});
P.then(data => {
  console.log(data)
}, err => {

})
Copy the code

There is a new Promise,new Promise(execut); The execut here will execute immediately. P.teng will execute immediately. What does the then do? It will say later!

Let’s go back to a common problem we had writing code before promises (callback hell) :

function fn(a,cb){
    setTimeout(() => {a = 10 * Math. Random () cb(a)},300)}function fn1(c){
    if(c>5){
        console.log(c)
    }else{
        console.log('Low value')
    }
}

fn(0,fn1)
Copy the code

Sometimes we need to nest many layers in order to wait for a value. This is where promises come in. They address the following questions:

  1. Solve the problem of multi-layer nesting, also known as callback hell.
  2. Solving multiple asynchronous requests (ALL, RACE)

Let’s see how to write the following code with promise:

let p1 = new Promise((resolve, reject)=>{
    setTimeout(() => {a = 10 * math.random () resolve(a)}) p1.then(data => {fn1(data)})Copy the code

Especially with multiple layers of nesting, the benefits of promises become even more apparent!

Let’s learn some common uses of Promise!

A Promise is a constructor that has reject,resolve,all, and race on its own, and then, catch, and so on on its prototype.

Promise’s constructor takes one argument: the function (executor, which executes immediately), and this function takes two arguments:

  • Resolve: Callback function after asynchronous operation is successfully executed
  • The only thing you need to be aware of is that the Promise executor must have either resolve or reject callbacks executed. Change the state of a Promise to succeed or fail by either resolve or reject, and execute the success or failure functions of then.

Then chain operation usage

On the surface, promises are just a way to simplify the writing of callbacks. In essence, the essence of Promise is “state”, passing state so that callback function queues can be invoked in time, so the correct scenario for using Promise is like this:

function fn1(c){
    if(c>5){
        console.log(c)
    }else{
        console.log('Low value')}}let p1 = new Promise((resolve, reject)=>{
    setTimeout(() => {a = 10 * math.random () resolve(a)}) p1.then(data => {fn1(data))returnData}).then((data) => {console.log(data) //1.333}).then((data) => {console.log(data) //undefined})Copy the code

Here’s the passing of then: If the callback in then returns a Promise, then the resolve value of that Promise is passed to the data value of the next THEN. If it returns a normal value, then the normal value is passed to the data value of the next THEN, such as the result above.

Reject the use of the

Set the state of the Promise to Rejected so that we can capture it in THEN and perform a callback to the “failed” case. I won’t go into details here.

The use of the catch

What is it used for? This, like the second argument to THEN, specifies the reject callback. I won’t go into details here.

All the usage of the

let Promise1 = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve(1)
    },300)
    
})
let Promise2 = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve(2)
    },200)
})
let Promise3 = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve(3)
    },100)
})

letP = promise. all([Promise1, Promise2, Promise3]) p = promise. all([Promise1, Promise2, Promise3]) p.tenn ((data) => {console.log(data) // // If all three are successful},function(){// as long as there is a failure, failure})Copy the code

With all, you can perform multiple asynchronous operations in parallel and process all returned data in a single callback.

The use of the race

let Promise1 = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve(1)
    },300)
    
})
let Promise2 = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve(2)
    },200)
})
let Promise3 = new Promise(function(resolve, reject){
    setTimeout(() => {
        resolve(3)
    },100)
})

letP = promise.race ([Promise1, Promise2, Promise3]) p = promise.race ([Promise1, Promise2, Promise3]) p = promise.race ([Promise1, Promise2, Promise3]) p = promise.race ([Promise1, Promise2, Promise3])function(){// if there is a failure, then the failure})Copy the code

Whichever result comes first prevails, even if a reject result is returned first, then race is a Reject result.

Well, the common use of promise on these, the next we will talk about the source promise!