Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。

1.ES5回调实现异步

{
    let ajax = function(callback){
        console.log("执行了")
        setTimeout(function(){
            callback&&callback.call() ;  //判断callback为真时执行
        },1000);
    };
    ajax(function(){
        console.log("setTimeout1")
    })
}

2.Promise实现异步

{
    let ajax = function(){   //不需要参数
        console.log("执行2");
        return new Promise(function(resolve,reject){  //返回Promise对象，具有then方法，resolve要执行下一步的操作，reject表示要终端操作
            setTimeout(function(){
                resolve();
            },1000)
        })
    };
    ajax().then(function(){      //then的第一个函数体代表resolve，第二个函数体代表reject
        console.log("promise"); 
    })
}

3.很多异步操作

{
    // 不断的下一步下一步 异步
    let ajax = function(){
        console.log('执行3');
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve()
            },1000)
        })
    };
    ajax().then(function(){
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve()
            },1000)
        })
    })
    .then(function(){
        console.log("setTimeout3")
    })
}

4.捕捉异常catch

{
    let ajax = function(num){
        return new Promise(function(resolve,reject){
            if(num >5){
                resolve()
            }else{
                throw new Error("值小于5了")
            }
        })
    };
    ajax(6).then(function(){
        console.log("log",6)
    }).catch(function(err){
        console.log('err',err)
    })

    ajax(3).then(function(){
        console.log("log",3)
    }).catch(function(err){
        console.log("err",err)
    })
}

5.Promise.all

{
    // 所有图片加载完在添加到页面
    function loadImg(src){
        return new Promise((resolve,reject)=>{
            let img = document.createElement("img");
            img.src=src;
            img.onload=function(){
                resolve(img);
            }
            img.onerror=function(err){
                reject(err);
            }
        })
    }

    function showImgs(imgs){
        imgs.forEach(img=>{
            document.body.appendChild(img);
        })
    }
    Promise.all([    //all把多个Promise实例当做一个Promise实例
        loadImg('https://oimagec4.ydstatic.com/image?id=-5397300958976572132&product=adpublish&w=520&h=347'),
        loadImg('https://oimagec4.ydstatic.com/image?id=-5397300958976572132&product=adpublish&w=520&h=347'),
        loadImg('https://oimagec4.ydstatic.com/image?id=-5397300958976572132&product=adpublish&w=520&h=347')
        ])
    .then(showImgs)   //当所有图片都加载完成后才触发新的Promise实例
}

6.Promise.race

{
    //有一个图片加载完成就添加到页面上，其他的不管
    function loadImg(src){
        return new Promise((resolve,reject)=>{
            let img = document.createElement("img");
            img.src=src;
            img.onload=function(){
                resolve(img);
            }
            img.onerror=function(err){
                reject(err);
            }
        })
    }
    function showImg(img){
        let p = document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p);
    }
    Promise.race([    //只加载一个
        loadImg('https://oimagec4.ydstatic.com/image?id=-5397300958976572132&product=adpublish&w=520&h=347'),
        loadImg('https://oimagec4.ydstatic.com/image?id=-5397300958976572132&product=adpublish&w=520&h=347'),
        loadImg('https://oimagec4.ydstatic.com/image?id=-5397300958976572132&product=adpublish&w=520&h=347')
        ])
    .then(showImg) 
}