在写这篇文章之前,我参考了以下文章。所以我文中的例子都是精准的,而且有循可依。下面抛出例子的链接:
Understanding JQuery.Deferred and Promise
Deferred and promise in jQuery

Edit:在翻网站的时候,看到腾讯技术团队居然也刚写了一篇Promise的文章,加下链接,以作备忘。

JavaScript Promise启示录

Deferred在JQuery1.5的版本被引进,这项功能的引进使JQuery变得更加强大,良好的异步支持,让书写异步JS变得简单轻松,而且充满了乐趣。
强大的链式书写方法,显得极为优雅。当你在程序中,创建了一个Deferred方法以后,你就可以使用下面的方法来进行异步操作了:

操作方法:
deferred.resolve():将会调用Done callbacks (完成执行)回调函数。
deferred.reject():将会调Fail callbacks (失败执行)回调函数。

回调事件:
deferred.done():添加完成执行的回调函数。
deferred.fail():添加失败执行的回调函数。
deferred.always():添加完成执行,或者失败执行的回调函数。

执行方式:
deferred.when():根据条件,执行回调。
deferred.then():可以添加完成执行,失败执行或者正在执行的Deferred对象。

其他:
jQuery.Deferred():将方法加入回调队列。
.promise()

首先来看一个例子,我会在例子中加入足量的注释来让事情变得简单易懂。我们这里以陆游的一首诗为例:

<script type="text/javascript"> 

    var UIIntrop = function () {
//获取Derferred对象,以便于将方法加入到异步队列中
var deferred = $.Deferred();
setTimeout(function () {
$(".con").append("陆游诗一首").append("<br/>");
//derferred执行通过
deferred.resolve();
}, 1);
//返回promise对象,以便于利用then方法控制其执行
return deferred.promise();
} //获取标题
var GetTitle = function () {
//由于Jquery中的$.ajax方法默认返回为promise对象,所以我们写ajax方法可以按照下面的方式来书写
var promise = $.ajax({
url: "../Home/GetTitle",
type: "post"
});
promise
//如果ajax执行完成,执行该方法,需要注意的是,done可以被多次调用
.done(function (data) {
$(".con").append(data.message).append("<br/>");
})
//第二次触发done方法
.done(function () {
$(".con").append("----------------------------").append("<br/>");
})
//如果ajax执行失败
.fail(function () {
$(".con").append("标题获取出错").append("<br/>");
});
return promise;
} //获取第一句
var GetFirst = function () {
var promise = $.ajax({
url: "../Home/GetSecond",
type: "post",
//这里也可以用ajax原生的方式来触发成功执行的方法
success: function (data) {
$(".con").append(data.message).append("<br/>");
}
});
return promise;
} //获取第二句,这里的解释和上面类似
var GetSecond = function () {
var deferred = $.Deferred();
$(".con").append("丰年留客足鸡豚。").append("<br/>");
deferred.resolve();
return deferred.promise();
} var GetFour = function (){
var deferred = $.Deferred();
$(".con").append("柳暗花明又一村。").append("<br/>");
deferred.resolve();
return deferred.promise();
} //第一个函数执行
UIIntrop()
//第二个函数获取诗歌的标题
.then(GetTitle)
//第三个函数获取诗歌第一句
.then(GetFirst)
//第四个函数获取诗歌第二句
.then(GetSecond)
//下面获取诗歌第三句
.then(function (value) {
$(".con").append("山重水复疑无路,").append("<br/>");
})
//最后获取诗歌第四句,需要注意的是,最后一个函数主要是进行错误捕获的,前面所有的函数,只要执行出错,都会自动被最后一个函数捕获。
.then(GetFour,
function (data) {
$(".con").append("出现了错误."+data.responseText).append("<br/>");
});
</script>
<div class="con"></div>

这样我们得到的结果就如下图所示:

这样就实现了javascript异步效果.

由于在最后一个then中,我们注册了两个函数,一个是GetFour,另外一个则是FailCallBack,也就是说,当上面的所有Promise 函数中,如果执行失败的话,都会跳入到这个函数里面来.

假设这里我们将GetTitle方法修改一下,让其找不到执行的Controller:

 //获取标题
var GetTitle = function () {
//由于Jquery中的$.ajax方法默认返回为promise对象,所以我们写ajax方法可以按照下面的方式来书写
var promise = $.ajax({
url: "../Home/Controller被我修改,已经无法找到",
type: "post"
});
promise
//如果ajax执行完成,执行该方法,需要注意的是,done可以被多次调用
.done(function (data) {
$(".con").append(data.message).append("<br/>");
})
//第二次触发done方法
.done(function () {
$(".con").append("----------------------------").append("<br/>");
})
//如果ajax执行失败
.fail(function () {
$(".con").append("标题获取出错").append("<br/>");
});
return promise;
}

当我们执行的时候,错误就出来了:

这里提示已经很明显了,并且错误被最后的failCallback给捕获了。

JavaScript及其异步实现续:Promise让一切更简单的更多相关文章

  1. JavaScript的异步编程之Promise

    Promise 一种更优的异步编程统一 方法,如果直接使用传统的回调函数去完成复杂操作就会形成回调深渊 // 回调深渊 $.get('/url1'() => { $.get('/url2'() ...

  2. 漫话JavaScript与异步·第二话——Promise:一诺千金

    一.难以掌控的回调 我在第一话中介绍了异步的概念.事件循环.以及JS编程中可能的3种异步情况(用户交互.I/O.定时器).在编写异步操作代码时,最直接.也是每个JSer最先接触的写法一定是回调函数(c ...

  3. 前端的异步解决方案之Promise和Await-Async

    异步编程模式在前端开发过程中,显得越来越重要.从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题.随着ES6新标准的出来,处理异步数据流的解决方案又有了新的变化.Promise就是这其 ...

  4. Javascript异步编程之三Promise: 像堆积木一样组织你的异步流程

    这篇有点长,不过干货挺多,既分析promise的原理,也包含一些最佳实践,亮点在最后:) 还记得上一节讲回调函数的时候,第一件事就提到了异步函数不能用return返回值,其原因就是在return语句执 ...

  5. [译]理解Javascript的异步等待

    原文链接: https://ponyfoo.com/articles/understanding-javascript-async-await 作者: Nicolás Bevacqua 目前async ...

  6. 理解Javascript的异步等待

    目前async / await特性并没有被添加到ES2016标准中,但不代表这些特性将来不会被加入到Javascript中.在我写这篇文章时,它已经到达第三版草案,并且正迅速的发展中.这些特性已经被I ...

  7. (翻译)异步编程之Promise(1):初见魅力

    原文:https://www.promisejs.org/ by Forbes Lindesay 异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2) ...

  8. 说一说javascript的异步编程

    众所周知javascript是单线程的,它的设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI线程一定不能阻塞,否则体验不佳,甚至界面卡死. 所谓的单线程就是一次只能完成一个任务, ...

  9. js异步原理与 Promise

    一.Javascript的异步原理 javascript 是单线程语言,所以同一时间只执行一个运算.但有些方法是不能瞬间完成或不可预知何时完成的(如网络请求.settimeout等),为了让它们不对后 ...

随机推荐

  1. iOS开发之网络编程--获取文件的MIMEType

    前言:有时候我们需要获取文件的MIMEType的信息,下面就介绍关于获取MIMEType的方法. 1.直接百度搜索关键字"MIMEType",你会找到,然后查吧: 2.用代码获取文 ...

  2. java集合 之 Collection和Iterator接口

    Collection是List,Queue和Set接口的父接口,该接口里定义的方法即可用于操作Set集合,也可以用于List和Queue集合.Collection接口里定义了如下操作元素的方法. bo ...

  3. LeetCode 6 ZigZag Conversion(规律)

    题目来源:https://leetcode.com/problems/zigzag-conversion/ The string "PAYPALISHIRING" is writt ...

  4. setInterval setTimeout clearInterval

    setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). //第一次load的时候就先刷新一次 ...

  5. 提高IT团队工作效率的建议

    过分强调个人主义,不科学分工,内部成员的冲突等,都将导致IT团队没有凝聚力,直接影响团队合作项目的完成.如何提高团队工作效率,相信很多IT经理人都想过这类问题.日前,国外科技网站CIO撰文就如何提高I ...

  6. Android中的Shape使用总结

    参考:http://www.cnblogs.com/gzggyy/archive/2013/05/17/3083218.html 在Android程序开发中,我们经常会去用到Shape这个东西去定义各 ...

  7. 第九章:四大组件之Broadcast Receiver

    第九章:四大组件之Broadcast Receiver   一.广播的功能和特征 广播的生命周期很短,经过调用对象-->实现onReceive-->结束,整个过程就结束了.从实现的复杂度和 ...

  8. Js脚本选取iframe中的元素

    遇到个小问题,需要用到原生Js处理页面中的元素,以往一个document.getElementById就完活的选取元素,这次却不好使了.. 仔细看代码发现要选取元素外面多了一个iframe标签 < ...

  9. [转]Ionic 实现双击返回键退出功能

    本文转自:http://ionichina.com/topic/5514b539b6421f9166aa5f88 一.准备 Toast插件 插件地址:cordova plugin add https: ...

  10. 编写JS代码的“use strict”严格模式及代码压缩知识

    Javascript的语法比较松散,大家对该门语言的印象可能是“简单”,我认为这恰恰相反.使用严格模式能防止你写出粗制滥造的语法代码来.应用了严格模式后尽管控制台报告的某些错误需要很大精力排除,但是从 ...