ES6--使用Promise.all()獲取互相不關聯的ajax請求成功數據

我們平時在項目中可能會請求多個異步結果最後整合到一起的需求，也就是說在一個頁面中獲取一組數據，需要調用不同的接口最後將他們拼接到一起，在這個數組中可能初始獲取了一組數據，但是數據有不全的地方需要我們調用其他的接口，將缺失的部分再拼上。

 使用promise.all()執行多個相互不關聯的ajax請求，因爲是異步調用，我們需要統一的獲取這些ajax請求是否都是成功的。

首先，獲取數據的函數返回一個promise對象，promise構造函數定義一個匿名函數，這個匿名函數中傳兩個參數，一個是resolve：在ajax請求成功後，調用resolve函數將想要在promise.all()得到得數據作爲參數； 另一個是reject：ajax請求失敗是調用。

//第一個ajax函數

getAjax1(){
    return new Promise( (resolve,reject) => {
        this.$axios(url).then( (response) => {
            ....數據操作返回需要得到的data
            //ajax請求成功後調用resolve函數將data返回
            resolve(data);
        })
        .catch(error){
            //失敗調用reject函數
            reject(error);
        }
    })
}
//第二個ajax函數
getAjax2(){
    return new Promise( (resolve,reject) => {
        this.$axios(url).then( (response) => {
            ....數據操作返回需要得到的data
            //ajax請求成功後調用resolve函數將data返回
            resolve(data);
        })
        .catch(error){
            //失敗調用reject函數
            reject(error);
        }
    })
}

 其次，使用promise.all()函數時，將獲取的promise.resolve返回的數據存儲，p1,p2獲取的是promise.resolve傳入的結果，all函數的參數數組傳遞resolve的數據，最後當promise.all函數成功後then函數中的參數就是我們想要的數據數組。

 

//Promise.all()函數使用
testPromiseAll(){
    let p1 = this.getAjax1(),
        p2 = this.getAjax2();
    Promise.all([p1,p2]).then( (dataArray) => {
        console.log(dataArray);
    })
}