ES6 Promise --回呼與Promise的對比、信任問題、錯誤處理、Promise的狀態、以及Promise物件的常用方法-有解無憂

之前怎么用回呼解決異步的問題：

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 >哦</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 >哦</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=https://www.cnblogs.com/chenyingying0/p/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=https://www.cnblogs.com/chenyingying0/p/>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=https://www.cnblogs.com/chenyingying0/p/>{
    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"];
// map通過遍歷把src作為引數傳入，回圈呼叫loadImg，獲取到回傳的image物件
Promise.all(imgs.map(src=https://www.cnblogs.com/chenyingying0/p/>loadImg(src)))
.then(res=>{
    console.log(res);
    //遍歷插入DOM
    res.forEach(item=>{
        document.body.appendChild(item)
    })
})
.catch(e=>{
    console.log(e)
})

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/139483.html

標籤：JavaScript

上一篇：React常用hook的優化useEffect淺比較

下一篇：ES6 class -- Class 的基本語法