This is the 20th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Promises

Promises are the final completion (or failure) of an asynchronous operation and the resulting value. In this article, we will look at Promises.

A Promise object can be created to associate an asynchronous operation’s eventual success return value or failure reason with the corresponding handler, and it has three states:

• Pending: Initial state, neither honored nor rejected.
• This is a big pity.: indicates that the operation completed successfully.
• I have rejected the offer.: Indicates that the operation fails.

How to use

Create a Promise object

The Promise object is created by the keyword new and its constructor. Its constructor takes two arguments, resolve and reject, and is called when the asynchronous task completes successfully and returns a result value. The Reject function is called when the asynchronous task fails and returns the cause of the failure (usually an error object).

const promise=new Promise((reslove,reject) = >{
    if(Math.random()<0.5){
        reslove('success')}else{
        reject('failure')}})Copy the code

In the code above we simulate the success or failure of the request with the value of math.random (), i.e., the pity state or the Rejected state. According to the corresponding state to do the corresponding operation, success or failure function can pass the corresponding parameters.

The chain operation

We can use the promise.then(), promise.catch(), and promise.finally() methods to do chain operations associated with the state of a promise, using the following:

promise.then((res) = >{
    console.log('also smiled x1',res);
}).then(() = >{
    console.log('also smiled x2');
}).catch((res) = >{
    console.log('also smiled x3',res);
}).then(() = >{
    console.log('also smiled x4');
}).finally(() = >{
    console.log('also smiled x5');
})
Copy the code

.then() is called when the inhibition state is fulfilled,.catch() is called when the rejected state is fulfilled, and.finally() is called when all chain operations are fulfilled. Therefore, we can know:

This is a big pity. When the promise state is fulfilled, the output is as follows:

Laugh at x1, laugh at X2, laugh at X4, laugh at X5Copy the code

If the promise status is Rejected, the output is as follows:

Laugh at x3 failure, laugh at X4, laugh at x5Copy the code

Matters needing attention

We also need to note that in the chain operation, we can continue to return a Promise object as follows:

const promise=new Promise((reslove,reject) = >{
    reslove('success')
})

promise.then((res) = >{
    console.log('also smiled x1',res);
    return new Promise((reslove,reject) = >{
        reject('Failure after then operation')
    })
}).then(() = >{
    console.log('also smiled x2');
}).catch((res) = >{
    console.log('also smiled x3',res);
}).then(() = >{
    console.log('also smiled x4');
}).finally(() = >{
    console.log('also smiled x5');
})
Copy the code

The following output is displayed:

Laugh at the success of x1 and the failure of X3 then and laugh at x4 and x5Copy the code

Promise is used a lot in our project, so you should get to know it well.

conclusion

Promise is primarily designed to solve callback hell, which is the layer upon layer of bloatcode we nest, but it essentially does the same thing as callback. This article does not go into depth with examples that will meet most of the requirements you will encounter in your project.

If you want to learn more about ES features, go to ES2015+ Fragmentation Learning, taking a step forward every day, which is the directory entry for all the articles.