jQuery.ajax işleme yanıtlara devam ediyor: “başarı:” vs “.done”?


309

Birkaç hafta boyunca jQuery ve AJAX ile çalışıyorum ve arama yapıldıktan sonra senaryoya 'devam etmenin' iki farklı yolunu gördüm: success:ve .done.

JQuery dokümantasyonunun özetinden şunu elde ederiz:

.done (): Açıklama: Ertelenmiş nesne çözüldüğünde çağrılacak işleyicileri ekleyin.

success: (.ajax () option): İstek başarılı olursa çağrılacak bir işlev.

Bu nedenle, her ikisi de AJAX çağrısı tamamlandıktan / çözüldükten sonra bir şeyler yapar. Birini veya diğerini rastgele kullanabilir miyim? Fark nedir ve biri diğeri yerine ne zaman kullanılır?

Yanıtlar:


469

successajax çağrısında bir seçenek olarak tanımlanan jQuery'de başarılı geri aramanın geleneksel adı olmuştur. Ancak, $.Deferredsgeri çağrıların uygulanması ve daha karmaşık doneolması nedeniyle, herhangi bir şekilde çağrılabileceğinden, başarı geri çağrılarını uygulamanın tercih edilen yoludur deferred.

Örneğin, başarı:

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

Örneğin, yapıldı:

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

Bununla ilgili güzel bir şey done, dönüş değerinin $.ajaxartık başvurunuzda başka herhangi bir yere bağlanabilecek ertelenmiş bir vaat olmasıdır. Diyelim ki bu ajax çağrısını birkaç farklı yerden yapmak istiyorsunuz. Aksine bu ajax çağrı yapan işlevine bir seçenek olarak başarı işlevinde geçen daha, sadece fonksiyon getirisine sahip olabilir $.ajaxkendisi ve bağlama ile geri aramalar done, fail, then, ya da her neyse. alwaysBu isteğin başarılı olup olmadığını çalıştıracak bir geri arama olduğunu unutmayın . doneyalnızca başarı ile tetiklenir.

Örneğin:

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

Bunun sürdürülebilirlik açısından önemli bir yararı, ajax mekanizmanızı uygulamaya özgü bir fonksiyona sarmış olmanızdır. $.ajaxÇağrınızın gelecekte farklı şekilde çalışmasına ihtiyacınız olduğuna veya farklı bir ajax yöntemi kullandığınıza karar verirseniz veya jQuery'den uzaklaşırsanız, yalnızca xhr_gettanımı (bir söz veya en azından bir doneyöntem döndürdüğünüzden emin olarak ) yukarıdaki örnek için). Uygulamadaki diğer tüm referanslar aynı kalabilir.

Yapabileceğiniz çok daha fazla (çok daha serin) şey var $.Deferred, bunlardan biri pipe, $.ajaxisteğin kendisi başarılı olsa bile, sunucu tarafından bildirilen bir hatada bir hatayı tetiklemek için kullanmaktır . Örneğin:

function xhr_get(url) {

  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json'
  })
  .pipe(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
});

$.DeferredBurada daha fazla bilgi bulabilirsiniz: http://api.jquery.com/category/deferred-object/

NOT : jQuery 1.8 itibariyle , aynı şekilde pipekullanılması lehine kullanımdan kaldırılmıştır then.


2
success:/ .done()Varsa , etkileşimlerinin nasıl tanımlandığını merak ediyorum . Örneğin, bu günlerde success:ilk olarak .done()mı uygulanıyor ?

6
Her ikiniz de varsa success:ve .doneajax çağrınız varsa? İyi soru. Diğer tüm geri aramalar, bağlı oldukları sırayla çağrıldığından, tahminim evet, successilk önce çağrılıyor.
glortho

1
Çok güzel gönderi! Btw, boru geri çağrısında durum yanıtını kontrol etmek için jqXHR parametresiyle boru işlevini çağırmıyor musunuz? Örn: .pipe (işlev (veri, textStatus, jqXHR) {if (jqXHR.status == 200) {...
Eder

@Eder Bu kullanımı ile ele aldığım senaryo pipe, isteğin kendisinin başarılı olduğu, ancak sunucudaki komut dosyasının aradığınızı döndürmediği senaryodur. Http yanıtları ve uygulama yanıtları arasında anlamlı bir ayrım yapmak istediğiniz için, sunucu tarafına gerçek bir 404 veya 500 veya başka bir şey atmak istemeyebilirsiniz. JSON'da bir yanıt kodu ayarlamak ve daha sonra pipebu şekilde kullanmak, farklı türdeki hataları daha fazla ayrıntıyla ele almanızı sağlar.
glortho

Vaat kullanmanın bir diğer önemli yararı da kodunuzun daha okunaklı olması ve 'geri arama cehenneminden' kaçınmanızdır. Önceki bitirdikten sonra her birini çalıştırmak istediğiniz birden çok geri çağrınız olduğunda bu özellikle doğrudur. Sözlerle, başarı seçeneği ile kullanılan geri çağrıların iç içe karmaşık yapısı yerine myPromiseCall.then (..).
BornToCode

5

async: falseAjax'ınıza ihtiyacınız varsa , successyerine kullanmalısınız .done. Başka kullanmak daha iyi .done. Bu jQuery resmi sitesinden :

JQuery 1.8 itibariyle kullanımı zaman uyumsuz: false jqXHR ($ .Deferred) ile kullanımdan kaldırıldı; Eğer gerekir kullanmak başarı / hata / komple geri arama seçeneklerini yerine gibi jqXHR nesnesinin karşılık gelen yöntemlerle () jqXHR.done .


Kim demiş async:false?
Liam

$.ajax({ url: req_url, ..., async: false, success: function (result, status, req) { }, error: function (jqXHR, status) { } });
AmirHossein Manian

0

Gönderen JQuery Belgeler

$.ajax()JQuery 1.5 itibarıyla döndürülen jqXHR nesneleri bir Promise'ın tüm özelliklerini, yöntemlerini ve davranışını vererek Promise arabirimini uygular ( daha fazla bilgi için bkz. Ertelenmiş nesne ). Bu yöntemler, $.ajax()istek sona erdiğinde çağrılan bir veya daha fazla işlev bağımsız değişkeni alır . Bu, tek bir istek üzerine birden çok geri arama atamanıza ve hatta istek tamamlandıktan sonra geri çağrı atamanıza olanak tanır. (İstek zaten tamamlanmışsa, geri arama hemen tetiklenir.) JqXHR nesnesinin Kullanılabilir Promise yöntemleri şunları içerir:

jqXHR.done(function( data, textStatus, jqXHR ) {});

Başarılı geri arama seçeneğine alternatif bir yapı, deferred.done()uygulama ayrıntıları için bakın.

jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

Hata geri arama seçeneğine alternatif bir yapı olan .fail()yöntem, kullanımdan kaldırılmış .error () yönteminin yerini alır. Uygulama ayrıntıları için deferred.fail () öğesine bakın.

jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { }); 

(jQuery 1.6'ya eklenmiştir) Tam geri arama seçeneğine alternatif bir yapı olan .always()yöntem kullanımdan kaldırılan .complete()yöntemin yerini alır .

Başarılı bir isteğe yanıt olarak, işlevin bağımsız değişkenleri şu .done()verilerle aynıdır : data, textStatus ve jqXHR nesnesi. Başarısız istekler için bağımsız değişkenler aşağıdakilerle aynıdır .fail(): jqXHR nesnesi, textStatus ve errorThrown. deferred.always()Uygulama ayrıntıları için başvurun .

jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});

Altta yatan Sözün (jQuery 1.8'den itibaren) manipüle edilmesine izin veren .done()ve .fail()yöntemlerinin işlevselliğini içerir . .then()Uygulama ayrıntıları için ertelenenlere bakın .

Eskime Uyarı:jqXHR.success() , jqXHR.error()ve jqXHR.complete()geri çağrıları jQuery 3.0 olarak çıkarılır. Sen kullanabilirsiniz jqXHR.done(), jqXHR.fail()ve jqXHR.always()bunun yerine.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.