當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery deferred.then()用法及代碼示例


用法 
deferred.then( doneFilter [, failFilter ] [, progressFilter ] ) => Promise

說明：添加要在 Deferred 對象被解析、拒絕或仍在進行中時調用的處理程序。

  • 添加的版本：1.8deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

    • doneFilter
      類型：Function ()
      解析 Deferred 時調用的函數。
    • failFilter
      類型：Function ()
      當 Deferred 被拒絕時調用的可選函數。
    • progressFilter
      類型：Function ()
      當進度通知發送到 Deferred 時調用的可選函數。

  • 添加的版本：1.5，刪除：1.8deferred.then( doneCallbacks, failCallbacks )

    • doneCallbacks
      類型：Function ()
      解析 Deferred 時調用的函數或函數數組。
    • failCallbacks
      類型：Function ()
      當 Deferred 被拒絕時調用的函數或函數數組。

  • 添加的版本：1.7，刪除：1.8deferred.then( doneCallbacks, failCallbacks [, progressCallbacks ] )

    • doneCallbacks
      類型：Function ()
      解析 Deferred 時調用的函數或函數數組。
    • failCallbacks
      類型：Function ()
      當 Deferred 被拒絕時調用的函數或函數數組。
    • progressCallbacks
      類型：Function ()
      當 Deferred 通知進度時調用的函數或函數數組。

在 jQuery 1.8 之前，參數可以是函數或函數數組。

對於所有簽名，如果不需要該類型的回調，則參數可以是null。或者，使用 .done() 、 .fail() 或 .progress() 僅設置一種類型的回調而不過濾狀態或值。

從 jQuery 1.8 開始， 這deferred.then()方法返回一個新的 Promise，它可以通過函數過濾延遲的狀態和值，替換 now-deprecateddeferred.pipe()方法。這doneFilter和failFilter函數過濾原始延遲的已解決/已拒絕狀態和值。這progressFilter函數過濾對原始延遲的任何調用notify或者notifyWith方法。這些過濾器函數可以返回一個新值以傳遞給 Promise 的.done()或者.fail()回調，或者它們可以返回另一個可觀察對象(Deferred、Promise 等)，它將其已解決/拒絕狀態和值傳遞給 Promise 的回調。如果使用的過濾器函數是null, 或未指定，promise 將被解析或拒絕，並使用與原始值相同的值。

回調按照添加的順序執行。由於 deferred.then 返回一個 Promise，因此可以將 Promise 對象的其他方法鏈接到這個，包括額外的 .then() 方法。

例子：

由於 jQuery.get 方法返回一個從 Deferred 對象派生的 jqXHR 對象，我們可以使用 .then 方法附加處理程序。

$.get( "test.php" ).then(
  function() {
    alert( "$.get succeeded" );
  }, function() {
    alert( "$.get failed!" );
  }
);

過濾解析值：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.then demo</title>
  <script src="https://code.jquery.com/jquery-3.5.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>

演示：

過濾拒絕值：

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 );
});

連鎖任務：

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
});

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 deferred.then()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。