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)
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容