前端基礎進階之Promise

前言

Promise的重要性我認爲我沒有必要多講，歸納起來講就是必須得掌握，並且還要掌握透徹。這篇文章的開頭，主要跟你們分析一下，爲何會有Promise出現。

在實際的使用當中，有很是多的應用場景咱們不能當即知道應該如何繼續往下執行。最重要也是最主要的一個場景就是ajax請求。通俗來講，因爲網速的不一樣，可能你獲得返回值的時間也是不一樣的，這個時候咱們就須要等待，結果出來了以後才知道怎麼樣繼續下去。

// 簡單的ajax原生實現
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;

var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);
    }
}

在ajax的原生實現中，利用了onreadystatechange事件，當該事件觸發而且符合必定條件時，才能拿到咱們想要的數據，以後咱們才能開始處理數據。

這樣作看上去並無什麼麻煩，可是若是這個時候，咱們還須要作另一個ajax請求，這個新的ajax請求的其中一個參數，得從上一個ajax請求中獲取，這個時候咱們就不得不以下這樣作：

var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;

var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);

        // 僞代碼
        var url2 = 'http:xxx.yyy.com/zzz?ddd=' + result.someParams;
        var XHR2 = new XMLHttpRequest();
        XHR2.open('GET', url, true);
        XHR2.send();
        XHR2.onreadystatechange = function() {
            ...
        }
    }
}

當出現第三個ajax(甚至更多)仍然依賴上一個請求的時候，咱們的代碼就變成了一場災難。這場災難，每每也被稱爲回調地獄。

所以咱們須要一個叫作Promise的東西，來解決這個問題。

固然，除了回調地獄以外，還有一個很是重要的需求：爲了咱們的代碼更加具備可讀性和可維護性，咱們須要將數據請求與數據處理明確的區分開來。上面的寫法，是徹底沒有區分開，當數據變得複雜時，也許咱們本身都沒法輕鬆維護本身的代碼了。這也是模塊化過程當中，必需要掌握的一個重要技能，請必定重視。

從前面幾篇文中的知識咱們能夠知道，當咱們想要確保某代碼在誰誰以後執行時，咱們能夠利用函數調用棧，將咱們想要執行的代碼放入回調函數中。

// 一個簡單的封裝
function want() {
    console.log('這是你想要執行的代碼');
}

function fn(want) {
    console.log('這裏表示執行了一大堆各類代碼');

    // 其餘代碼執行完畢，最後執行回調函數
    want && want();
}

fn(want);

利用回調函數封裝，是咱們在初學JavaScript時經常會使用的技能。

確保咱們想要的代碼壓後執行，除了利用函數調用棧的執行順序以外，咱們還能夠利用上一篇文章所述的隊列機制。

function want() {
    console.log('這是你想要執行的代碼');
}

function fn(want) {
    // 將想要執行的代碼放入隊列中，根據事件循環的機制，咱們就不用非得將它放到最後面了，由你自由選擇
    want && setTimeout(want, 0);
    console.log('這裏表示執行了一大堆各類代碼');
}

fn(want);

若是瀏覽器已經支持了原生的Promise對象，那麼咱們就知道，瀏覽器的js引擎裏已經有了Promise隊列，這樣就能夠利用Promise將任務放在它的隊列中去。

function want() {
    console.log('這是你想要執行的代碼');
}

function fn(want) {
    console.log('這裏表示執行了一大堆各類代碼');

    // 返回Promise對象
    return new Promise(function(resolve, reject) {
        if (typeof want == 'function') {
            resolve(want);
        } else {
            reject('TypeError: '+ want +'不是一個函數')
        }
    })
}

fn(want).then(function(want) {
    want();
})

fn('1234').catch(function(err) {
    console.log(err);
})

看上去變得更加複雜了。但是代碼變得更加健壯，處理了錯誤輸入的狀況。

爲了更好的往下擴展Promise的應用，這裏須要先跟你們介紹一下Promsie的基礎知識。

1、 Promise對象有三種狀態，他們分別是：

• pending: 等待中，或者進行中，表示尚未獲得結果
• resolved(Fulfilled): 已經完成，表示獲得了咱們想要的結果，能夠繼續往下執行
• rejected: 也表示獲得結果，可是因爲結果並不是咱們所願，所以拒絕執行

這三種狀態不受外界影響，並且狀態只能從pending改變爲resolved或者rejected，而且不可逆。在Promise對象的構造函數中，將一個函數做爲第一個參數。而這個函數，就是用來處理Promise的狀態變化。

new Promise(function(resolve, reject) {
    if(true) { resolve() };
    if(false) { reject() };
})

上面的resolve和reject都爲一個函數，他們的做用分別是將狀態修改成resolved和rejected。

2、 Promise對象中的then方法，能夠接收構造函數中處理的狀態變化，並分別對應執行。then方法有2個參數，第一個函數接收resolved狀態的執行，第二個參數接收reject狀態的執行。

function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    }).then(function() {
        console.log('參數是一個number值');
    }, function() {
        console.log('參數不是一個number值');
    })
}

fn('hahha');
fn(1234);

then方法的執行結果也會返回一個Promise對象。所以咱們能夠進行then的鏈式執行，這也是解決回調地獄的主要方式。

function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    })
    .then(function() {
        console.log('參數是一個number值');
    })
    .then(null, function() {
        console.log('參數不是一個number值');
    })
}

fn('hahha');
fn(1234);

then(null, function() {}) 就等同於catch(function() {})

3、Promise中的數據傳遞

你們自行從下面的例子中領悟吧。

var fn = function(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve(num);
        } else {
            reject('TypeError');
        }
    })
}

fn(2).then(function(num) {
    console.log('first: ' + num);
    return num + 1;
})
.then(function(num) {
    console.log('second: ' + num);
    return num + 1;
})
.then(function(num) {
    console.log('third: ' + num);
    return num + 1;
});

// 輸出結果
first: 2
second: 3
third: 4

OK，瞭解了這些基礎知識以後，咱們再回過頭，利用Promise的知識，對最開始的ajax的例子進行一個簡單的封裝。看看會是什麼樣子。

var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';

// 封裝一個get請求的方法
function getJSON(url) {
    return new Promise(function(resolve, reject) {
        var XHR = new XMLHttpRequest();
        XHR.open('GET', url, true);
        XHR.send();

        XHR.onreadystatechange = function() {
            if (XHR.readyState == 4) {
                if (XHR.status == 200) {
                    try {
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error(XHR.statusText));
                }
            }
        }
    })
}

getJSON(url).then(resp => console.log(resp));

爲了健壯性，處理了不少可能出現的異常，總之，就是正確的返回結果，就resolve一下，錯誤的返回結果，就reject一下。而且利用上面的參數傳遞的方式，將正確結果或者錯誤信息經過他們的參數傳遞出來。

 

如今全部的庫幾乎都將ajax請求利用Promise進行了封裝，所以咱們在使用jQuery等庫中的ajax請求時，均可以利用Promise來讓咱們的代碼更加優雅和簡單。這也是Promise最經常使用的一個場景，所以咱們必定要很是很是熟悉它，這樣才能在應用的時候更加靈活。

4、Promise.all

當有一個ajax請求，它的參數須要另外2個甚至更多請求都有返回結果以後才能肯定，那麼這個時候，就須要用到Promise.all來幫助咱們應對這個場景。

Promise.all接收一個Promise對象組成的數組做爲參數，當這個數組全部的Promise對象狀態都變成resolved或者rejected的時候，它纔會去調用then方法。

var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var url1 = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-03-26/2017-06-10';

function renderAll() {
    return Promise.all([getJSON(url), getJSON(url1)]);
}

renderAll().then(function(value) {
    // 建議你們在瀏覽器中看看這裏的value值
    console.log(value);
})

 

5、Promise.race

與Promise.all類似的是，Promise.race都是以一個Promise對象組成的數組做爲參數，不一樣的是，只要當數組中的其中一個Promsie狀態變成resolved或者rejected時，就能夠調用.then方法了。而傳遞給then方法的值也會有所不一樣，你們能夠再瀏覽器中運行下面的例子與上面的例子進行對比。

function renderRace() {
    return Promise.race([getJSON(url), getJSON(url1)]);
}

renderRace().then(function(value) {
    console.log(value);
})

嗯，我所知道的，關於Promise的基礎知識就這些了，若是還有別的，歡迎你們補充。