Promises

其中的一种模式就是promise,它代表了一种潜在地、长时间运行但不必返回完成操作的结果。与阻塞并长时间等待运行计算完成不同,这种模式返回一个代表承诺(promised)结果的对象。

例如,需要创建一个请求到第三方系统,而它的网络延迟是不确定的。应用程序可以被释放出来做其他事情,直到这个请求返回值需要使用到,而不是在等待并阻塞住整个程序。Pormise实现了一种方法,即为状态的变化注册相应的回调函数,通常命名为then方法。

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

在任何时刻,promise只可能处于三种状态之一:unfulfilled(未完成), resolved(已解决) or rejected(拒绝)。

为了说明这些概念是如何工作的,我们可以了解下CommonJS Promise/A标准,这个标准在流行的库中已经有了许多衍生工具。在promise对象中的then方法为resolved以及rejected状态添加了处理程序。then函数会返回另外一个promise对象以便形成promise管道,使开发人员能够将异步操作串联起来,这样第一个操作的结果就可以作为参数传入到第二个中了。

then(resolvedHandler, rejectedHandler);

函数resolvedHandler回调函数会在promise对象进入完成状态时调用,并传递计算(computation)出来的结果。而rejectedHandler函数会在promise对象进入拒绝状态时被调用。

可以用promise的伪代码来重现上面的示例,主要包含创建一个Ajax请求用于搜索Twitter、用数据填充屏幕以及处理错误。为了更好的理解实现方法,我们尝试着从零开始构建一个promise模式的框架。我们以一个例子开始,即如果我们从头开始设计一个仅包含基础功能的promise库应该有什么,首先,我们需要一些对象格式来保存promise。

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

接下来,我们需要实现then方法,允许我们根据promise的状态变化将操作串联在一起。这个方法包含两个函数参数,用于处理promise被解决以及promise被拒绝的情况。

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标签的tweets。首先,我们通过使用XMLHttpRequest2创建一个方法来发送一个Ajax Get请求到一个给定的URL,并且将它封装成一个promise。接下来,我们将特别为Twitter创建一个方法,用来调用含有给定搜索条件的Ajax封装方法。最后,我们会调用我们的搜索函数并在无序列表中展示结果。

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请求,那么接下来讨论另一种场景——我们想要发送超过一个Ajax请求并协调它们的结果。为了处理这种场景,我们会在我们的Promise对象中创造一个when方法,用来储存被调用的promise对象。一旦promise从unfulfilled转变成resolved或者rejected,then方法里对应的处理函数就会被调用。有个场景至关重要,即when方法需要等待所有操作都完成才能继续。

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

现在我们可以同时存储多个promise,以在Twitter上搜索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);

要重点记住的是,在这些例子中的代码除了普通JavaScript代码,并没有其它特别的。Web开发人员必定会创造他们自己的类Promise库;但为了方便和一致性,你可以利用在一般JavaScript库中公开的promise模式。

原文:

https://github.com/pingan1927/translate/blob/master/Asynchronous%20Programming%20in%20JavaScript%20with%20%E2%80%9CPromises%E2%80%9D.md

JQuery AJAX deferred :

http://api.jquery.com/category/deferred-object/

JavaScript中使Promise模式进行异步编程相关推荐

  1. Javascript中的Promise用法

    Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案 「 回调函数和事件」 更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 P ...

  2. 39 JavaScript中的严格模式

    技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.什么是严格模式(strict model) JavaScript除了提供正常模式外,还 ...

  3. 了解JavaScript中的Promise

    学习记录,加深印象 1. 回调函数 JavaScript是单线程,因此JavaScript中的浏览器事件.网络操作需要异步执行,而异步执行可以用回调函数实现 function callback() { ...

  4. 关于JavaScript中的同步(SYNC)和异步(ASYNC)

    同步和异步 JS是属于单线程的,也就是我们说的同步,但是JS中也有异步; JS中的异步编程: 1.定时器:多个定时器时,如果执行完成循环都到达时间了,先执行时间短的那个服务器2.事件绑定 :js是基于 ...

  5. Java中如何使用非阻塞异步编程——CompletableFuture

    分享一波:程序员赚外快-必看的巅峰干货 对于Node开发者来说,非阻塞异步编程是他们引以为傲的地方.而在JDK8中,也引入了非阻塞异步编程的概念.所谓非阻塞异步编程,就是一种不需要等待返回结果的多线程 ...

  6. JavaScript中的严格模式

    严格模式 严格模式是JavaScript中的一种限制性更强的变种方式 严格模式可以跟非严格模式共存 目的 首先,在严格模式中将JavaScript陷阱直接报错 其次,修正了一些引擎难以优化的错误:同样 ...

  7. 详细介绍javascript中的单体模式singleton(全面)

    一.单体模式描述 1.单体模式是javascript中最基本但又最有用的模式之一,他可能比其他任何模式都常用. 2.这种模式提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一的 ...

  8. JavaScript中发布/订阅模式的理解

    订阅发布模式的介绍 发布订阅模式,它定义了一种一对多的关系,可以使多个观察者对象对一个主题对象进行监听,当这个主题对象发生改变时,依赖的所有对象都会被通知到. 在生活中我们常常遇到这样一种情况,我们在 ...

  9. jsp标签在JavaScript中使用时,可能会出现的一个问题。

    直接上代码 1 <script type="text/javascript"> 2 var E = window.wangEditor; 3 var editor = ...

最新文章

  1. 【图论专题】无向图的双连通分量
  2. linux centos 7安装 apache php 及mariadb
  3. 一个页面区分管理者和普通用户如何设计_电商系统:优惠券原型设计说明(二)...
  4. 团队开发 个人工作总结01
  5. redis 小功能大用处
  6. TCP/IP协议精华指南pdf发布
  7. 【视频编解码的新挑战与新机会】
  8. std::recursive_mutex嵌套锁/递归锁
  9. 采用HttpModules来重写URLs(原理篇)转
  10. Spring Boot : 自定义 Starter
  11. 你知道关闭页面时怎么向后台发送消息吗?
  12. VMware Workstation 无法与 Windows XP \ Windows 7 \ Windows 8 进行共享文件夹。
  13. gitlab update error
  14. 汽车电子中的3225贴片晶振
  15. AxureShare太慢?尝试在内网架设Axure共享吧!
  16. java收割者模式,王牌战士收割者怎么玩 海拉技巧玩法介绍
  17. 21种低成本的方式,帮助企业获得关注
  18. HTTP 必备干货学习,一篇HTTP入门 不收藏都可惜!
  19. 从0到1玩转戴尔G7 7588 macOS Win 双系统
  20. (史上最全总结)总体方差,样本方差,标准差,抽样方差,标准误差,均方误差,协方差 ...........

热门文章

  1. ajax回调打开新窗体防止浏览器拦截方法
  2. 1115: 零起点学算法22——华氏摄氏温度转换
  3. elasticsearch 5.1 问题 ubuntu
  4. OSChina 周一乱弹 ——致我们终将逝去的青春
  5. 点对点 客户端-服务器 聊天程序
  6. 虚拟现实大潮渐近:Oculus VR、EA和Avegant等多家公司...
  7. 从笑话中看到产品创意
  8. 寒假万恶之源3:抓老鼠啊~亏了还是赚了?
  9. 2018-10-03-Python全栈开发-day60-django序列化-part3
  10. 2、Saltstack的数据系统