前端提高篇(132):es6異步promise與異步

創建

創建一個pending狀態的promise物件

new Promise()傳進的引數是一個函式，會立即執行，可以注入兩個引數，代表成功或失敗的回呼函式，setTimeout用來模擬請求的發送

// 創建一個pending狀態的promise物件
const p = new Promise((resolved, rejected)=>{
    setTimeout(function(){
        // resolved(1000); // 異步操作成功時呼叫
        rejected(new Error("出錯了")); // 異步操作失敗時呼叫
    },1000)
})
console.log( p );
p.then(function(value){
    console.log(value);
}, // 成功回呼
function(err){
    console.log(err); // 失敗回呼
}) 

創建一個已處理的promise物件（已成功）

// 創建一個已處理的promise物件
const p1 = Promise.resolve();
console.log( p1 );

創建一個已處理的promise物件（已失敗）

// 創建一個已處理的promise物件(已失敗)
const p2 = Promise.reject();
console.log( p2 )

使用

狀態

僅有pending轉resolved、pending轉rejected兩種可能

promise鏈式呼叫，解決回呼金字塔問題

如果下一次請求需要前一次的資料，就需要在前一次呼叫的回呼代碼里寫上這一次呼叫的代碼，類似這樣：

這樣一層層嵌套下去，代碼就顯得很復雜，不好維護
then()回傳的是一個promise物件，可以使用鏈式呼叫

規則：
then()的請求成功或失敗，看的是return的是否為promise物件：
如果回傳的是promise物件，則請求失敗，執行失敗的回呼函式；
如果回傳的不是promise物件，代表請求成功，執行成功的回呼函式

舉例：
回傳的不是promise物件，即請求均成功：

const p = new Promise((resolved, rejected)=>{
    setTimeout(function(){
        resolved(1000); // 異步操作成功時呼叫
    },1000)
})
// p.then回傳的promise物件已不是原來的p
p.then(function(value){ // 記作f1
    console.log(value); // 輸出1000
    return 111;
},
function(err){ // 記作f2
    console.log(err);
})
.then(function(value){ // 記作f3
    console.log(value); // 輸出111
},
function(22){  // 記作f4
    console.log(22);
})

異步操作p成功，執行f1，f1回傳的不是一個promise物件，代表請求又成功了，就會呼叫f3，總體輸出的是：1000 111
如果p失敗，執行f2，由于沒有return，默認代表是return undefined，則第一個p.then請求成功，執行f3；f2沒有return，f3沒有接收到value，所以輸出的是undefined

回傳的是promise物件：
p成功，且第一個p.then在1s之后成功：

const p = new Promise((resolved, rejected) => {
    setTimeout(function () {
        resolved(1000); // 異步操作成功時呼叫
    }, 1000)
})
p.then(function (value) { // p成功后呼叫此處
    console.log(value); // 輸出1000
    return new Promise((resolved, rejected)=>{
        setTimeout(function () {
            resolved(11);
        }, 1000)})
    }, // p.then成功
    function (err) {
        console.log(err);
    })
    .then(function (value) { // 第一個p.then成功后呼叫此處
        console.log(value); // 輸出11
    },
    function () {
        console.log(22);
    })

p成功，但第一個p.then在1s之后失敗：

const p = new Promise((resolved, rejected) => {
    setTimeout(function () {
        resolved(1000); // 異步操作成功時呼叫
    }, 1000)
})
p.then(function (value) { // p成功后呼叫此處
    console.log(value); // 1000
    return new Promise((resolved, rejected)=>{
        setTimeout(function () {
            rejected(); // 此處rejected，代表整個p.then失敗
        }, 1000)})
    },
    function (err) {
        console.log(err);
    })
    .then(function (value) {
        console.log(value);
    },
    function () { //上一個p.then失敗，呼叫此處
        console.log(22); // 22
    })

用鏈式呼叫代替回呼金字塔

// 用鏈式呼叫解決回呼金字塔
// 10s后列印10，再20s后列印20，再30s后列印30，列印的數字和等待的時間均由前一次請求指定
function fakeAjax(time, val) {
    return new Promise((resolved, rejected) => {
        setTimeout(function () {
            resolved(val);
        }, time)
    })
}

fakeAjax(1000, 10).then((val) => {
    console.log(val);
    return fakeAjax(2000, 20);
},
    () => { }
)
    .then((val) => {
        console.log(val);
        return fakeAjax(3000, 30)
    },
    () => {})
    .then((val) => {
        console.log(val);
    })

回應多個promise物件

1.Promise.all ：所有請求都成功時成功，其中一個失敗，則整體失敗
2.Promise.race：看回應最快的那個請求，如果成功，就執行成功的回呼函式，失敗，則整個失敗，不再往后判斷執行

Promise.all VS 完全成功：

function fakeAjax(time, val) {
    return new Promise((resolved, rejected) => {
        setTimeout(function () {
            resolved(val);
        }, time)
    })
}
var p1 = fakeAjax(1000,10);
var p2 = fakeAjax(2000,20);
var p3 = fakeAjax(1500,30);
Promise.all([p1,p2,p3])
    .then(function(val){
        console.log(val); // 2s后輸出[10, 20, 30]
    },
    function(err){
        console.log(err);
    })

Promise.all VS 其中一個不成功：

function fakeAjax(time, val, flag) {
    return new Promise((resolved, rejected) => {
        setTimeout(function () {
            if (flag){
                resolved(val);
            }
            else {
                rejected(new Error("出錯"))
            }
            
        }, time)
    })
}
// flag為true時，成功
var p1 = fakeAjax(1000,10,true);
var p2 = fakeAjax(2000,20,true);
var p3 = fakeAjax(1500,30,false);
Promise.all([p1,p2,p3])
    .then(function(val){
        console.log(val);
    },
    function(err){
        console.log(err); //列印錯誤資訊
    })

Promise.race VS 最快的請求是成功的

var p1 = fakeAjax(1000,10,true);
var p2 = fakeAjax(2000,20,true);
var p3 = fakeAjax(1500,30,false);
Promise.race([p1,p2,p3])
    .then(function(val){
        console.log(val); // 列印10
    },
    function(err){
        console.log(err);
    })

Promise.race VS 最快的請求是失敗的：

var p1 = fakeAjax(1000,10,false);
var p2 = fakeAjax(2000,20,true);
var p3 = fakeAjax(1500,30,false);
Promise.race([p1,p2,p3])
    .then(function(val){
        console.log(val);
    },
    function(err){
        console.log(err); //列印錯誤資訊
    })

catch()也代表失敗回呼函式，相當于then(null, ()=>{})