JavaScript异步编程的Promise模式.docxVIP

异步模式在web编程中变得越来越重要，对于web主流语言Javascript来说，这种模式实现起来不是很利索，为此，许多Javascript库（比如 jQuery和Dojo）添加了一种称为promise的抽象（有时也称之为deferred）。通过这些库，开发人员能够在实际编程中使用 promise模式。IE官方博客最近发表了一篇文章，详细讲述了如何使用XMLHttpRequest2来实践promise模式。我们来了解一下相关的概念和应用。考虑这样一个例子，某网页存在异步操作（通过XMLHttpRequest2或者?Web?Workers）。随着Web 2.0技术的深入，浏览器端承受了越来越多的计算压力，所以“并发”具有积极的意义。对于开发人员来说，既要保持页面与用户的交互不受影响，又要协调页面与异步任务的关系，这种非线性执行的编程要求存在适应的困难。先抛开页面交互不谈，我们能够想到对于异步调用需要处理两种结果——成功操作和失败处理。在成功的调用后，我们可能需要把返回的结果用在另一个Ajax请求中，这就会出现“函数连环套”的情况（在笔者的另一篇文章《NodeJS的异步编程风格》中有详细的解释）。这种情况会造成编程的复杂性。看看下面的代码示例（基于XMLHttpRequest2）：functionsearchTwitter(term, onload, onerror) { ??? var xhr, results, url; ??? url = /search.json?rpp=100q= + 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(); }functionhandleError(error) { ??? /* handle the error */ }functionconcatResults() { ??? /* order tweets by date */ }functionloadTweets() { ??? 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的方法，用来注册状态变化时