BT

JavaScript异步编程的Promise模式

作者 崔康 发布于 2011年9月15日 | 被首富的“一个亿”刷屏?不如定个小目标,先把握住QCon上海的优惠吧!

异步模式在web编程中变得越来越重要,对于web主流语言Javascript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promise的抽象(有时也称之为deferred)。通过这些库,开发人员能够在实际编程中使用 promise模式。IE官方博客最近发表了一篇文章,详细讲述了如何使用XMLHttpRequest2来实践promise模式。我们来了解一下相关的概念和应用。

考虑这样一个例子,某网页存在异步操作(通过XMLHttpRequest2或者 Web Workers)。随着Web 2.0技术的深入,浏览器端承受了越来越多的计算压力,所以“并发”具有积极的意义。对于开发人员来说,既要保持页面与用户的交互不受影响,又要协调页面与异步任务的关系,这种非线性执行的编程要求存在适应的困难。先抛开页面交互不谈,我们能够想到对于异步调用需要处理两种结果——成功操作和失败处理。在成功的调用后,我们可能需要把返回的结果用在另一个Ajax请求中,这就会出现“函数连环套”的情况(在笔者的另一篇文章《NodeJS的异步编程风格》中有详细的解释)。这种情况会造成编程的复杂性。看看下面的代码示例(基于XMLHttpRequest2):

function searchTwitter(term, onload, onerror) {
 
     var xhr, results, url;
     url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
     xhr = new XMLHttpRequest();
     xhr.open('GET', url, true);
 
     xhr.onload = function (e) {
         if (this.status === 200) {
             results = JSON.parse(this.responseText);
             onload(results);
         }
     };
 
     xhr.onerror = function (e) {
         onerror(e);
     };
 
     xhr.send();
 }
 
 function handleError(error) {
     /* handle the error */
 }
 
 function concatResults() {
     /* order tweets by date */
 }
 
 function loadTweets() {
     var container = document.getElementById('container');
 
     searchTwitter('#IE10', function (data1) {
         searchTwitter('#IE9', function (data2) {
             /* Reshuffle due to date */
             var totalResults = concatResults(data1.results, data2.results);
             totalResults.forEach(function (tweet) {
                 var el = document.createElement('li');
                 el.innerText = tweet.text;
                 container.appendChild(el);
             });
         }, handleError);
     }, handleError);
 }

上面的代码其功能是获取Twitter中hashtag为IE10和IE9的内容并在页面中显示出来。这种嵌套的回调函数难以理解,开发人员需要仔细分析哪些代码用于应用的业务逻辑,而哪些代码处理异步函数调用的,代码结构支离破碎。错误处理也分解了,我们需要在各个地方检测错误的发生并作出相应的处理。

为了降低异步编程的复杂性,开发人员一直寻找简便的方法来处理异步操作。其中一种处理模式称为promise,它代表了一种可能会长时间运行而且不一定必须完整的操作的结果。这种模式不会阻塞和等待长时间的操作完成,而是返回一个代表了承诺的(promised)结果的对象。

考虑这样一个例子,页面代码需要访问第三方的API,网络延迟可能会造成响应时间较长,在这种情况下,采用异步编程不会影响整个页面与用户的交互。promise模式通常会实现一种称为then的方法,用来注册状态变化时对应的回调函数。比如下面的代码示例:

searchTwitter(term).then(filterResults).then(displayResults);

promise模式在任何时刻都处于以下三种状态之一:未完成(unfulfilled)、已完成(resolved)和拒绝(rejected)。以CommonJS Promise/A 标准为例,promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象,以便于形成promise管道,这种返回promise对象的方式能够支持开发人员把异步操作串联起来,如then(resolvedHandler, rejectedHandler); 。resolvedHandler 回调函数在promise对象进入完成状态时会触发,并传递结果;rejectedHandler函数会在拒绝状态下调用。

有了promise模式,我们可以重新实现上面的Twitter示例。为了更好的理解实现方法,我们尝试着从零开始构建一个promise模式的框架。首先需要一些对象来存储promise。

var Promise = function () {
        /* initialize promise */
    };

接下来,定义then方法,接受两个参数用于处理完成和拒绝状态。

Promise.prototype.then = function (onResolved, onRejected) {
     /* invoke handlers based upon state transition */
 };

同时还需要两个方法来执行理从未完成到已完成和从未完成到拒绝的状态转变。

Promise.prototype.resolve = function (value) {
     /* move from unfulfilled to resolved */
 };
 
 Promise.prototype.reject = function (error) {
     /* move from unfulfilled to rejected */
 };

现在搭建了一个promise的架子,我们可以继续上面的示例,假设只获取IE10的内容。创建一个方法来发送Ajax请求并将其封装在promise中。这个promise对象分别在xhr.onload和xhr.onerror中指定了完成和拒绝状态的转变过程,请注意searchTwitter函数返回的正是promise对象。然后,在loadTweets中,使用then方法设置完成和拒绝状态对应的回调函数。

function searchTwitter(term) {

    var url, xhr, results, promise;
    url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
    promise = new Promise();
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onload = function (e) {
        if (this.status === 200) {
            results = JSON.parse(this.responseText);
            promise.resolve(results);
        }
    };

    xhr.onerror = function (e) {
        promise.reject(e);
    };

    xhr.send();
    return promise;
}

function loadTweets() {
    var container = document.getElementById('container');
    searchTwitter('#IE10').then(function (data) {
        data.results.forEach(function (tweet) {
            var el = document.createElement('li');
            el.innerText = tweet.text;
            container.appendChild(el);
        });
    }, handleError);
}

到目前为止,我们可以把promise模式应用于单个Ajax请求,似乎还体现不出promise的优势来。下面来看看多个Ajax请求的并发协作。此时,我们需要另一个方法when来存储准备调用的promise对象。一旦某个promise从未完成状态转化为完成或者拒绝状态,then方法里对应的处理函数就会被调用。when方法在需要等待所有操作都完成的时候至关重要。

Promise.when = function () {
    /* handle promises arguments and queue each */
};

以刚才获取IE10和IE9两块内容的场景为例,我们可以这样来写代码:

var container, promise1, promise2;
container = document.getElementById('container');
promise1 = searchTwitter('#IE10');
promise2 = searchTwitter('#IE9');
Promise.when(promise1, promise2).then(function (data1, data2) {

    /* Reshuffle due to date */
    var totalResults = concatResults(data1.results, data2.results);
    totalResults.forEach(function (tweet) {
        var el = document.createElement('li');
        el.innerText = tweet.text;
        container.appendChild(el);
    });
}, handleError);

分析上面的代码可知,when函数会等待两个promise对象的状态发生变化再做具体的处理。在实际的Promise库中,when函数有很多变种,比如 when.some()、when.all()、when.any()等,读者从函数名字中大概能猜出几分意思来,详细的说明可以参考CommonJS的一个promise实现when.js

除了CommonJS,其他主流的Javascript框架如jQuery、Dojo等都存在自己的promise实现。开发人员应该好好利用这种模式来降低异步编程的复杂性。我们选取Dojo为例,看一看它的实现有什么异同。

Dojo框架里实现promise模式的对象是Deferred,该对象也有then函数用于处理完成和拒绝状态并支持串联,同时还有resolve和reject,功能如之前所述。下面的代码完成了Twitter的场景:

function searchTwitter(term) {

    var url, xhr, results, def;
    url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
    def = new dojo.Deferred();
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onload = function (e) {
        if (this.status === 200) {
            results = JSON.parse(this.responseText);
            def.resolve(results);
        }
    };

    xhr.onerror = function (e) {
        def.reject(e);
    };

    xhr.send();
    return def;
}

dojo.ready(function () {
    var container = dojo.byId('container');
    searchTwitter('#IE10').then(function (data) {
        data.results.forEach(function (tweet) {
            dojo.create('li', {
                innerHTML: tweet.text
            }, container);
        });
    });
});

不仅如此,类似dojo.xhrGet方法返回的即是dojo.Deferred对象,所以无须自己包装promise模式。

var deferred = dojo.xhrGet({
    url: "search.json",
    handleAs: "json"
});

deferred.then(function (data) {
    /* handle results */
}, function (error) {
    /* handle error */
});

除此之外,Dojo还引入了dojo.DeferredList,支持开发人员同时处理多个dojo.Deferred对象,这其实就是上面所提到的when方法的另一种表现形式。

dojo.require("dojo.DeferredList");
dojo.ready(function () {
    var container, def1, def2, defs;
    container = dojo.byId('container');
    def1 = searchTwitter('#IE10');
    def2 = searchTwitter('#IE9');

    defs = new dojo.DeferredList([def1, def2]);

    defs.then(function (data) {
        // Handle exceptions
        if (!results[0][0] || !results[1][0]) {
            dojo.create("li", {
                innerHTML: 'an error occurred'
            }, container);
            return;
        }
        var totalResults = concatResults(data[0][1].results, data[1][1].results);

        totalResults.forEach(function (tweet) {
            dojo.create("li", {
                innerHTML: tweet.text
            }, container);
        });
    });
});

上面的代码比较清楚,不再详述。

说到这里,读者可能已经对promise模式有了一个比较完整的了解,异步编程会变得越来越重要,在这种情况下,我们需要找到办法来降低复杂度,promise模式就是一个很好的例子,它的风格比较人性化,而且主流的JS框架提供了自己的实现。所以在编程实践中,开发人员应该尝试这种便捷的编程技巧。需要注意的是,promise模式的使用需要恰当地设置promise对象,在对应的事件中调用状态转换函数,并且在最后返回promise对象。

技术社区对异步编程的关注也在升温,国内社区也发出了自己的声音。资深技术专家老赵就发布了一套开源的异步开发辅助库Jscex,它的设计很巧妙,抛弃了回调函数的编程方式,采用一种“线性编码、异步执行”的思想,感兴趣的读者可以查看这里

不仅仅是前端的JS库,如今火热的NodeJS平台也出现了许多第三方的promise模块,具体的清单可以访问这里

注:本文中的所有代码示例均来自于IE官方博客。

作者的微信公众号“老崔瞎编”,关注IT趋势,承载前沿、深入、有温度的内容。感兴趣的读者可以搜索ID:laocuixiabian,或者扫描下方二维码加关注。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

疑问 by 刘 希阳

var results = searchTwitter(term).then(filterResults);
displayResults(results);

上面这段代码中then是如何实现等待而又不阻塞的呢?

Re: 疑问 by 旭杰 陈

then传递的是一个filterResults方法,then方法将这个filterResults方法添加到回调方法列表中。我想是这样的。

Re: 疑问 by 旭杰 陈

不过 displayResults(results); 是什么意思就不懂了。

这是我框架RPC通信包其中一个API,原理一样吧? by 卡 卡

/**
* 调用远程过程
* @param procedureId 过程id
* @param vars 参数
* @param completeHandler 成功返回时的回调
* @param errorHandler 异常时的回调
*/
public function call(procedureId:int, vars:*, callBacks:Array = null, errorHandlers:Array = null):void

《回复》Re: 疑问 by 崔 康

谢谢希阳和旭杰的讨论,我明白你们的意思,也仔细分析了这段来自IE博客上的代码,感觉的确是不合理,有漏洞。所以我决定把这段代码修改一下,以前是:
var results = searchTwitter(term).then(filterResults);
displayResults(results);
现在是:
searchTwitter(term).then(filterResults).then(displayResults);
修改后的代码消除了同异步的疑问,另外也体现了promise模式的pipeline特性。
欢迎大家继续讨论!

Re: 这是我框架RPC通信包其中一个API,原理一样吧? by 崔 康

兄台,你指的是哪个RPC通信包。。。。。详细说说,分享一下。

Deferred 在twisted 中已经存在很久了 by jianxiao jiang

Deferred 在twisted 中已经存在很久了

Re: Deferred 在twisted 中已经存在很久了 by 崔 康

我觉得不够人性化,没有when\then写起来流畅

Re: 《回复》Re: 疑问 by Chen Yongfu

原来模式,如果获取results的话,必须要等待。不过新的模式searchTwitter(term).then(filterResults).then(displayResults);
若实现起来,也会有一定的问题的。按照我的理解,then中的行为应该就是通过注册事件来实现的,而filterResults和displayResults是有先后依赖的,displayResoults依赖于filterResults的结果。当然此处可以实现,不过像这样注册多个有依赖关系的then的promise,每个promise结构的实现都还有其独特性,要多少依赖于其then中的行为,并不恰当。
我认为想promise应该是适用于一次注册,或者多次无依赖注册。

then 与 resolve 执行先后问题 by Yanggu Zhu

有没有可能我还在注册 then 的事件的时候,resolve 就已经开始被调用了呀?这样会不会造成某些 then 注册的不会被执行?

欢迎提问题! by 崔 康

没想到大家对这个主题如此感兴趣,提了不少问题,有读者在微博上给我留言提问,而且都很有见解和洞察力。我稍后会再写一篇文章回答读者的问题,也欢迎大家继续提问。

Re: 《回复》Re: 疑问 by 夏 天

我也认为than是注册事件处理,和阻塞无关。

还以为你是原创的文章 by 李 光毅

原来只是翻译而已,顺便把最后的“本文中的所有代码示例”改为“本文中所有文章内容”吧

Re: 疑问 by 汤 孟峥

rtrtrtertr

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

14 讨论
提供反馈
错误报告
商务合作
内容合作
Marketing
InfoQ.com及所有内容,版权所有 © 2006-2016 C4Media Inc. InfoQ.com 服务器由 Contegix提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司 京ICP备09022563号-7 隐私政策
BT

We notice you’re using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.