ES6 solves asynchronous problems

ES6 The asynchronous problem is solved by promise,promise There are three parameters in , Namely resolve、reject and finally, When the function is successfully executed, execute resolve, Failed execution reject, It will be implemented in the end finally

Let me introduce you resolve. To execute resolve perform . Then use （.then）, It stands for resolve Function of ,

(.catch) It stands for reject, Use setTimeOut The reason for the function is to simulate the data transmitted by the backend ,flag It is also to simulate the success or failure of courtship , If you want to use it all the time （.XXX） Then we must ensure that the function return Is a promise, Only promise Functions have then、catch and finally

function fn(){
    return new Promise((resolve) => {
        setTimeout(function(){
            if(flag){
                 resolve();
            }else{
                reject();
            }
        },1000)
    })
}
fn().then(){
    console.log("123")
    return fn()
}
.catch(){
    console.log("456")
    return fn()
}
.finally（）{
    console.log("789")
}

Let's start with promise Example , This example is to output every picture every second

let div = document.querySelector("div")
function delayImg(item,src){
    return new Promise((resolve) => {
        setTimeout(function(){
            let img = document.createElement("img");
            img.src = src;
            item.append(img);
            resolve();
        },1000)
    })
}
delayImg(div,'https://s1.ax1x.com/2022/07/20/jbJGtg.jpg')
.then(function(){
    return delayImg(div,'https://s1.ax1x.com/2022/07/20/jbJtpj.jpg')
})
.then(function(){
    return delayImg(div,'https://s1.ax1x.com/2022/07/20/jbJJhQ.jpg')
})

Then do a little exercise to think about the priority of some outputs

function cook() {
console.log(' Start cooking .');
var p = new Promise(function(resolve, reject){ 
    setTimeout(function() {
        console.log(' After cooking ！');
        resolve(' Stir-Fried Rice with Egg ');
    }, 1000);
});
return p;
}

function eat(data) {
    console.log(' Start eating ：' + data);
    var p = new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log(' After dinner !');
            resolve(' A bowl and a pair of chopsticks ');
        }, 2000);
    });
    return p;
}
function wash(data) {
    console.log(' Start washing dishes ：' + data);
    var p = new Promise(function(resolve, reject) { 
        setTimeout(function() {
            console.log(' Finished washing dishes !');
            resolve(' Clean bowls and chopsticks ');
        }, 2000);
    });
    

Think about how to make him output in order on the console , Pictured

  This exercise can make you think promise Medium priority issues , Deepen your understanding of promise The understanding of the

answer ：

cook()
.then(function(sentence){
        return eat(sentence)
})
.then(function(sentence1){
        return wash(sentence1)
}).then(function(sentence2){
    console.log(sentence2)
})