Promise獲取數據的幾種方式

一、Promise.all

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

• 獲取互相不關聯的ajax返回數據；
• 使用promise.all()執行多個相互不關聯的ajax請求，因爲是異步調用，因此需要統一的獲取這些ajax請求是否都是成功的；
• 使用promise.all()函數時，將獲取的promise.resolve返回的數據存儲；

1. 互相不關聯的ajax請求：

ajax 異步調用 ，使用promise.all()確保兩個數值全部獲取到後再執行下面的操作。

//第一個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);
        }
    })
}

注意：這裏兩個ajax數據請求互不干擾。

2. 統一獲取多個異步請求返回的數據：

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

p1,p2獲取的是promise.resolve傳入的結果，all函數的參數數組傳遞resolve的數據，最後當promise.all函數成功後then函數中的參數就是我們想要的數據數組。

二、Promise.then

獲取有先後關係的ajax數據結果
promise.then()後再調用promise.then()…
每一個promise對象都會返回自身。