ES6: 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('這裏表示執行了一大堆各種代碼');
    return new Promise(function(resolve,reject){
        if(typeod want == 'function'){
            resolve(want);
        }else{
            reject('TypeErro'+want+'不是一個函數');
        }
    });
}
fn(want).then(function(want){
    want();
})
fn('1234').then(function(err){
    console.log(err);
})

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

爲了更好的往下擴展Promise的應用，這裏需要先跟大家介紹一下Promise的基礎知識。
一、Promise對象的三種狀態，他們分別是：

pending：等到中，或者進行中，表示還沒有得到結果
resolved（Fulfilled）：已經完成，表示得到了我們想要的結果，可以繼續往下執行
rejected：也表示得到結果，但是結果並非我們所願，所以拒絕執行

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

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

上面的resolve和rejecte都爲一個函數，他們的作用分別試講狀態改爲resolved和rejected。

二、Promise對象的then方法，可以接受了構造函數中處理的狀態變化，並分別執行，then方法有兩個參數，第一個參數接受resolved狀態的執行，第二個參數接受rejecte狀態的執行。

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('hahaha');       //參數不是一個number值
fn(1234);           //參數是一個number值

then方法的執行結果也會返回一個Promise對象，因此我們可以進行痛恨的鏈式執行，這也是解決回調地獄的主要方式。

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('hahaha');       //參數不是一個number值
fn(1234);           //參數是一個number值

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

三、Promise中的數據傳遞
大家從下面的例子中領悟吧

var fn = function(num) {
return new Promise(function(resolve,reject){
        if (typeof num == 'number') {
            resolve(num);
        }else {
            reject(num);
        }
    })
}
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

note:這裏then執行結果返回的值作爲下一個then的參數輸入
瞭解了這些基礎知識，再回過頭，利用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(err){
                                reject(err);
                            }
                        }else {
                            reject(new Error(XHR.responseText));
                        }
                    }
                }

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

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

現在所有的庫幾乎都將ajax請求利用promise進行了封裝，因此我們在使用jquery等庫中的ajax請求時，都可以利用Promise來讓我們的代碼更加優雅和簡單。這也是Promise最常用的一個場景，因此我們一定要非常非常熟悉它，這樣才能在應用的時候更加靈活。

四、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){
    console.log(value);
})

五、Promise.race

與Promise.all相似的是，Promise.race都是以一個Promise對象組成的數組作爲參數，不同的是，只要當數組中的其中一個Promise狀態變成resolved或者rejected時，就可以調用.then方法了。二傳遞給then方法的值也會有所不同，大家可以在瀏覽器中運行下面的例子和上面的例子進行對比。

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

微任務與宏任務

JavaScript中參數之“共享傳遞”、“按值傳遞”、“按引用傳遞”

JavaScript：變量提升和函數提升

模擬實現call、apply以及bind

vue生命週期來一波

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結