javascript异步编程代码书写规范Promise学习笔记


Posted in Javascript onFebruary 11, 2015

最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下。

一:Promise是什么?为什么会有这个东西?

首先说明,Promise是为了解决javascript异步编程时候代码书写的方式产生的。
随着javascript的发展,异步的场景越来越多。前端有AJAX,setTimeout等,后端Node异步更多。按照传统的做法,那么就是各种回调嵌回调。代码可以把人绕晕。
这个时候,CommonJS社区提出了一个叫做Promise/A+的规范,这个规范定义了如何书写异步代码,包括使用when/then/resolve等来组织异步的代码。
这个规范由于很优雅,所以相继就有很多人实现了这个规范,其中包括 浏览器原生支持的Promise(), jQuery里面的deferred,when.js等。
因为这几个库都符合该规范,所以学习一个也就可以了。我主要学习了jQuery的deferred,所以本文主要讲讲这个实现。
 
二:jQuery的deferred

首先,关于deferred对象,阮一峰老师有篇文章写的很详细了,地址点这。建议可以先看看他的那篇文章,再继续往下看。
上面说过,promise是为了解决异步(比如ajax)的,那么我们来对比下他们的区别。
经典的jQuery的AJAX的写法是

$.ajax({

    type: "get",

    url: "",

    success: function () {},

    error; function () {}

});

其中success和error参数便是成功/失败时候的回调函数。 

而现在jQuery的AJAX写法成了

$.ajax({

    type; "get",

    url: ""

}).done(function () {}).fail(function () {});

其中成功后会调用done里面的函数,失败便会调用fail里面的函数。 

看到这里也许你就会有疑问了,done/fail这些方法是哪个对象上的?$.ajax()返回了什么对象,为什么有这两个方法?
答案就在下面介绍的Deferred对象。

jQuery提供了一种新的类型Deferred。通过$.Deferred()来生成。例如

var def = $.Deferred();

这个def继承了很多方法,有done/fail/resolve/reject等。
所以这里我们也就知道,上面$.ajax()其实返回的也就是这个对象。
 
deferred对象有很多方法,这里介绍几种常用的,更多的可以参考 API
 
首先自然是生成一个def对象。这里有很多方法,比如:

var def = $.Deferred();    // 自己生成

$.ajax({});    // ajax方法返回的也是def对象

$.when();    // when方法也会返回一个def对象

这里,$.when()可以单独讲讲,这个方法通常接收一个或多个deferred对象,然后根据这些deferred对象的状态情况,来决定$.when()返回的对象的状态。其中有个使用场景就是多个ajax请求,如果其中一个失败就都算失败,那么便可以在$.when()中传入多个ajax方法,例如$.when($.ajax(), $.ajax())。然后$.when会返回一个def对象(根据这两个请求结果的来判断)。
 
接着得到了def对象,便有了一系列改变这个对象状态的方法

def.resolve();    // 把def对象设置成已经完成,然后便会立刻执行绑定在def.done()里面的函数。

def.reject();    // 把def对象设置成已经失败,然后便会立刻执行绑定在def.fail()里面的函数。

def.notify();    // def对象执行中,对应的回调是def.progress()。

紧接着是设置回调的方法,顺序和上面的对应,也就是什么状态会调用到什么回调

def.done();    // 对应def.resolve();

def.fail();    // 对应def.reject();

def.progress();    // 对应 def.notify();

// 特殊的

def.always();    // 成功或者失败都会调用

def.then();    // 接受多个函数,按顺序依次是成功(done),失败(fail)和进行中(progress)

其实到这里位置,deferred对象的用法也就差不多了。不过jQuery还提供了几个API

// 检查当前状态类

def.isRejected();

def.isResolved();

def.state();

这几个api顾名思义,就不具体讲了,具体可以查看上面给的jQuery API文档。
 
还有一个方法,就是有时候我们希望给外部一个def对象,然后这个对象可以设置各种状态的回调,但是不能改变它的状态,那么就可以用

def.promise();

返回一个promiese对象,是deferred对象的子集,可以用done/fail等方法,没有resolve/reject等方法,主要是为了保护不让外部去修改def对象的状态。 

至此,关于promise已经全部讲完,大家现在就可以把它用在自己的项目中了,另外提早给大家拜个早年,祝大家羊年洋洋得意^ ^。

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
通过修改referer下载文件的方法
May 11 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
jquery实现动态操作select选中
Feb 11 #Javascript
JS操作HTML自定义属性的方法
Feb 10 #Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 #Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 #Javascript
javascript中定义类的方法详解
Feb 10 #Javascript
JavaScript判断浏览器类型的方法
Feb 10 #Javascript
javascript定时器完整实例
Feb 10 #Javascript
You might like
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
重新认识php array_merge函数
2014/08/31 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
原生Javascript插件开发实践
2017/01/18 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
门卫人员岗位职责
2013/12/24 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
房展策划方案
2014/06/07 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
会计岗位职责范本
2015/04/02 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
人力资源部工作计划
2019/05/14 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书