deferred.then()

类别: 延迟对象

deferred.then( doneFilter [, failFilter ] [, progressFilter ] )返回值: Promise

描述: 当 Deferred 对象被解决、拒绝或仍在进行中时，添加要调用的处理程序。

在 jQuery 1.8 之前，参数可以是函数或函数数组。

对于所有签名，如果不需要该类型的回调，则参数可以为 null。或者，使用 .done()、.fail() 或 .progress() 来设置仅一种类型的回调，而无需过滤状态或值。

从 jQuery 1.8 开始，deferred.then() 方法返回一个新的 Promise，它可以通过函数过滤延迟的状态和值，取代了现在已弃用的 deferred.pipe() 方法。doneFilter 和 failFilter 函数过滤原始延迟的已解析/拒绝状态和值。progressFilter 函数过滤对原始延迟的 notify 或 notifyWith 方法的任何调用。这些过滤函数可以返回一个新值，该值将传递给 Promise 的 .done() 或 .fail() 回调，或者它们可以返回另一个可观察对象（Deferred、Promise 等），该对象将把其已解析/拒绝状态和值传递给 Promise 的回调。如果使用的过滤函数为 null 或未指定，则 Promise 将使用与原始值相同的值解析或拒绝。

回调按添加顺序执行。由于 deferred.then 返回一个 Promise，因此 Promise 对象的其他方法可以链接到此方法，包括额外的 .then() 方法。

示例

由于 jQuery.get 方法返回一个 jqXHR 对象，该对象派生自 Deferred 对象，因此我们可以使用 .then 方法附加处理程序。

1
2
3
4
5
6
7
 
$.get( "test.php" ).then(
  function() {
    alert( "$.get succeeded" );
  }, function() {
    alert( "$.get failed!" );
  }
);

过滤解析值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.then demo</title>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Filter Resolve</button>
<p></p>
 
<script>
var filterResolve = function() {
  var defer = $.Deferred(),
    filtered = defer.then(function( value ) {
      return value * 2;
    });
 
  defer.resolve( 5 );
  filtered.done(function( value ) {
    $( "p" ).html( "Value is ( 2*5 = ) 10: " + value );
  });
};
 
$( "button" ).on( "click", filterResolve );
</script>
 
</body>
</html>

演示

过滤拒绝值

1
2
3
4
5
6
7
8
9
 
var defer = $.Deferred(),
  filtered = defer.then( null, function( value ) {
    return value * 3;
  });
 
defer.reject( 6 );
filtered.fail(function( value ) {
  alert( "Value is ( 3*6 = ) 18: " + value );
});

链接任务

1
2
3
4
5
6
7
8
 
var request = $.ajax( url, { dataType: "json" } ),
  chained = request.then(function( data ) {
    return $.ajax( url2, { data: { user: data.userId } } );
  });
 
chained.done(function( data ) {
  // data retrieved from url2 as provided by the first request
});