Javascript异步编程模型Promise模式详细介绍
Promise 编程模式也被称为 thenable，可以理解为 延迟后执行。每个 Promise 都拥有一个叫做 then 的唯一接口，当 Promise 失败或成功时，它就会进行回调。它代表了一种可能会长时间运行而且不一定必须完成的操作结果。这种模式不会阻塞和等待长时间的操作完成，而是返回一个代表了承诺的（promised）结果的对象。
当前的许多 JavaScript 库（如 jQuery 和 Dojo、AngularJS）均添加了这种称为 Promise 的抽象。通过这些库，开发人员能够在实际编程中使用 Promise 模式。
下面我们将以 jQuery 为例讨论 JavaScript 库是如何使用 Promise 模式的来处理异步的，其实就是通过回调的方式提供容错支持。在某个操作成功或失败或任何情况下都执行对应的回调，尽量把某段逻辑可能出现的情况都 handle 住。
首先让我们来看看 jQuery 一般是如何操作的：
var $info = $("#info");
$.ajax({
url:"/echo/json/",
data: { json: JSON.stringify({"name": "someValue"}) },
type:"POST",
success: function(response)
{
$info.text(response.name);
}
});
在这个例子中，你可以看到当设置成功后会指定一个回调，是一种很好的回调方式，这并不是 Promise，jQuery 官方文档也不再推荐这种方式（http://api.jquery.com/jQuery.ajax/#jqXHR）。 当 Ajax 调用完成后，它便会执行 success 函数。根据库所使用的异步操作，你可以使用各种不同的回调（即任务是否成功，都会进行回调，做出响应）。使用 Promise 模式会简化这个过程，异步操作只需返回一个对象调用。这个 Promise 允许你调用一个叫做 then 的方法，然后让你指定回调的 function(s) 个数。
下面让我们来看看 jQuery 是如何建立 Promise 的：
var $info = $("#info");
$.ajax({
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.then(function (response) {
$info.text(response.name);
});
jQuery ajax 对象通过返回 xhr 对象实现 Promise 模式，所以我们可以调用 then 方法，这样做的优势是你可以链式调用，实现独立操作，如下所示 ：
var $info = $("#info");
$.ajax({
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.then(function (response) {
$info.text(response.name);
})
.then(function () {
$info.append("...More");
})
.done(function () {
$info.append("...finally!");
});
由于许多库都开始采用 Promise 模式，所以异步操作会变的非常容易。但如果站在相反的角度思考，Promise 将会是什么样子的呢？其中一个非常重要的模式是函数可以接受两种功能，一个是成功时的回调，另一个是失败时的回调。
var $info = $("#info");
$.ajax({
// Change URL to see error happen
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.then(function (response) {
// success
$info.text(response.name);
},
function () {
// failure
$info.text("bad things happen to good developers");
})
.always(function () {
$info.append("...finally");
});
需要注意的是，在 jQuery 里，无论成功还是失败，我们都会使用一个调用来指定我们想要调用的。
其实这里也可以这样来写，这也是 jQuery 官方文档里推荐的方法：
var $info = $("#info");
$.ajax({
// Change URL to see error happen
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.done(function (response) {
// success
$info.text(response.name);
}).fail(function () {
// failure
$info.text("bad things happen to good developers");
})
.always(function () {
$info.append("...finally");
});
下面再来看看 AngularJS 是如何使用 Promise 模式的：
var m = angular.module("myApp", []);
m.factory("dataService", function ($q) {
function _callMe() {
var d = $q.defer();
setTimeout(function () {
d.resolve();
//defer.reject();
}, 100);
return d.promise;
}
return {
callMe: _callMe
};
});
function myCtrl($scope, dataService) {
$scope.name = "None";
$scope.isBusy = true;
dataService.callMe()
.then(function () {
// Successful
$scope.name = "success";
},
function () {
// failure
$scope.name = "failure";
})
.then(function () {
// Like a Finally Clause
$scope.isBusy = false;
});
}
你可以在 JSFiddle 里试试这些例子，并且看看会产生哪些效果。使用 Promise 来操作异步是一种非常简单的方式，而且还可以简化你的代码，确实是一举两得的好方法。
更多关于Promise的介绍及示例，可以前往官网（http://www.promisejs.org/）查看。
相关文章
本篇文章主要介绍了聊聊JS动画库 Velocity.js的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
webpack以其丰富的功能和灵活的配置而深受业内吹捧，逐步取代了grunt和gulp成为大多数前端工程实践中的首选，这篇文章主要介绍了浅谈webpack 构建性能优化策略小结，感兴趣的小伙伴们可以参考一下2018-06-06
第3次遇到这个问题，于是总结了一下，将此短文发在首页，希望对浏览器事件机制有所了解的大侠们给予解答2010-12-12
给指定元素的后面追加一些自己想要实现的效果或者是一些属性之类的，有木有遇到过，接下来为大家详细介绍下追加的实现代码，感兴趣的朋友可以参考下哈2013-04-04
js如何获取系统的根路径，在本文给出了详细的方法，感兴趣的朋友可以参考下，希望对大家有所帮助2013-09-09
javascript中的this应用非常广泛，对js中this总是似是而非的感觉，今天小编豁然开朗，然后再次给大家谈论js中的this关键，感兴趣的朋友跟着小编一起看看吧2016-06-06
对于javascript的开发人员来说，多浏览器的支持性，一直是个问题，每次都要经过测试，多个浏览器，才能使用下面一些常见的一些注意事项。2009-01-01
这篇文章主要为大家介绍了你不知道的Git log竟然还有这种用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了JavaScript获取一个范围内日期的方法,涉及javascript操作日期的相关技巧,需要的朋友可以参考下2015-04-04
JavaScript 实现类似Express的中间件系统(实例详解)
在 Express 中可以给一个请求设置若干个中间件，在处理响应时会按顺序执行这些中间件，正在执行的中间件可以控制是否执行下一个中间件，这篇文章主要介绍了JavaScript 实现类似Express的中间件系统的相关资料,需要的朋友可以参考下2023-02-02
最新评论