Javascript中的异步编程规范Promises/A详细介绍


Posted in Javascript onJune 06, 2014

Javascript里异步编程逐渐被大家接受,先前大家一般通过回调嵌套,setTimeout、setInterval等方式实现,代码看起来非常不直观,不看整个代码逻辑很难快速理解。Javascript里异步函数大概有I/O函数(Ajax、postMessage、img load、script load等)、计时函数(setTimeout、setInterval)等。

这些我们都很熟悉,在复杂的应用中往往会嵌套多层,甚至以为某些步骤未完成而导致程序异常,最简单的例子:比如你往DOM中注入节点,你必须等待节点注入后在操作这个节点,当大量节点注入的时候,时间往往很难把握。如果我们得代码依赖第三方api的数据。我们无法获悉一个API响应的延迟时间,应用程序的其他部分可能会被阻塞,直到它返回结果。Promises对这个问题提供了一个更好的解决方案,它是非阻塞的,并且与代码完全解耦 。

那么,我看看Javascript里异步编程,首先推荐大家看看相对来说比较流行的Promises/A规范。

Promises/A规范

注:为了便于理解,描述可能和Promises/A规范有所出入;

CommonJS之Promises/A规范,通过规范API接口来简化异步编程,使我们的异步逻辑代码更易理解。
遵循Promises/A规范的实现我们称之为Promise对象,Promise对象有且仅有三种状态:unfulfilled(未完成)、fulfilled(已完成)、failed(失败/拒绝);初始创建的时候是unfulfilled(未完成)状态,状态只可以从unfulfilled(未完成)变成fulfilled(已完成),或者unfulfilled(未完成)变成failed(失败/拒绝)。状态一旦变成fulfilled(已完成)或者failed(失败/拒绝),状态就不能再变了。

Promises/A规范提供了一个在程序中描述延时(或将来)概念的解决方案。主要的思想不是执行一个方法然后阻塞应用程序等待结果返回后再回调其他方法,而是返回一个Promise对象来满足未来监听。fulfilled状态和failed状态都可以被监听。Promise通过实现一个then接口来返回Promise对象来注册回调:

then(fulfilledHandler, errorHandler, progressHandler);

then接口用于监听一个Promise的不同状态。fulfilledHandler用于监听fulfilled(已完成)状态,errorHandler用于监听failed(失败/拒绝)状态,progressHandler用于监听unfulfilled(未完成)状态。Promise不强制实现unfulfilled(未完成)的事件监听(例如我们知道旧版本的jQuery(1.5,1.6)的Deferred就是一个Promise的实现,但没有实现对unfulfilled(未完成)状态的监听来回调progressHandler)。

一般认为,then接口返回的是一个新的Promise对象,而不是原来的Promise对象,这个新的新的Promise对象可以理解为是原来Promise对象的一个视图,它只包含原有Promise对象的一组方法,这些方法只能观察原有Promise对象的状态,而无法更改deferred对象的内在状态。这样可以避免多个调用者之间的冲突,多个调用者可以通过改变新的Promise对象状态而不影响别的调用者。

另外,Promise提供了resolve(实现状态由未完成到已完成)和reject(实现状态由未完成到拒绝或失败)两个接口实现状态的转变。

发一张图片帮助理解一下:

Javascript中的异步编程规范Promises/A详细介绍

有了Promise,就可以以同步的思维去编写异步的逻辑了。在异步函数里,不能使用try/catch捕获异常,也不能抛出异常。有了Promise,我们可以直接显式定义errorHandler,相当于捕获异常。

以下是几个遵循Promises/A规范的类库,when,q,rsvp.js,jQuery.Deferred等等。

Javascript 相关文章推荐
图片Slider 带左右按钮的js示例
Aug 30 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 #Javascript
jQuery插件开发详细教程
Jun 06 #Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 #Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 #Javascript
js检验密码强度(低中高)附图
Jun 05 #Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 #Javascript
js如何判断用户是否是用微信浏览器
Jun 05 #Javascript
You might like
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
vue 巧用过渡效果(小结)
2018/09/22 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python操作json数据的一个简单例子
2014/04/17 Python
Python中为什么要用self探讨
2015/04/14 Python
利用Python爬取可用的代理IP
2016/08/18 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
改作风抓落实促发展心得体会
2014/09/10 职场文书
庆祝国庆节标语
2014/10/09 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书