ES6 Promise --回調與Promise的對比、信任問題、錯誤處理、Promise的狀態、以及Promise對象的常用方法

之前怎麼用回調解決非同步的問題： function f(callback){ setTimeout(function(){ callback && callback(); }); } f(function(){ console.log(1); f(function(){ console.log(2); ...

之前怎麼用回調解決非同步的問題：

function f(callback){
    setTimeout(function(){
        callback && callback();
    });    
}

f(function(){
    console.log(1);
    f(function(){
        console.log(2);    
        f(function(){
            console.log(3);    
            f(function(){
                console.log(4);    
                f(function(){
                    console.log(5);    
                    f(function(){
                        console.log(6);        
                    })    
                })        
            })    
        })    
    })
})

使用promise實現相同的效果

//使用promise實現相同的效果
function f2(){
    return new Promise(resolve=>{//參數傳入一個回調函數
        setTimeout(function(){
            //時執行函數
            resolve();
        },1000)
    })
}

f2()//只有返回Promise實例，才能.then
.then(function(){
    console.log(11);
    return f2();
})
.then(function(){
    console.log(22);
    return f2();
})
.then(function(){
    console.log(33);
    return f2();
})
.then(function(){
    console.log(44);
    return f2();
})
.then(function(){
    console.log(55);
    return f2();
})
.then(function(){
    console.log(66);
    return f2();
})

對比回調與Promise的流程式控制制

首先是回調

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background:lightgreen;
            transition:all 1s;
            color:#fff;
            text-align:center;
            line-height:100px;
            font-size:40px;
        }
    </style>
</head>
<body>

    <div class="box">哦</div>
    <button id="btn">開始</button>
<script>
//動畫
function move(el,x,y,cb){
    el.style.transform=`translate(${ x }px, ${ y }px)`;
    setTimeout(function(){
        cb && cb();
    },1000);    
}

//獲取元素
let box=document.querySelector(".box");
let btn=document.querySelector("#btn");
//綁定事件
btn.addEventListener("click",e=>{
    //使用回調完成動畫
    move(box,100,100,function(){
        move(box,200,200,function(){
            move(box,100,300,function(){
                move(box,0,0,function(){
                    console.log("移動結束！");
                })
            })    
        })    
    })    
})

</script>
</body>
</html>

實現的效果

使用Promise來實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background:lightgreen;
            transition:all 1s;
            color:#fff;
            text-align:center;
            line-height:100px;
            font-size:40px;
        }
    </style>
</head>
<body>

    <div class="box">哦</div>
    <button id="btn">開始</button>
<script>
//動畫
function move(el,x,y){
    return new Promise(resolve=>{
        el.style.transform=`translate(${ x }px, ${ y }px)`;
        setTimeout(function(){
            resolve();
        },1000);
    })        
}

//獲取元素
let box=document.querySelector(".box");
let btn=document.querySelector("#btn");
//綁定事件
btn.addEventListener("click",e=>{
    //使用Promise完成動畫
    move(box,100,100)
    .then(function(){        
        return move(box,200,200);
    })
    .then(function(){        
        return move(box,100,300);
    })
    .then(function(){        
        return move(box,0,0);
    })
    .then(function(){
        console.log("移動結束！");
    })
})

</script>
</body>
</html>

實現一個圖片的載入；設置第一張圖片載入1s之後載入第二張圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        img{width:200px;}
    </style>
</head>
<body>


<script>

//設置一個函數，把圖片的url地址作為參數
function createImg(url){
    //實例化promise對象
    return new Promise(resolve=>{
        let img=new Image();//建立圖像對象
        img.src=url;//設置圖片的地址
        document.body.appendChild(img);//把圖片節點插入到body中
        setTimeout(function(){
            resolve();//圖片載入完成後執行resolve 
        },1000);
    })
}

createImg("1.jpg")
.then(function(){
    return createImg("2.jpg")
})
.then(function(){
    return createImg("3.jpg")
});

</script>
</body>
</html>

信任問題

//信任問題演示

//回調
function method(cb){
    setTimeout(function(){
        cb && cb();
        //因為某些bug導致某個函數多執行了一次
        cb && cb();
    },1000);
}

//promise
function method2(){
    return new Promise(resolve=>{
        setTimeout(function(){
            resolve();
            //resolve成功調用一次之後，後面的不會再執行
            resolve();
        },1000);        
    })
}

控制反轉

//回調
function method(cb){
    setTimeout(function(){
        cb && cb.call({a:1,b:2});//執行回調，但是添油加醋
    },1000);
}

//promise
function method2(){
    return new Promise(resolve=>{
        setTimeout(function(){
            resolve();//調用的resolve都是自己寫的，改善了控制反轉的問題
        },1000);        
    })
}

錯誤處理

function fn(val){
    //第二個參數代表失敗時做的事情
    return new Promise((resolve,reject)=>{
        if(val){
            resolve();
        }else{
            reject();
        }
    })
}

fn(false)
.then(()=>{
    console.log("成功");
},()=>{
    console.log("失敗");
})

錯誤處理回調可以傳入參數

function fn(val){
    //第二個參數代表失敗時做的事情
    return new Promise((resolve,reject)=>{
        if(val){
            resolve();
        }else{
            reject("404");
        }
    })
}

fn(false)
.then(()=>{
    console.log("成功");
},e=>{
    console.log(e);
})

resolve也可以傳遞參數，但是只能傳一個，不能傳兩個

function fn(val){
    //第二個參數代表失敗時做的事情
    return new Promise((resolve,reject)=>{
        if(val){
            resolve({a:1},{b:2});
        }else{
            reject("404");
        }
    })
}

fn(true)
.then((obj1,obj2)=>{
    console.log(obj1);
    console.log(obj2);
},e=>{
    console.log(e);
})

使用實例的catch方法，可以捕獲錯誤

如果返回的是錯誤，則下麵必須有對錯誤的捕獲處理，否則代碼不會執行，會被跳過

function fn(val){
    //第二個參數代表失敗時做的事情
    return new Promise((resolve,reject)=>{
        if(val){
            resolve("這是數據");
        }else{
            reject("404");
        }
    })
}

fn(true)
.then(data=>{
    console.log(data);
    return fn(false);//失敗，拋出錯誤
})
.then(()=>{
    console.log("這裡沒有對錯誤的處理，因此不會執行");
})
.catch(e=>{//捕獲錯誤，執行代碼
    console.log(e);
})

如果在捕獲錯誤之前，存在對錯誤的處理，那麼catch不會再執行

function fn(val){
    //第二個參數代表失敗時做的事情
    return new Promise((resolve,reject)=>{
        if(val){
            resolve("這是數據");
        }else{
            reject("404");
        }
    })
}

fn(true)
.then(data=>{
    console.log(data);
    return fn(false);//失敗，拋出錯誤
})
.then(()=>{
    console.log("這裡沒有對錯誤的處理，因此不會執行");
})
.then(()=>{
    
},e=>{
    console.log("這裡對錯誤進行了處理，下麵的catch不會被執行了");
})
.catch(e=>{//捕獲錯誤，執行代碼
    console.log(e);
})

catch之後還可以繼續then，如果再次拋出錯誤，也需要在之後進行錯誤處理

function fn(val){
    //第二個參數代表失敗時做的事情
    return new Promise((resolve,reject)=>{
        if(val){
            resolve("這是數據");
        }else{
            reject("404");
        }
    })
}

fn(true)
.then(data=>{
    console.log(data);
    return fn(false);//失敗，拋出錯誤
})
.then(()=>{
    console.log("這裡沒有對錯誤的處理，因此不會執行");
})
.catch(e=>{//捕獲錯誤，執行代碼
    console.log(e);
    return fn(false);//再次拋出錯誤
});

最後拋出的錯誤沒有捕獲，因此報錯

finally 不管成功或失敗，都會執行

function fn(val){
    //第二個參數代表失敗時做的事情
    return new Promise((resolve,reject)=>{
        if(val){
            resolve("這是數據");
        }else{
            reject("404");
        }
    })
}

fn(true)
.then(data=>{
    console.log(data);
    return fn(false);//失敗，拋出錯誤
})
.catch(e=>{//捕獲錯誤，執行代碼
    console.log(e);
})
.finally(()=>{
    console.log("finally執行一些收尾工作");
})

Promise的狀態

panding 進行中

fulfilled 成功

reject 失敗

Promise.all()

把多個promise實例，包裝成一個新的promise實例

如果所有promise結果都是成功，則返回成功，所有promise返回的數據以數組形式統一返回，且順序一一對應

如果有一個promise決議為失敗，則返回失敗，且把失敗的信息返回

如果是空數組，則立即決議為成功

//模擬需要多個請求數據才能進行下一步的情況
function data1(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data1載入成功");
            resolve("data1");//傳遞參數
        },1000)
    })
}

function data2(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data2載入成功");
            resolve("data2");//傳遞參數
        },1000)
    })
}    

function data3(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data3載入成功");
            resolve("data3");//傳遞參數
        },1000)
    })
}    

function data4(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data4載入成功");
            resolve("data4");//傳遞參數
        },2000)
    })
}    

//全部成功的情況
let res=Promise.all([data1(),data2(),data3(),data4()]);
res
.then(data=>{
    console.log(data);//接收上面傳遞過來的所有參數
})

//模擬需要多個請求數據才能進行下一步的情況
function data1(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data1載入成功");
            resolve("data1");//傳遞參數
        },1000)
    })
}

function data2(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject("data2 err");//數據2請求失敗
        },1000)
    })
}    

function data3(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data3載入成功");
            resolve("data3");//傳遞參數
        },1000)
    })
}    

function data4(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data4載入成功");
            resolve("data4");//傳遞參數
        },2000)
    })
}    

//全部成功的情況
let res=Promise.all([data1(),data2(),data3(),data4()]);
res
.then(data=>{
    console.log(data);//接收上面傳遞過來的所有參數
},e=>{
    console.log(e);//有錯誤執行這句並立刻返回錯誤信息，正確的數據不會返回
})

//模擬需要多個請求數據才能進行下一步的情況
function data1(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data1載入成功");
            resolve("data1");//傳遞參數
        },1000)
    })
}

function data2(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject("data2 err");//數據2請求失敗
        },1000)
    })
}    

function data3(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data3載入成功");
            resolve("data3");//傳遞參數
        },1000)
    })
}    

function data4(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data4載入成功");
            resolve("data4");//傳遞參數
        },2000)
    })
}    

//全部成功的情況
let res=Promise.all([]);
res
.then(()=>{
    console.log("決議成功");//空數組直接決議為成功
},e=>{
    console.log(e);//有錯誤執行這句並立刻返回錯誤信息，正確的數據不會返回
})

相同的功能，使用ES6之前的語法，不使用promise.all()要如何實現：

//不使用promise.all()

let count=0;

function fn(){
    if(count<4) return;
    console.log("數據全部接收成功");
}

function data1(){
    setTimeout(()=>{            
        console.log("data1載入成功");
        count++;
        fn();
    },2000)
}

function data2(){
    setTimeout(()=>{            
        console.log("data2載入成功");
        count++;
        fn();
    },2000)
}    

function data3(){
    setTimeout(()=>{            
        console.log("data3載入成功");
        count++;
        fn();
    },2000)
}    

function data4(){
    setTimeout(()=>{            
        console.log("data4載入成功");
        count++;
        fn();
    },2000)
}    

data1();
data2();
data3();
data4();

如果有數據接收失敗

//不使用promise.all()

let count=0;
let err=false;

function fn(){
    if(err) {
        console.log("有數據接收失敗");
        return;
    }
    if(count<4) return;
    console.log("數據全部接收成功");
}

function data1(){
    setTimeout(()=>{            
        console.log("data1載入成功");
        count++;
        fn();
    },2000)
}

function data2(){
    setTimeout(()=>{            
        console.log("data2載入失敗");
        err=true;
        fn();
    },2000)
}    

function data3(){
    setTimeout(()=>{            
        console.log("data3載入成功");
        count++;
        fn();
    },2000)
}    

function data4(){
    setTimeout(()=>{            
        console.log("data4載入成功");
        count++;
        fn();
    },2000)
}    

data1();
data2();
data3();
data4();

Promise.race()

數組中只要有一個決議為成功，則立馬決議為成功，並把值傳遞過來

//promise.race()
function data1(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data1成功")    ;    
            resolve("data1");
        },1000)
    })
}

function data2(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data2成功")    ;            
            resolve("data2");
        },500)
    })
}    

function data3(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data3成功")    ;                
            resolve("data3");
        },1000)
    })
}    

function data4(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data4成功")    ;            
            resolve("data4");
        },1000)
    })
}    

let res=Promise.race([data1(),data2(),data3(),data4()]);
res
.then(data=>{
    console.log(data);//輸出最早成功的數據
},e=>{
    console.log(e);
})

如果有錯誤，也會立即輸出err信息

//promise.race()
function data1(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data1成功")    ;    
            resolve("data1");
        },1000)
    })
}

function data2(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data2失敗")    ;            
            reject("err2");
        },500)
    })
}    

function data3(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data3成功")    ;                
            resolve("data3");
        },1000)
    })
}    

function data4(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data4失敗")    ;            
            resolve("err4");
        },1000)
    })
}    

let res=Promise.race([data1(),data2(),data3(),data4()]);
res
.then(data=>{
    console.log(data);//輸出最早成功的數據
},e=>{
    console.log(e);
})

如果傳入空數組，則程式被掛起

//promise.race()
function data1(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data1成功")    ;    
            resolve("data1");
        },1000)
    })
}

function data2(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data2失敗")    ;            
            reject("err2");
        },500)
    })
}    

function data3(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log("data3成功")    ;                
            resolve("data3");
        },1000)
    })
}    

function data4(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{    
            console.log("data4失敗")    ;            
            resolve("err4");
        },1000)
    })
}    

let res=Promise.race([]);
res
.then(data=>{
    console.log(data);//輸出最早成功的數據
},e=>{
    console.log(e);
})

如果不使用ES6的promise.race()，實現效果如下

//不使用promise.race()
let flag=false;
function fn(data){
    if(flag) return;
    flag=true;//有請求則返回true
    console.log(data);
}

function data1(){
    setTimeout(()=>{    
        console.log("data1成功")    ;    
        fn({name:1})
    },500)
}

function data2(){
    setTimeout(()=>{    
        console.log("data2成功")    ;
        fn({name:2})    
    },600)
}    

function data3(){
    setTimeout(()=>{    
        console.log("data3成功")    ;
        fn({name:3})    
    },1000)
}    

function data4(){
    setTimeout(()=>{    
        console.log("data4成功")    ;    
        fn({name:4})
    },2000)
}    

data1();
data2();
data3();
data4();

Promise.resolve() 不管傳遞什麼值進去，都會包裝成一個promise實例

//promise.resolve()

//傳遞一個普通值
let p1=new Promise(resolve=>{
    console.log("p1決議成功");
})

let p2=Promise.resolve("p2成功");//傳遞一個普通的值，直接決議為成功

//傳遞一個promise實例
let p11=new Promise(resolve=>{
    console.log("p11決議成功");
})

let p22=Promise.resolve(p11);//傳遞一個promise實例，使得p11和p22相等
p11.then(data=>void console.log(data));
console.log(p11===p22);


//定義一個thenable對象obj
let obj={
    then(cb){
        console.log("成功")
        cb("成功啦")
    },
    oth(){
        console.log("失敗")
    }
}
//Promise.resolve(obj) 傳遞一個thenable對象
Promise.resolve(obj).then(data=>{
    console.log(data)
})

Promise.reject()

不管傳遞什麼值，拿到的都是傳入的值，不會進行操作和處理

//promise.reject()

//傳遞一個thenable對象obj
Promise.reject({then(){console.log("err")}})
.then(function(){
    console.log("我不會被執行");
},e=>{
    console.log(e)
})

resolve是非同步任務，會在所有同步任務完成後執行

console.log(1);

let p=new Promise(resolve=>{
    console.log(2);
    resolve();//調用resolve相等於調用.then，是非同步執行，在所有同步完成後執行
    console.log(3);
})

console.log(4);

p.then(()=>{
    console.log(5);
})

console.log(6);

把同步任務轉為非同步任務

function fn(cb){
    //返回一個決議成功的實例，並非同步執行
    return Promise.resolve(cb).then(cb=>cb());
}

fn(()=>{
    console.log("我從同步變成了非同步");
    return 1+1;
}).then(res=>{
    console.log(res);//拿到return的值
})

console.log("我是同步");

小案例

頁面中有多個板塊，需要所有圖片載入完成後再顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6 promise</title>
</head>
<style>
    img{height:100px;}
</style>
<body>
<script>



const loadImg=(src)=>{
    return new Promise((resolve,reject)=>{
        let img=new Image();
        img.src=src;
        //圖片載入成功
        img.onload=()=>{
            resolve(img)
        }
        //圖片載入失敗
        img.onerror=(e)=>{
            reject(e)
        }
        //註意這種寫法是錯誤的，因為賦值時直接被調用，還沒有等待圖片載入已經執行完畢了
        // img.onload=resolve(img)
        // img.onerror=reject(e)
    })
}

const imgs=["1.jpg","2.jpg","3.jpg"];
// map通過遍歷把src作為參數傳入，迴圈調用loadImg，獲取到返回的image對象
Promise.all(imgs.map(src=>loadImg(src)))
.then(res=>{
    console.log(res);
    //遍歷插入DOM
    res.forEach(item=>{
        document.body.appendChild(item)
    })
})

</script>
</body>
</html>

失敗的情況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6 promise</title>
</head>
<style>
    img{height:100px;}
</style>
<body>
<script>



const loadImg=(src)=>{
    return new Promise((resolve,reject)=>{
        let img=new Image();
        img.src=src;
        //圖片載入成功
        img.onload=()=>{
            resolve(img)
        }
        //圖片載入失敗
        img.onerror=(e)=>{
            reject(e)
        }
        //註意這種寫法是錯誤的，因為賦值時直接被調用，還沒有等待圖片載入已經執行完畢了
        // img.onload=resolve(img)
        // img.onerror=reject(e)
    })
}

const imgs=["1.jpg","22.jpg","3.jpg"