2021年7月24日 星期六

jQuery.ajax處理繼續響應:“success:”vs“.done”?

success一直是jQuery成功回調的傳統名稱,定義為ajax調用中的一個選項。但是,由於$.Deferreds和更複雜的回調的實現,done是實現成功回調的首選方法,因為它可以在任何deferred上調用。


例如,成功:

$.ajax({
  url: '/',
  success: function(data) {}
});

例如,完成:

$.ajax({url: '/'}).done(function(data) {});

關於done的好處是$.ajax的返回值現在是一個延遲的promise,可以綁定到應用程序中的任何其他位置。所以,假設你想從幾個不同的地方進行這個ajax調用。而不是將成功函數作為執行此ajax調用的函數的選項傳遞,您可以讓函數返回$.ajax本身並使用done,fail,then或其他任何內容綁定回調。請注意,always是一個回調,無論請求成功還是失敗,它都將運行。 done僅在成功時觸發。

例如:

function xhr_get(url) {
  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    beforeSend: showLoadingImgFn
  })
  .always(function() {
    // remove loading image maybe
  })
  .fail(function() {
    // handle request failures
  });

}

xhr_get('/index').done(function(data) {
  // do stuff with index data
});

xhr_get('/id').done(function(data) {
  // do stuff with id data
});

在可維護性方面,這一點的一個重要好處是,您已將ajax機制包裝在特定於應用程序的函數中。如果你決定將來需要$.ajax調用以不同的方式運行,或者你使用不同的ajax方法,或者你不再使用jQuery,你只需要更改xhr_get定義(確保返回一個承諾或至少一種done方法,在上述例子的情況下)。整個應用程序中的所有其他引用可以保持不變。


使用$.Deferred可以做更多(更酷)的事情,其中??一個是使用then來觸發服務器報告的錯誤,即使$.ajax請求本身成功。例如:

function xhr_get(url) {
  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json'
  })
  .then(function(data) {
    return data.responseCode != 200 ?
      $.Deferred().reject( data ) :
      data;
  })
  .fail(function(data) {
    if ( data.responseCode )
      console.log( data.responseCode );
  });
}

xhr_get('/index').done(function(data) {
  // will not run if json returned from ajax has responseCode other than 200
});

沒有留言:

張貼留言