【個人筆記重點，不作爲參考】主題：承諾與異步編程

阮一峯（JQuery的deferred詳解）：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

本文轉載自：http://www.tuicool.com/articles/zmmYNzE

接觸過promise的的都知道它的應用場景和用途，Promise可以用來避免異步操作函數裏的嵌套回調（callback hell）問題，因爲解決異步最直接的方法是回調嵌套，將後一個的操作放在前一個操作的異步回調裏，但如果操作多了，就會有很多層的嵌套。

Promise的實現方式比較多，有豐富的第三方庫，ES6也已經原生支持了Promise，jquery中也有$.Deferred()等可以解決異步嵌套問題。

先給下Promise學術點的描述：

promise代表一個異步操作的執行返回狀態，這個執行返回狀態在promise對象創建時未必已知。它允許你爲異步操作的成功或失敗指定處理方法。這使得異步方法可以像同步方法那樣返回值：異步方法會返回一個包含了原返回狀態的 promise 對象來替代原返回狀態。

一、Promise的適用場景

Promise並非適用於所有的異步場景，例如事件的綁定，某個程度上Promise有點類似事件的監聽回調，當觸發某個操作時進行後面特定的邏輯。但Promise只能執行一次，且需要前面特定的操作執行完成纔會進行下一步，一般分成功和失敗兩種場景，成功或失敗後會立即執行響應函數。這就很適合判斷一個比較耗時的操作是否最終執行成功的場景，就如我們通常理解的ajax網絡請求、讀取localstorage等操作。

二、Promise的表現

如果使用回調方法處理多個操作的異步場景，判斷某個操作成功或失敗的控制在於聲明的匿名函數裏面，使用Promise對象則可以重新定義異步執行的狀態和控制邏輯。

promises的最重要的特點就是它把我們處理任何函數調用的成功或者失敗的方式規範成了可預測的形式，特別是如果這個調用實際上的異步的。

Promise中有幾個狀態：

pending: 初始狀態。非 fulfilled 或 rejected。
resolved: 成功的操作。也有的成爲fulfilled 。
rejected: 失敗的操作。

不同的Promise差異基本表現如下：

構造Promise對象 new Promise().resolve() 或者 new Pomise(function(resolve, reject) {})
是否有 .done() .fail() .always() 等方法
是否有Promise.all()方法
是否有isRejected() isResolved()
.then() return 結果鏈式的

三、幾種規範的promise

2.1、Promise的Promise/A 規範和Promise/A+規範

先看下規範的地址： http://wiki.commonjs.org/wiki/Promises/A https://promisesaplus.com/

什麼是A+規範的Promise? Promises/A+是在Promises/A的基礎上對原有規範進行修正和增強。

Promise A+與Promise A的主要區別:

符合Promise/A+規範的promise實現均以then方法爲交互核心。Promises/A+組織會因新發現的問題以向後兼容的方式修改規範，因此Promises/A+規範相對來說還是比較穩定的。
A+規範強調了不同實現之間的互操作和混用，通過術語thenable來區分promise對象，當一個對象擁有then函數就認爲是promise對象
A+定義當onFulfilled或者onRejected返回promise時後的處理過程，他們必須是作爲函數來調用，而且調用過程必須是異步的
A+嚴格定義了then方法鏈式調用時onFulfilled或者onRejected的調用順序

目前判斷是否爲Promise/ A+規範主要看Promiise的方法含有new Pomise(function(resolve, reject) {})、then、resolve、all等方法。ES6 Promise的實現嚴格遵循了Promise/A+規範。例如Defferd就不是Promise/ A+的規範。

2.2、Defferd實現規範

比較典型的是jquery的Defferd方法實現的Promise，另外jquery還有一個Promise的類型，實現的原理相同，但是不遵循Promise/A +規範，相對於Promise沒有那麼穩定。

我們先來看看jquery的Promise是怎樣實現的。我們看下jquery的Deferred實現源碼：

// 精簡後主要邏輯的源碼

Deferred: function( func ) {
var tuples = [
// action, add listener, listener list, final state
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],
state = "pending",
promise = {
state: function() {},
always: function() {},
then: function( /* fnDone, fnFail, fnProgress */ ) { },
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object
promise: function( obj ) {}
},
deferred = {};
jQuery.each( tuples, function( i, tuple ) {
deferred[ tuple[0] + "With" ] = list.fireWith;
});
promise.promise( deferred );
// All done!
return deferred;
},



// 調用時間訂閱方法

var def = $.Deferred();
def.done(function(){
console.log(“成功”);
}).fail(function(){
console.log(“失敗”);
}).catch(function(){
console.log(“再一次成功”);
})

可見，jquery的Deferred是個工廠類，返回的是內部構建的deferred對象；tuples 含有三個$.Callbacks對象，分別表示成功，失敗，處理中三種狀態；創建的promise對象，具有state、always、then、primise方法；擴展primise對象生成最終的Deferred對象，返回該對象；沒有resolve、reject、all等Promise/A+ 規範的常用方法。

三、兼容性

目前使用需要使用polyfill，也就是原生實現一個Promise支持較低瀏覽器，第三方實現庫很多後面給了個學習的較好例子。

四、generator的異步

Promise處理異步問題相信都瞭解了。ES6裏的generator還有另一個處理異步的方法，那ES6定義這兩個特性豈不是重複了？

單獨地介紹Generator沒有太大價值，因爲它除了更復雜外，功能與普通函數沒有太大差別。真正讓Generator具有價值的是yield關鍵字，這個yield關鍵字讓Generator內部的邏輯能夠切割成多個部分。並且可以靈活控制內部的執行情況。

// 申明要用 var gen = function* (){} 的方式
var compute = function* (a, b) {
yield console.log(a + b);
yield console.log(a - b);
yield console.log(a * b);
yield console.log(a / b);
};
var generator = compute(4, 2);
      generator.next(); // 6
generator.next(); // 2
generator.next(); // 8
generator.next(); // 2

運行時使用node –harmony-generators test.js

不難發現它的運行過程，generator函數運行到yield時會停止，等待下一個next()方法調用讓它繼續執行。我們改下成爲異步方法，異步我們需要藉助高階函數

var helper = function(fn) {
    return function() {
        var args = [].slice.call(arguments);
        var pass;
        args.push(function() { // 在回調函數中植入收集邏輯
            if (pass) {
                pass.apply(null, arguments);
            }
        });
        fn.apply(null, args);

        return function(fn) { // 傳入一個收集函數
            pass = fn;
        };
    };
};

那麼後面的寫法做下修改

var sum = helper(function sum(a, b){
    console.log(a + b);
});

var minus = helper(function minus(a, b){
    console.log(a - b);
});

var muti= helper(function muti(a, b){
    console.log(a * b);
});

var devide= helper(function devide(a, b){
    console.log(a / b);
});

var compute = function*(a, b) {
    yield sum(a, b);
    yield minus(a, b);
    yield muti(a, b);
    yield devide(a, b);
};

var generator = compute(5, 2);
var state = generator.next();

/**
 * next 返回 {value:'',done: false}的結構，value表示執行傳入的值，done表示是否結束
 * @param  {[type]} !state.done [description]
 * @return {[type]}             [description]
 */

setTimeout(function() {

    while (!state.done) {
        state = generator.next();
    }
}, 100);

console.log('other');

generator實現異步的方法也有比較完整的封裝方式，實現先可以看：https://github.com/ouvens/co 可以看個簡單版的：

var co = function(flow) {
    var generator = flow();
    var next = function(data) {
        var result = generator.next(data);
        if (!result.done) {
            result.value(function(err, data) {
                if (err) {
                    throw err;
                }
                next(data);
            });
        }
    };
    next();
};

我們小結一下通過Generator進行流程控制的特點。 – 每個異步方法都需要標準化爲yield關鍵字能接受的方法，使我們有機會注入特殊邏輯，這個過程被稱爲thunkify。 – 需要巧妙地將異步調用執行完成得到的結果通過.next()傳遞給下一段流程。 – 需要遞歸地將業務邏輯執行完成。

需要注意的是yield只能暫停Generator內部的邏輯，它並不是真正暫停整個線程，Generator外的業務邏輯依然會繼續執行下去。

五、總結

實現異步的方法目前有，自定義嵌套，Promise、generator、Defferd，還有ES7的async（其實是generator的封裝），不同場景可以選擇不同的方式去實現

簡單的Promise實現樣例： https://github.com/ouvens/promise

generator異步實現： https://github.com/tj/co

參考文章： http://www.infoq.com/cn/articles/generator-and-asynchronous-programming/ https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise http://www.shaynegui.com/promise-aplus-implementation/ http://www.html5rocks.com/zh/tutorials/es6/promises/ https://blog.domenic.me/youre-missing-the-point-of-promises/#toc_1 https://github.com/nodejs/node-v0.x-archive/wiki/modules#async-flow http://www.html-js.com/article/JavaScript-tips-on-how-to-implement-a-ECMAScript-6-promise-patch

苞米洋

發佈了34 篇原創文章 · 獲贊 6 · 訪問量 6萬+

私信關注

【個人筆記重點，不作爲參考】主題：承諾與異步編程

先給下Promise學術點的描述：

一、Promise的適用場景

二、Promise的表現

三、幾種規範的promise

2.1、Promise的Promise/A 規範和Promise/A+規範

Promise A+與Promise A的主要區別:

2.2、Defferd實現規範

三、兼容性

四、generator的異步

五、總結

Python 潮流週刊#52：Python 處理 Excel 的資源

【個人筆記重點，不作爲參考】主題：angular-cli

【個人筆記重點，不作爲參考】主題：JSX語法與函數式編程

【個人筆記重點，不作爲參考】主題：ubuntu下的Samba配置：使每個用戶可以用自己的用戶名和密碼登錄自己的home目錄

【個人筆記重點，不作爲參考】主題：待看的angular2課程

【個人筆記重點，不作爲參考】主題：typescript筆記

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

linux以太網驅動總結

【個人筆記重點，不作爲參考】主題：承諾與異步編程

先給下Promise學術點的 描述 ：

一、Promise的適用場景

二、Promise的表現

三、幾種規範的promise

2.1、Promise的Promise/A 規範和Promise/A+規範

Promise A+與Promise A的主要區別:

2.2、Defferd實現規範

三、兼容性

四、generator的異步

五、總結

先給下Promise學術點的描述：