JavaScript進階之路——認識和使用Promise，重構你的Js代碼

時間 2019-11-08

標籤 javascript 進階之路認識使用 promise 代碼欄目 JavaScript 简体版

原文原文鏈接

　　一轉眼，這2015年上半年就過去了，差很少一個月沒有寫博客了，"罪過罪過"啊~~。進入了七月份，也就意味着咱們上半年苦逼的單身生活結束了，今後刻起，咱們要打起十二分的精神，開始下半年的單身生活。你們一塊兒加油~~html

　　一直以來，JavaScript處理異步都是以callback的方式，在前端開發領域callback機制幾乎深刻人心。在設計API的時候，不論是瀏覽器廠商仍是SDK開發商亦或是各類類庫的做者，基本上都已經遵循着callback的套路。近幾年隨着JavaScript開發模式的逐漸成熟，CommonJS規範順勢而生，其中就包括提出了Promise規範，Promise徹底改變了js異步編程的寫法，讓異步編程變得十分的易於理解。今天咱們就來了解一下Promise~~前端

一、初識Promise

一、什麼是promise？html5

　　Promise可能你們都不陌生，由於Promise規範已經出來好一段時間了，同時Promise也已經歸入了ES6，並且高版本的chrome、firefox瀏覽器都已經原生實現了Promise，只不過和現現在流行的類Promise類庫相比少些API。git

　　所謂Promise，字面上能夠理解爲「承諾」，就是說A調用B，B返回一個「承諾」給A，而後A就能夠在寫計劃的時候這麼寫：當B返回結果給個人時候，A執行方案S1，反之若是B由於什麼緣由沒有給到A想要的結果，那麼A執行應急方案S2，這樣一來，全部的潛在風險都在A的可控範圍以內了。es6

Promise規範以下：github

一個promise可能有三種狀態：等待（pending）、已完成（fulfilled）、已拒絕（rejected）
一個promise的狀態只可能從「等待」轉到「完成」態或者「拒絕」態，不能逆向轉換，同時「完成」態和「拒絕」態不能相互轉換
promise必須實現then方法（能夠說，then就是promise的核心），並且then必須返回一個promise，同一個promise的then能夠調用屢次，而且回調的執行順序跟它們被定義時的順序一致
then方法接受兩個參數，第一個參數是成功時的回調，在promise由「等待」態轉換到「完成」態時調用，另外一個是失敗時的回調，在promise由「等待」態轉換到「拒絕」態時調用。同時，then能夠接受另外一個promise傳入，也接受一個「類then」的對象或方法，即thenable對象。

2.promise原理分析ajax

　　能夠看到promise的規範並非不少，下面咱們一邊分析promise一邊本身寫一個promise的實現。Promise實現的大體思路以下：chrome

　　構造函數Promise接受一個函數resolver，能夠理解爲傳入一個異步任務，resolver接受兩個參數，一個是成功時的回調，一個是失敗時的回調，這兩參數和經過then傳入的參數是對等的。編程

其次是then的實現，因爲Promise要求then必須返回一個promise，因此在then調用的時候會新生成一個promise，掛在當前promise的_next上，同一個promise屢次調用都只會返回以前生成的_next。json

因爲then方法接受的兩個參數都是可選的，並且類型也沒限制，能夠是函數，也能夠是一個具體的值，還能夠是另外一個promise。下面是then的具體實現：

Promise.prototype.then = function(resolve, reject) {  
    var next = this._next || (this._next = Promise());  
    var status = this.status;  
    var x;  
  
    if('pending' === status) {  
        isFn(resolve) && this._resolves.push(resolve);  
        isFn(reject) && this._rejects.push(reject);  
        return next;  
    }  
  
    if('resolved' === status) {  
        if(!isFn(resolve)) {  
            next.resolve(resolve);  
        } else {  
            try {  
                x = resolve(this.value);  
                resolveX(next, x);  
            } catch(e) {  
                this.reject(e);  
            }  
        }  
        return next;  
    }  
  
    if('rejected' === status) {  
        if(!isFn(reject)) {  
            next.reject(reject);  
        } else {  
            try {  
                x = reject(this.reason);  
                resolveX(next, x);  
            } catch(e) {  
                this.reject(e);  
            }  
        }  
        return next;  
    }  
};

這裏，then作了簡化，其餘promise類庫的實現比這個要複雜得多，同時功能也更多，好比還有第三個參數——notify，表示promise當前的進度，這在設計文件上傳等時頗有用。對then的各類參數的處理是最複雜的部分，有興趣的同窗能夠參看其餘類Promise庫的實現。

在then的基礎上，應該還須要至少兩個方法，分別是完成promise的狀態從pending到resolved或rejected的轉換，同時執行相應的回調隊列，即resolve()和reject()方法。

到此，一個簡單的promise就設計完成了，下面簡單實現下兩個promise化的函數：

function sleep(ms) {  
    return function(v) {  
        var p = Promise();  
  
        setTimeout(function() {  
            p.resolve(v);  
        });  
  
        return p;  
    };  
};  
  
function getImg(url) {  
    var p = Promise();  
    var img = new Image();  
  
    img.onload = function() {  
        p.resolve(this);  
    };  
  
    img.onerror = function(err) {  
        p.reject(err);  
    };  
  
    img.url = url;  
  
    return p;  
};

因爲Promise構造函數接受一個異步任務做爲參數，因此getImg還能夠這樣調用：

function getImg(url) {  
    return Promise(function(resolve, reject) {  
        var img = new Image();  
  
        img.onload = function() {  
            resolve(this);  
        };  
  
        img.onerror = function(err) {  
            reject(err);  
        };  
  
        img.url = url;  
    });  
};

接下來（見證奇蹟的時刻），假設有一個BT的需求要這麼實現：異步獲取一個json配置，解析json數據拿到裏邊的圖片，而後按順序隊列加載圖片，每張圖片加載時給個loading效果，

function addImg(img) {  
    $('#list').find('> li:last-child').html('').append(img);  
};  
  
function prepend() {  
    $('<li>')  
        .html('loading...')  
        .appendTo($('#list'));  
};  
  
function run() {  
    $('#done').hide();  
    getData('map.json')  
        .then(function(data) {  
            $('h4').html(data.name);  
  
            return data.list.reduce(function(promise, item) {  
                return promise  
                    .then(prepend)  
                    .then(sleep(1000))  
                    .then(function() {  
                        return getImg(item.url);  
                    })  
                    .then(addImg);  
            }, Promise.resolve());  
        })  
        .then(sleep(300))  
        .then(function() {  
            $('#done').show();  
        });  
};  
  
$('#run').on('click', run)

這裏的sleep只是爲了看效果加的，可猛擊查看demo！

在這裏，Promise.resolve(v)靜態方法只是簡單返回一個以v爲確定結果的promise，v可不傳入，也能夠是一個函數或者是一個包含then方法的對象或函數（即thenable）。

相似的靜態方法還有Promise.cast(promise)，生成一個以promise爲確定結果的promise；Promise.reject(reason)，生成一個以reason爲否認結果的promise。

咱們實際的使用場景可能很複雜，每每須要多個異步的任務穿插執行，並行或者串行同在。這時候，能夠對Promise進行各類擴展，好比實現Promise.all()，接受promises隊列並等待他們完成再繼續，再好比Promise.any()，promises隊列中有任何一個處於完成態時即觸發下一步操做。

3.標準的Promise

　　可參考html5rocks的這篇文章JavaScript Promises，目前高級瀏覽器如Chrome、Firefox都已經內置了Promise對象，提供更多的操做接口，好比Promise.all()，支持傳入一個promises數組，當全部promises都完成時執行then，還有就是更加友好強大的異常捕獲，應對平常的異步編程，應該足夠了。

　　現今流行的各大js庫，幾乎都不一樣程度的實現了Promise，如dojo，jQuery、Zepto、when.js、Q等，只是暴露出來的大都是Deferred對象,固然還有angularJs中的$q.這裏以jQuery爲例，說一下：

// animate  
$('.box')  
    .animate({'opacity': 0}, 1000)  
    .promise()  
    .then(function() {  
        console.log('done');  
    });  
  
// ajax  
$.ajax(options).then(success, fail);  
$.ajax(options).done(success).fail(fail);  
  
// ajax queue  
$.when($.ajax(options1), $.ajax(options2))  
    .then(function() {  
        console.log('all done.');  
    }, function() {  
        console.error('There something wrong.');  
    });

二、用Promise組織你的JavaScript代碼

　　上面咱們瞭解了Promise，相信你們對Promise有了必定的認識。下面咱們開始動手來寫代碼，經過幾個簡單的例子，來加深理解。這裏咱們使用瀏覽器自帶的Promise，首先咱們要先檢測一些瀏覽器是否支持Promise，其實很簡單，若是是谷歌瀏覽器，按下F12,打開控制檯，如圖：

這裏咱們能夠看到Promise的type是function，也就是說谷歌瀏覽器是支持promise的。以此爲原理，咱們能夠寫一段JavaScript代碼來檢測，代碼以下：

if(typeof(Promise) === "function"){
    alert("支持Promise");
}
else{
    alert("不支持Promise");
}

通過檢測，發現IE11居然不支持promise.建議你們用谷歌瀏覽器來進行測試吧。

咱們首先來寫一個等待的方法，以下：

function wait(duration){
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}

測試這個方法的代碼以下：wait(5000).then(function(){alert('hello')})，這段代碼很簡單，就是等待5秒之後執行一個回調，彈出一個消息。固然，你還能夠這樣寫：

wait(5000).then(function(){alert('hello')}).then(function(){console.log('world')})

怎麼樣？很簡單吧~~

下面來看一些我從網上收集的一些經常使用的JavaScript的promise的寫法：

function get(uri){
    return http(uri, 'GET', null);
}

function post(uri,data){
    if(typeof data === 'object' && !(data instanceof String || (FormData && data instanceof FormData))) {
        var params = [];
        for(var p in data) {
            if(data[p] instanceof Array) {
                for(var i = 0; i < data[p].length; i++) {
                    params.push(encodeURIComponent(p) + '[]=' + encodeURIComponent(data[p][i]));
                }
            } else {
                params.push(encodeURIComponent(p) + '=' + encodeURIComponent(data[p]));
            }
        }
        data = params.join('&');
    }


    return http(uri, 'POST', data || null, {
        "Content-type":"application/x-www-form-urlencoded"
    });
}

function http(uri,method,data,headers){
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method,uri,true);
        if(headers) {
            for(var p in headers) {
                xhr.setRequestHeader(p, headers[p]);
            }
        }
        xhr.addEventListener('readystatechange',function(e){
            if(xhr.readyState === 4) {
                if(String(xhr.status).match(/^2\d\d$/)) {
                    resolve(xhr.responseText);
                } else {
                    reject(xhr);
                }
            }
        });
        xhr.send(data);
    })
}

function wait(duration){
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}

function waitFor(element,event,useCapture){
    return new Promise(function(resolve, reject) {
        element.addEventListener(event,function listener(event){
            resolve(event)
            this.removeEventListener(event, listener, useCapture);
        },useCapture)
    })
}

function loadImage(src) {
    return new Promise(function(resolve, reject) {
        var image = new Image;
        image.addEventListener('load',function listener() {
            resolve(image);
            this.removeEventListener('load', listener, useCapture);
        });
        image.src = src;
        image.addEventListener('error',reject);
    })
}

function runScript(src) {
    return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.src = src;
        script.addEventListener('load',resolve);
        script.addEventListener('error',reject);
        (document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script);
    })
}

function domReady() {
    return new Promise(function(resolve, reject) {
        if(document.readyState === 'complete') {
            resolve();
        } else {
            document.addEventListener('DOMContentLoaded',resolve);
        }
    })
}

看到了吧，Promise風格API跟回調風格的API不一樣，它的參數跟同步的API是一致的，可是它的返回值是個Promise對象，要想獲得真正的結果，須要在then的回調裏面拿到。

3、用Promise組織JavaScript異步代碼

　　在比較複雜的頁面中，咱們會使用到大量的異步操做。咱們來看看使用Promise會帶來怎樣的便利吧~~

一、多個異步調用，同步/並行

　　例如咱們頁面調用了好幾個異步函數，咱們要等待全部的異步函數執行完成後，作一些操做，如彈出一個消息框提示用戶操做成功。下面咱們拿一個例子來講明一下：

Promise.all跟then的配合，能夠視爲調用部分參數爲Promise提供的函數。譬如，咱們如今有一個接受三個參數的函數：

function print(a, b, c) {
    console.log(a + b + c);
}

如今咱們調用print函數，其中a和b是須要異步獲取的：

var c = 10;

print(geta(), getb(), 10); //這是同步的寫法

Promise.all([geta(), getb(), 10]).then(print); //這是 primise 的異步寫法

若是用callback的話，咱們就只能一個一個調用了，調用完了geta,而後在其回調函數裏面調用getb，最後在getb的回調函數中調用print方法。串行和並行哪一個更快，你們很清楚吧~~

2.競爭

　　若是說Primise.all是promise對象之間的「與」關係，那麼Promise.race就是promise對象之間的「或」關係。好比，我要實現「點擊按鈕或者5秒鐘以後執行」：

var btn = document.getElementsByTagName('button');

Promise.race(wait(5000), waitFor(btn, click)).then(function(){
    console.log('run!')
})

3.異常處理

　　異常處理一直是回調的難題，而promise提供了很是方便的catch方法：在一次promise調用中，任何的環節發生reject，均可以在最終的catch中捕獲到：

Promise.resolve().then(function(){
    return loadImage(img1);
}).then(function(){
    return loadImage(img2);
}).then(function(){
    return loadImage(img3);
}).catch(function(err){
    //錯誤處理
})

4.複雜流程

接下來，咱們來看比較複雜的狀況。

promise有一種很是重要的特性：then的參數，理論上應該是一個promise函數，而若是你傳遞的是普通函數，那麼默認會把它當作已經resolve了的promise函數。

這樣的特性讓咱們很是容易把promise風格的函數跟已有代碼結合起來。

爲了方便傳參數，咱們編寫一個currying函數，這是函數式編程裏面的基本特性，在這裏跟promise很是搭，因此就實現一下：

function currying(){
    var f = arguments[0];
    var args = Array.prototype.slice.call(arguments,1);
    return function(){
        args.push.apply(args,arguments);
        return f.apply(this,args);
    }
}

currying會給某個函數"固化"幾個參數，而且返回接受剩餘參數的函數。好比以前的函數，能夠這麼玩：

var print2 = currying(print,11);

print2(2, 3); //獲得 11 + 2 + 3 的結果，16

var wait1s = currying(wait,1000);

wait1s().then(function(){
    console.log('after 1s!');
})

有了currying，咱們就能夠愉快地來玩鏈式調用了，好比如下代碼：

Promise.race([
    domReady().then(currying(wait,5000)), 
    waitFor(btn, click)])
    .then(currying(runScript,'a.js'))
    .then(function(){
        console.log('loaded');
        return Promise.resolve();
    });

四、總結

　　咱們看到，無論Promise實現怎麼複雜，可是它的用法卻很簡單，組織的代碼很清晰，今後不用再受callback的折磨了。promise做爲一個新的API，它的API自己沒有什麼特別的功能，可是它背後表明的編程思路是頗有價值的。

最後，Promise是如此的優雅！但Promise也只是解決了回調的深層嵌套的問題，真正簡化JavaScript異步編程的仍是Generator，在Node.js端，建議考慮Generator。

五、參考資料

JavaScript Promise迷你書（中文版） http://liubin.github.io/promises-book/

JavaScript Promise啓示錄 http://www.csdn.net/article/2014-05-28/2819979-JavaScript-Promise

用Promise組織程序 http://www.w3ctech.com/topic/721

做者：雲霏霏

QQ交流羣：243633526

博客地址：http://www.cnblogs.com/yunfeifei/

聲明：本博客原創文字只表明本人工做中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關係。非商業，未受權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。

若是你們感受個人博文對你們有幫助，請推薦支持一把，給我寫做的動力。