Promise

Promise 承诺

Promise是一个承诺，并不会立即执行
resolve是兑现承诺的回调，reject是拒绝兑现的回调
我们可以用then来获取兑现结果，用catch回去拒绝兑现的原因比如

function bigHouse(){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            var n = Math.random();//生成随机数
            if(n>0.5){ //数字大于0.5兑现承诺
                reselve("兑现承诺")
            }else{
                reject("未能兑现承诺")
            }
        },2000)
    })
}

bigHouse().then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

使用Promise有什么好处呢？比如我们现在要做这么一个需求，在2s后控制台输出第一句话之后等待3.5s后输出第二句话，然后再等1.5s后输出第三句话如果使用一般的函数方法来实现的话代码如下

function say(msg,time,callback){
    setTimeout(function(){
        console.log(msg);
        if(callback){
            callback();
        }
        
    },time)
}

say("第一句话",2000,function(){
    say("第二句话",3500,function(){
        say("第三句话",1500)
    })
})

这样看起来还好，但是如果需求更多的话嵌套层数过多就会导致代码看起来变复杂了，而使用Promise的话就不需要嵌套了，下面是Promise的写法

function say(msg,time){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve(msg)
        },time)
    })
}

say("第一句话",2000).then(res=>{
    console.log(res);
    return say("第二句话",3500)
}).then(res=>{
    console.log(res);
    return say("第三句话",1500)
}).then(res=>{
    console.log(res)
})

看起来好像变复杂了，但是这样没有了嵌套，即使需求变多代码看起来条理依旧清晰

.race

Promise有一个.race方法，这个方法可以只执行多个Promise中最先完成的哪一个，比如

var pics = [
    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340",
    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340",
    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
]
//这里有三张图片，我们只想在页面上显示最先加载完的那一张图片，就可以使用.race方法
function loadImage(url){
    return new Promise((resolve,reject)=>{
        var img = document.createElement("img");
        img.src = url;
        img.onload = function(){
            reslove(img);
        }
        img.onerror = function(e){
            reject(e)
        }
    })
}

Promise.race([loadImage(pics[0]),loadImage(pics[1]),loadImage(pics[2])])
.then(res=>{
    var div = document.createElement("div")
    div.innerHTML = "赛跑"
    document.body.append(div)
    document.body.append(res)
})

.all

当我们需要在三张图片全部加载完毕时同时让它们渲染在页面上可以用.all方法

Promise.all([loadImage(pics[0]),loadImage(pics[1]),loadImage(pics[2])])
.then(res=>{
    var div = document.createElement("div");
    div.innerHTML = "全部出现";
    document.body.append(div)
    for(var img in res){
        document.body.append(res[img])
    }
})