es6之promise

promise用于异步调用

//基本用法

let ajax=function(){
        console.log("执行");
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve()
            },1000)
        })
    }
    ajax().then(function(){
        console.log("promise","timeout");
    })

//连续调用

let ajax=function(){
        console.log("执行1");
        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("timeout3")
        })

    })

//错误捕获

let ajax=function(num){
        console.log("执行乐乐乐");
        return new Promise(function(resolve,reject){
            if(num>5){
                resolve()
            }else{
                throw Error("出错了");
            }
        })
    }
    ajax(6).then(function(){
        console.log("执行第二步");
    }).catch(function(err){
        console.log("catch",err);
    })
    ajax(1).then(function(){
        console.log("执行第二步");
    }).catch(function(err){
        console.log("catch",err);
    })

　　

实例

 //所有图片加载完再加载到页面
    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 shopImgs(imgs){
        imgs.forEach(function(img){
            document.body.appendChild(img);
        })
    }

    Promise.all([
        loadImg("http://img.tgljweb.com/1720171108170301_tango_img"),
        loadImg("http://img.tgljweb.com/1720171112111533_tango_img"),
        loadImg("http://img.tgljweb.com/1720171104093842_tango_img"),
    ]).then(shopImgs)

 

//当有一个图片加载完就显示在页面，即哪一张先加载出来，就显示哪一张
    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 shopImgs(img){
        let p=document.createElement("p");
        p.appendChild(img);
        document.body.appendChild(p);
    }

    Promise.race([
        loadImg("http://img.tgljweb.com/1720171108170301_tango_img"),
        loadImg("http://img.tgljweb.com/1720171112111533_tango_img"),
        loadImg("http://img.tgljweb.com/1720171104093842_tango_img")
    ]).then(shopImgs)