Promise in Vernacular!!

What is a Promise

• It is an object designed to handle asynchronous operations, which makes writing asynchronous calls more elegant, beautiful and easy to read. After using the Promise, he will definitely give us a reply, no matter whether he succeeds or fails. Promise has three states: Pending, Resolved and Rejected.

How to use Promise

• The promise object is used in conjunction with es6, where the prototype constructor has a then method that executes the callback. The then method takes two arguments: the successful resolved callback and the failed callback. The second failed callback argument is optional. And then methods can also return promise objects
• The theory is in place. Here’s the code

    const promise = new Promise((resolve, reject) = > {
    console.log(1)
    resolve()
    console.log(2)
    })
    promise.then(() = > {
    console.log(3)})console.log(4)
    // Run the result
    1
    2
    4
    3
Copy the code

• Why is that? Internally, promises are executed sequentially, and resolve is executed asynchronously
• Promise.all() is also common. When should it be used? It is suitable for executing then () if all results are successful

    let p1 = new Promise(function (resolve, reject) {
        resolve();
    });
    let p2 = new Promise(function (resolve, reject) {
        resolve();
    });
    let p3 = new Promise(function (resolve, reject) {
        resolve();
    });
    Promise.all([p1, p2, p3]).then(function (results) {
        console.log('We all made it.');
    }).catch(function (err) {
        console.log(err);
    });
Copy the code

• The result of the above execution is that we all succeed, so what if there is a failure? So let’s look at the code

    let p1 = new Promise(function (resolve, reject) {
        resolve();
    });
    let p2 = new Promise(function (resolve, reject) {
        reject('I'm P2, I failed.');
    });
    let p3 = new Promise(function (resolve, reject) {
        resolve();
    });
    Promise.all([p1, p2, p3]).then(function (results) {
        console.log('We all made it.');
    }).catch(function (err) {
        console.log(err);
    });
Copy the code

• It’s going to return I’m P2 and I failed
• Next we use the Promise object in conjunction with finally() on the constructor prototype in ES6, see the code

    const achievement = Math.floor(Math.random()*99)
    const promise = new Promise((resolve, reject) = > {
        if (achievement > 60) {
            resolve('I passed.')}else {
            reject('I failed.')
        }
    })
    promise.then(pass= > {
        console.log(pass);
    }).catch(fail= > {
        console.log(fail);
    }).finally(() = >{
        console.log('I took an exam');
    })
Copy the code

• Whether you pass the exam or not, it says, ‘I took the exam.’
• Promise.race() also executes multiple instances at the same time. As soon as one instance changes state, the Promise is changed to that state

    function rabbit() {
        var p = new Promise((resolve, reject) = > {
            // The delay function is used to time the request
            setTimeout(() = > {
                reject('I'm a rabbit. I'm done.');
            }, 1000);
        });
        return p;
    }
    function tortoise() {
        var p = new Promise((resolve, reject) = > {
            setTimeout(() = > {
                reject('I'm a turtle, and I lost.');
            }, 3000);
        });
        return p;
    }
    Promise.race([rabbit(), tortoise()]).then((data) = > {
        console.log(data);
    }).catch((err) = > {
        console.log(err);
    });
Copy the code

• Apparently the rabbit won this time, heh heh.