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 相关文章推荐
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
处理canvas绘制图片模糊问题
May 11 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
php中cookie的作用域
2008/03/27 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
基于PHP制作验证码
2016/10/12 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
jquery实现动态画圆
2014/12/04 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
React组件的三种写法总结
2017/01/12 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Django实现分页功能
2018/07/02 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python实现批量转换图片为黑白
2020/06/16 Python
《锄禾》教学反思
2014/04/08 职场文书
导师推荐信范文
2014/05/09 职场文书
离职证明范本
2015/06/12 职场文书
环保主题班会教案
2015/08/13 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python