ES6解决异步问题

ES6解决异步问题用的是promise，promise中有三个参数，分别是resolve、reject和finally，当函数执行成功的时候执行resolve，失败执行reject，到最后都会执行finally

先介绍一下resolve。要执行resolve执行。就要使用（.then），它代表的就是resolve的函数,

(.catch)代表的就是reject，使用setTimeOut函数的原因就是因为要模拟后端传输的数据，flag也是为了模拟求情成功或者失败，如果你要是想一直使用（.XXX）那就必须保证函数return的是一个promise，只有promise函数才有then、catch和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")
}

先举一个promise的实例，这个实例就是让每张图片隔一秒后输出

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')
})

然后再做个小练习琢磨一些输出的优先级问题

function cook() {
console.log('开始做饭。');
var p = new Promise(function(resolve, reject){ 
    setTimeout(function() {
        console.log('做饭完毕！');
        resolve('鸡蛋炒饭');
    }, 1000);
});
return p;
}

function eat(data) {
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}
function wash(data) {
    console.log('开始洗碗：' + data);
    var p = new Promise(function(resolve, reject) { 
        setTimeout(function() {
            console.log('洗碗完毕!');
            resolve('干净的碗筷');
        }, 2000);
    });
    

思考一下如何才能让他在控制台按顺序输出，如图

 这个练习可以让你思考promise中优先级的问题，加深自己对promise的理解

答案：

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