Promise、Promise.all 和Promise.race用法

前段時間的項目中由於大多數是異步請求，所以返回的數據順序不確定造成了很多數據錯誤。查了大量的資料總算完成，做個小結。

promise基礎：resolve,和reject

resolve方法：在異步方法執行成功後調用

reject方法：在異步方法執行失敗後調用

promise

創建一個promise對象，在對象中傳入需要執行的異步方法，在異步方法結束後，調用resolve或者reject

// 寫法1
const promise = new Promise(function(resolve, reject) {
        //執行異步操作...

        //異步操作執行完成後，根據業務邏輯判讀是成功還是失敗
        if (true) {
            // 成功拿到異步接口所需的數據後，可以通過resolve方法，把參數傳遞下去
            resolve('success');
        } else {
            // 如果執行異步接口返回爲失敗，則執行另外的方法
            reject('faild');
        }
    })
    // 如果調用resolve
promise.then(function(result) {
    console.log(result); // 輸出爲success  即resolve傳遞下來的參數
});
// 如果調用reject
promise.catch(function(result) {
    console.log(result); // 輸出爲faild
})


// 寫法2：
const promise2 = new Promise(function(resolve, reject) {
    //執行異步操作...

    //異步操作執行完成後，根據業務邏輯判讀是成功還是失敗
    if (true) {
        // 成功拿到異步接口所需的數據後，可以通過resolve方法，把參數傳遞下去
        resolve('success');
    } else {
        // 如果執行異步接口返回爲失敗，則執行另外的方法
        reject('faild');
    }
}).then(function(result) {
    console.log(result); // 輸出爲success  即resolve傳遞下來的參數
}).catch(function(result) {
    console.log(result); // 輸出爲faild
})

promise.all

已有上面的promise基礎後，可以繼續看promise.all的內容。promise.all主要用於一次性執行多個異步方法，並且按傳入順序執行，用法如下：

// 寫法1
function fun1(num = -1) {

    // 在fun1中返回一個promise對象
    return new Promise(function(resolve, reject) {
        // 爲了體現是異步接口，這裏使用一個定時器，延遲3秒
        setTimeout(resolve, 3000, 'fun1');
    })
};

function fun2(num2 = 200) {
    // 在fun2中也返回一個promise對象
    return new Promise(function(resolve, reject) {
        // 爲了和fun1區分開來，fun2延遲1秒
        setTimeout(resolve, 1000, 'fun2');
    })
}

// 由於fun1和fun2是方法，所以使用fun1()執行該方法
Promise.all([fun1(), fun2()]).then(function(result) {
    console.log(result) // 輸入應該爲 ['fun1','fun2']
})

與promise.all相同的，還有另外一種寫法，通過返回的promise對象中調用then方法。then方法中在返回一個新的promise對象，也能達到類似promise.all的效果，實例如下：

function multiply(value) {
    console.log('調用乘法，當前值爲：', value)
    return new Promise(function(resolve, reject) {
        resolve(value * value)
    });
}

function add(value) {
    console.log('調用加法，當前值爲：', value)
    return new Promise(function(resolve, reject) {
        resolve(value + value)
    });
}

var p = new Promise(function(resolve, reject) {
    resolve(123);
});

p.then(multiply)
    .then(add)
    .then(multiply)
    .then(add)
    .then(function(result) {
        console.log(result);  //1831093128
    });

這段代碼中，傳入了一個123.先是調用了乘法，然後調用加法，然後調用乘法....直到最終計算出最後的值。與promise.all的順序執行異步方法類似。

Promise.race

這個方法比較特別，在執行多個異步操作中，只保留取第一個執行完成的異步操作的結果，其他的方法仍在執行，不過執行結果會被拋棄。

var fun1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 3000, 'fun1');
});

var fun2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 200, 'fun2');
});

// *注：這裏使用的示例和promise.all用的示例類似，
// 可是沒有用()執行，因爲fun1就是一個promise對象，不需要執行
Promise.race([fun1, fun2]).then(function(result) {
    console.log(result); // 'fun2'   因爲fun2比較早執行結束
});

以上就是proomise、promise.all和Promise.race的基本用法。結合着不同的用法，可以更好的把握異步執行的順序。