jQuery.ajax हैंडलिंग प्रतिक्रियाएँ जारी रखें: "सफलता:" बनाम ".done"?

Question

मैं कुछ हफ्तों से jQuery और AJAX के साथ काम कर रहा हूं और मैंने कॉल करने के बाद स्क्रिप्ट को 'जारी' रखने के दो अलग-अलग तरीके देखे: success:और .done।

हमारे द्वारा प्राप्त jQuery प्रलेखन से सारांश से :

.done (): विवरण: हैंडलर जोड़ें, जिसे डिफर्ड ऑब्जेक्ट हल होने पर कॉल किया जाता है।

सफलता: (.ajax () विकल्प): अनुरोध को सफल होने पर कहा जाने वाला कार्य।

अजाक्स कॉल पूरा होने / हल होने के बाद, दोनों कुछ करते हैं। क्या मैं एक या दूसरे को बेतरतीब ढंग से इस्तेमाल कर सकता हूं? क्या अंतर है और जब एक दूसरे के बजाय प्रयोग किया जाता है?

Answer 1

successajax कॉल में एक विकल्प के रूप में परिभाषित jQuery में सफलता कॉलबैक का पारंपरिक नाम रहा है। हालाँकि, $.Deferredsऔर अधिक परिष्कृत कॉलबैक के कार्यान्वयन के बाद से , doneसफलता कॉलबैक को लागू करने का पसंदीदा तरीका है, क्योंकि इसे किसी भी पर कॉल किया जा सकता है deferred।

उदाहरण के लिए, सफलता:

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

उदाहरण के लिए, किया:

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

इसके बारे doneमें अच्छी बात यह है कि वापसी का मूल्य $.ajaxअब एक आस्थगित वादा है जो आपके आवेदन में कहीं और भी बाध्य हो सकता है। तो चलिए आपको कुछ अलग स्थानों से इस 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, जिनमें से pipeएक सर्वर द्वारा रिपोर्ट की गई त्रुटि पर विफलता को ट्रिगर करने के लिए उपयोग करना है, तब भी जब $.ajaxअनुरोध स्वयं सफल होता है। उदाहरण के लिए:

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

$.Deferredयहाँ और अधिक पढ़ें : http://api.jquery.com/category/deferred-object/

नोट : jQuery के 1.8 के रूप में, बिल्कुल उसी तरह pipeसे उपयोग करने के पक्ष में पदावनत किया गया है then।

Comments

मुझे आश्चर्य है कि कैसे success:/ की बातचीत .done()को परिभाषित किया गया है, यदि बिल्कुल। ईजी इन दिनों success:पहले की तरह लागू है .done()?

आपका मतलब है अगर आपके पास success:और .doneअजाक्स कॉल पर दोनों हैं? अच्छा प्रश्न। चूंकि अन्य सभी कॉलबैक उस क्रम में बुलाए जाते हैं जो वे बाध्य हैं, मेरा अनुमान है हां, successबस पहले कहा जाता है।

— ग्लॉर्थो

बहुत अच्छी पोस्ट! Btw, पाइप कॉलबैक में, क्या आपको स्थिति प्रतिक्रिया के लिए जांच करने के लिए jqXHR पैरामीटर के साथ पाइप फ़ंक्शन को कॉल नहीं करना चाहिए? Ex: .pipe (फंक्शन (डेटा, टेक्स्टस्टैटस, jqXHR) {if (jqXHR.status == 200) {...

— ईडर

@Eder इस उपयोग के साथ जिस परिदृश्य को मैं संबोधित कर रहा हूं pipeवह वह है जहां अनुरोध स्वयं सफल होता है, लेकिन सर्वर पर स्क्रिप्ट वह नहीं लौटाती है जिसे आप ढूंढ रहे थे। आप एक वास्तविक ४०४ या ५०० या सर्वर साइड पर जो कुछ भी फेंकना चाहते हैं क्योंकि आप HTTP प्रतिक्रियाओं और एप्लिकेशन प्रतिक्रियाओं के बीच सार्थक अंतर करना चाहते हैं। JSON में एक प्रतिक्रिया कोड सेट करना और फिर pipeइस तरह से उपयोग करने से आप विभिन्न प्रकार की त्रुटियों को अधिक बारीकियों से संभाल सकते हैं।

— ग्लोरथो

वादों का उपयोग करने का एक अन्य महत्वपूर्ण लाभ यह है कि आपका कोड बहुत अधिक पठनीय हो जाता है और आप 'कॉलबैक नरक' से बच जाते हैं। जब आप कई कॉलबैक करते हैं, जो पिछले समाप्त होने के बाद आप प्रत्येक को चलाना चाहते हैं तो यह स्पष्ट रूप से सच है। वादों के साथ यह myPromiseCall.then (..) की तरह दिखेगा। इसके बाद (..) सफलता विकल्प के साथ उपयोग किए गए कॉलबैक की नेस्टेड जटिल संरचना के बजाय।

— बोर्नटोड कोड

Answer 2

यदि आपको async: falseअपने अजाक्स में जरूरत है, तो आपको successइसके बजाय उपयोग करना चाहिए .done। आप का उपयोग करने के लिए बेहतर है .done। यह jQuery की आधिकारिक साइट से है :

JQuery 1.8 के रूप में, async का उपयोग : jqXHR ($ .Deferred) के साथ गलत को पदावनत किया जाता है; आपको jqXHR.done () जैसे jqXHR ऑब्जेक्ट के संबंधित तरीकों के बजाय सफलता / त्रुटि / पूर्ण कॉलबैक विकल्पों का उपयोग करना चाहिए ।

Comments

किसका जिक्र करें async:false?

— लियाम

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

— अमीरहोसिन मणियन

Answer 3

से JQuery प्रलेखन

JQueryXHR ऑब्जेक्ट्स $.ajax()jQuery 1.5 द्वारा लौटाए गए प्रॉमिस इंटरफ़ेस को लागू करते हैं, उन्हें प्रॉमिस के सभी गुण, तरीके और व्यवहार देते हैं ( अधिक जानकारी के लिए आस्थगित ऑब्जेक्ट देखें)। ये विधियाँ एक या अधिक फ़ंक्शन तर्क लेती हैं जिन्हें $.ajax()अनुरोध समाप्त होने पर कहा जाता है । यह आपको एक ही अनुरोध पर कई कॉलबैक असाइन करने की अनुमति देता है, और अनुरोध पूरा होने के बाद कॉलबैक असाइन करने के लिए भी। (यदि अनुरोध पहले से ही पूरा हो गया है, तो कॉलबैक तुरंत निकाल दिया जाता है।) jqXHR वस्तु के उपलब्ध वादे तरीकों में शामिल हैं:

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

सफलता कॉलबैक विकल्प के लिए एक वैकल्पिक निर्माण, deferred.done()कार्यान्वयन विवरण के लिए देखें।

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

त्रुटि कॉलबैक विकल्प के लिए एक वैकल्पिक निर्माण, .fail()विधि पदावनत .error () विधि की जगह लेती है। कार्यान्वयन विवरणों के लिए deferred.fail () का संदर्भ लें।

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

(jQuery 1.6 में जोड़ा गया) पूर्ण कॉलबैक विकल्प के लिए एक वैकल्पिक निर्माण, .always()विधि पदावनत .complete()विधि की जगह ।

एक सफल अनुरोध के जवाब में, फ़ंक्शन के तर्क समान हैं .done(): डेटा, टेक्स्टस्टैटस, और jqbHR ऑब्जेक्ट। असफल अनुरोधों के लिए तर्क समान हैं .fail(): jqXHR ऑब्जेक्ट, टेक्स्टस्टैटस और एररथ्रोवन। का संदर्भ लें deferred.always()कार्यान्वयन विवरण के लिए।

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

.done()और .fail()(jQuery 1.8 के रूप में), अंतर्निहित वादा में हेरफेर करने की अनुमति के तरीकों और तरीकों की कार्यक्षमता शामिल है । .then()कार्यान्वयन विवरणों के लिए आस्थगित करें।

विरोध का नोटिस:jqXHR.success() , jqXHR.error(), और jqXHR.complete()कॉलबैक jQuery 3.0 के रूप में निकाल दिए जाते हैं। आप उपयोग कर सकते हैं jqXHR.done(),jqXHR.fail() और jqXHR.always()बजाय।