由于jQuery 1.8 .then
的行为与.pipe
:
弃用通知:从 jQuery 1.8 开始,该deferred.pipe()
方法已弃用。deferred.then()
应该使用替代它的方法。
和
从 jQuery 1.8 开始,该deferred.then()
方法返回一个新的 Promise,它可以通过函数过滤 deferred 的状态和值,替换现在已弃用的deferred.pipe()
方法。
下面的示例可能仍然对某些人有所帮助。
它们有不同的用途:
.then()
将在您想要处理过程的结果时使用,即如文档所述,当延迟对象被解决或拒绝时。它与使用.done()
or相同.fail()
。
您会以某种方式.pipe()
(预先)过滤结果。回调的返回值.pipe()
将作为参数传递给done
和fail
回调。它还可以返回另一个延迟对象,并且将在此延迟对象上注册以下回调。
.then()
(或.done()
, )情况并非如此,.fail()
注册回调的返回值将被忽略。
所以不是你使用 .then()
or .pipe()
。您可以将.pipe()
其用于相同的目的,.then()
但反之则不成立。
示例 1
一些操作的结果是一个对象数组:
[{value: 2}, {value: 4}, {value: 6}]
并且您想要计算值的最小值和最大值。假设我们使用两个done
回调:
deferred.then(function(result) {
// result = [{value: 2}, {value: 4}, {value: 6}]
var values = [];
for(var i = 0, len = result.length; i < len; i++) {
values.push(result[i].value);
}
var min = Math.min.apply(Math, values);
/* do something with "min" */
}).then(function(result) {
// result = [{value: 2}, {value: 4}, {value: 6}]
var values = [];
for(var i = 0, len = result.length; i < len; i++) {
values.push(result[i].value);
}
var max = Math.max.apply(Math, values);
/* do something with "max" */
});
在这两种情况下,您都必须遍历列表并从每个对象中提取值。
事先以某种方式提取值不是更好,这样您就不必在两个回调中单独执行此操作吗?是的!这就是我们可以使用.pipe()
的:
deferred.pipe(function(result) {
// result = [{value: 2}, {value: 4}, {value: 6}]
var values = [];
for(var i = 0, len = result.length; i < len; i++) {
values.push(result[i].value);
}
return values; // [2, 4, 6]
}).then(function(result) {
// result = [2, 4, 6]
var min = Math.min.apply(Math, result);
/* do something with "min" */
}).then(function(result) {
// result = [2, 4, 6]
var max = Math.max.apply(Math, result);
/* do something with "max" */
});
显然,这是一个虚构的例子,有很多不同的(也许更好的)方法可以解决这个问题,但我希望它能说明这一点。
示例 2
考虑 Ajax 调用。有时您想在前一个 Ajax 调用完成后启动一个 Ajax 调用。一种方法是在done
回调中进行第二次调用:
$.ajax(...).done(function() {
// executed after first Ajax
$.ajax(...).done(function() {
// executed after second call
});
});
现在让我们假设您想要解耦代码并将这两个 Ajax 调用放在一个函数中:
function makeCalls() {
// here we return the return value of `$.ajax().done()`, which
// is the same deferred object as returned by `$.ajax()` alone
return $.ajax(...).done(function() {
// executed after first call
$.ajax(...).done(function() {
// executed after second call
});
});
}
您想使用延迟对象来允许其他调用makeCalls
附加回调的代码,以便为第二个Ajax 调用附加回调,但是
makeCalls().done(function() {
// this is executed after the first Ajax call
});
不会产生预期的效果,因为第二次调用是在done
回调内部进行的,并且无法从外部访问。
解决方案是.pipe()
改用:
function makeCalls() {
// here we return the return value of `$.ajax().pipe()`, which is
// a new deferred/promise object and connected to the one returned
// by the callback passed to `pipe`
return $.ajax(...).pipe(function() {
// executed after first call
return $.ajax(...).done(function() {
// executed after second call
});
});
}
makeCalls().done(function() {
// this is executed after the second Ajax call
});
通过使用.pipe()
,您现在可以将回调附加到“内部”Ajax 调用,而不会暴露调用的实际流程/顺序。
一般来说,延迟对象提供了一种有趣的方式来解耦你的代码:)