ES6--Promise

Promise解决异步回调的问题

{
    //基本定义
    let ajax=function(callback){
        console.log("执行")
        setTimeout(function(){
            callback&&callback.call();
        },1000)
    };
    ajax(function(){
        console.log("执行完了")
    })
    //执行
    //执行完了
}
{
    let ajax=function(){
        console.log("执行");
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },1000)
        })
    }
    ajax().then(function(){
        console.log("执行完了")
    })
    //执行
    //执行完了
}
{
    let ajax=function(){
        console.log("执行");
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },1000)
        })
    }
    ajax().then(function(){
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },2000)
        })
    }).then(function(){
        console.log("执行完了")
    })
    //执行
    //执行完了
}
{
    let ajax=function(num){
        console.log("执行");
        return new Promise(function(resolve,reject){
            if(num>5){
                resolve()
            }else {
                throw new Error("出错了")
            }
        })
    }
    ajax(6).then(function(){
        console.log(6)
    }).catch(function(err){
        console.log(err)
    })
    //6
    ajax(4).then(function(){
        console.log(6)
    }).catch(function(err){
        console.log(err)
    })
    //Error: 出错了
}

Promise.all和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 showImgs(imgs){
        imgs.forEach(function(img){
            document.body.appendChild(img)
        })
    }
    Promise.all([
        loadImg('http://img2.imgtn.bdimg.com/it/u=4155809725,2453290283&fm=27&gp=0.jpg'),
        loadImg('http://img2.niutuku.com/desk/1208/1446/ntk-1446-13755.jpg'),
        loadImg('http://img0.imgtn.bdimg.com/it/u=4273540577,2947670665&fm=214&gp=0.jpg')
    ]).then(showImgs)
}
{
    //一个图片加载完就好
    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(img){
        document.body.appendChild(img)
    }
    Promise.race([
        loadImg('http://img2.imgtn.bdimg.com/it/u=4155809725,2453290283&fm=27&gp=0.jpg'),
        loadImg('http://img2.niutuku.com/desk/1208/1446/ntk-1446-13755.jpg'),
        loadImg('http://img0.imgtn.bdimg.com/it/u=4273540577,2947670665&fm=214&gp=0.jpg')
    ]).then(showImgs)
}