淺談 ES6 Promise

首先我們要創建 Promise 對象

function runAsync() {
        var p = new Promise(function(resolve, reject) {
            //做一些異步操作
            setTimeout(function() {
                console.log('執行完成');
                resolve('隨便什麼數據1');
                reject('隨便什麼數據2')
            }, 2000);
        });
        return p;
    }

   resolve爲成功的 回調  reject爲失敗的回調

下面舉個 最簡單的例子

    function getNumber() {
        var p = new Promise(function(resolve, reject) {
            //做一些異步操作
            setTimeout(function() {
                var num = Math.ceil(Math.random() * 10); //生成1-10的隨機數
                if (num <= 5) {
                    resolve(num);
                } else {
                    reject('數字太大了');
                }
            }, 2000);
        });
        return p;
    }

    getNumber()
        .then(function(data) {
            console.log('resolve');
            console.log(data);
            console.log(somedata); //此處的somedata未定義
        })
        .catch(function(reason) {
            console.log('reject');
            console.log(reason);
        });

.then 其實就是第一個回調函數

.catch 其實可以當作第二個回調函數    但是這個catch 還有一個功能就是拋出錯誤        

實際應用中  then充當正常回調   catch充當 異常處理就好了

 

下面進入 重點  解決無限回調

getNumber()
        .then(function(data) {
            console.log(data);
            return 1;
        })
        .then(function(data) {
            console.log(data);
            return 2;
        })
        .then(function(data) {
            console.log(data);
        });

.then 這裏可以把 返回值傳入下一個 .then   

當然 如果返回值是異步的話 必須用Promise對象 當作返回值   在Promise對象裏面進行參數處理

all的用法

 // all 的用法 

    function runAsync1() {
        var p = new Promise(function(resolve, reject) {
            //做一些異步操作
            setTimeout(function() {
                console.log('異步任務1執行完成');
                resolve('隨便什麼數據1');
            }, 1000);
        });
        return p;
    }

    function runAsync2() {
        var p = new Promise(function(resolve, reject) {
            //做一些異步操作
            setTimeout(function() {
                console.log('異步任務2執行完成');
                resolve('隨便什麼數據2');
            }, 2000);
        });
        return p;
    }

    function runAsync3() {
        var p = new Promise(function(resolve, reject) {
            //做一些異步操作
            setTimeout(function() {
                console.log('異步任務3執行完成');
                resolve('隨便什麼數據3');
            }, 2000);
        });
        return p;
    }

    Promise
        .all([runAsync1(), runAsync2(), runAsync3()])
        .then(function(results) {
            console.log(results);
        });

這裏的返回結果將會 等到三個函數執行完成後  統一返回一個 數組

race的用法

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

返回執行快的一個