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 相关文章推荐
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
原生js实现无缝轮播图
Jan 11 Javascript
JS函数基本定义与用法示例
Jan 15 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 HTML代码串 截取实现代码
2009/06/29 PHP
php绘制圆形的方法
2015/01/24 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
js获取变量
2006/08/24 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python数据结构之翻转链表
2017/02/25 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
北承题目(C++)
2012/05/16 面试题
仓库管理员岗位职责
2014/03/19 职场文书
新春联欢会主持词
2014/03/24 职场文书
五好关工委申报材料
2014/05/31 职场文书
会计个人实习计划书
2014/08/15 职场文书
入党转正申请报告
2015/05/15 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技