This is the 13th day of my participation in the August More Text Challenge

preface

The Promise object was added to ES6 to solve callback hell by implementing asynchronous operations in a synchronous way that makes it more comfortable for people to look at code rather than go through callbacks to find out where the code is running.

Three states of promise

  • This is a big pity
  • Rejected: Indicates the failed state
  • Pending: States other than success or failure, which can be understood as the initial state when the promise object instance is created

Promise’s two methods

  • Resolve: Changes the promise state to success, passing a parameter for subsequent successful actions
  • Reject: Changes the promise state to a failure, passing an error message to subsequent failed actions

Why use promise

The background of the story is that everyone has eaten tofu in the north, but do you know how to make tofu? A piece of tofu has to go through many steps, including planting beans, breaking beans, heating broken beans, filtering, precipitation, pressing and so on. We will not go into details here, but we will assume that there are three steps.

  1. Beans mature
  2. Bean to bean flour
  3. Bean flour is made into tofu

The code is as follows:

/ / soybeans
function fun1(){
    setTimeout(function() {
        console.log('The beans are ripe.')},3000)}// Soybeans are ground into bean powder
function fun2(){
    setTimeout(function(){
        console.log('The bean flour has been made.')},2000)}// Bean flour is used to make tofu
function fun3(){
    console.log('Tofu is ready.')
}
fun1()
fun2()
fun3()
Copy the code

The running results are as follows:

Why, this is what is going on, how and I want the result is not the same. Here is involved in the processing of asynchronous events in JS, asynchronous events in JS will be executed after synchronous events are completed, because the planting of beans and bean flour are asynchronous events, then the results will naturally have problems. If you want the correct result, you can use the callback function to solve the problem.Callbacks are available hereWe use the promise object here to solve this problem. Let’s change the code

/ / soybeans
function fun1(){
    // First we declare and return an instance of a Promise object, then resolve(), and then we can do.then()
    return new Promise(function(resolve,reject){
        setTimeout(function() {
            console.log('The beans are ripe.')
            resolve()
        },3000)})}// Soybeans are ground into bean powder
function fun2(){
    // Declare and return an instance of a Promise as well, because only in the case of a Promise will.then() be run after resolve(), otherwise.then() will be executed immediately, and the result is not what we expected
    return new Promise(function(resolve,reject){ 
        setTimeout(function(){
            console.log('The bean flour has been made.')
            resolve()
        },2000)})}// Bean flour is used to make tofu
function fun3(){
    console.log('Tofu is ready.')
}
fun1().then(function(){
        return fun2() // Why return? The. Then () operation will wait only if the return value is a promise object
    }).then(function(){
        fun3()
})
Copy the code

So we’ve got a piece of tofu and the whole process, the finish, the sprinkling

conclusion

Promise objects get rid of callback hell. Code written with promises is much more readable, elegant, and clear. Ha, ha, ha