एक jquery AJAX अनुरोध का पुनः प्रयास करें जिसमें इसके स्थगित

Question

से कॉलबैक संलग्न हैं I अस्थायी कारणों से विफल होने वाले AJAX अनुरोधों को पुनः प्रयास करने की एक प्रणाली को लागू करने का प्रयास कर रहा हूं। मेरे मामले में, यह उन अनुरोधों को पुनः प्रयास करने के बारे में है जो 401 स्थिति कोड के साथ विफल रहे क्योंकि सत्र को समाप्त करने के बाद सत्र को समाप्त करने के बाद सत्र समाप्त हो गया है।

समस्या यह है कि "सफलता" AJAX विकल्प कॉलबैक के विपरीत, "पूर्ण" कॉलबैक को एक सफल पुनः प्रयास पर नहीं कहा जाता है। किया शैली कॉलबैक एक सफल पुन: प्रयास पर कहा जाता है के लिए

$.ajaxSetup({statusCode: { 
    404: function() { 
     this.url = '/existent_url'; 
     $.ajax(this); 
    } 
}}); 

$.ajax({ 
    url: '/inexistent_url', 
    success: function() { alert('success'); } 
}) 
.done(function() { 
    alert('done'); 
}); 

वहाँ एक रास्ता है: मैं नीचे एक सरल उदाहरण बना हुआ है? मुझे पता है कि स्थगित 'अस्वीकार' के बाद 'हल' किया जा सकता है, क्या यह अस्वीकार करना संभव है? या हो सकता है कि मूल स्थगित किए गए मूल की प्रतिलिपि को एक नए स्थगित कर दें? मैं विचारों से बाहर हूं :)

नीचे एक और यथार्थवादी उदाहरण, जहां मैं सभी 401-अस्वीकृत अनुरोधों को कतारबद्ध करने का प्रयास कर रहा हूं, और सफल कॉल/रीफ्रेश के बाद उन्हें पुनः प्रयास कर रहा हूं।

var refreshRequest = null, 
    waitingRequests = null; 

var expiredTokenHandler = function(xhr, textStatus, errorThrown) { 

    //only the first rejected request will fire up the /refresh call 
    if(!refreshRequest) { 
     waitingRequests = $.Deferred(); 
     refreshRequest = $.ajax({ 
      url: '/refresh', 
      success: function(data) { 
       // session refreshed, good 
       refreshRequest = null; 
       waitingRequests.resolve(); 
      }, 
      error: function(data) { 
       // session can't be saved 
       waitingRequests.reject(); 
       alert('Your session has expired. Sorry.'); 
      } 
     }); 
    } 

    // put the current request into the waiting queue 
    (function(request) { 
     waitingRequests.done(function() { 
      // retry the request 
      $.ajax(request); 
     }); 
    })(this); 
} 

$.ajaxSetup({statusCode: { 
    401: expiredTokenHandler 
}}); 

तंत्र काम करता है, 401-असफल अनुरोध को दूसरी बार निकाल दिया, समस्या उनकी 'पूर्ण' कॉलबैक कहा जाता है नहीं मिलता है, तो अनुप्रयोगों स्टालों।

Answer 1

आप jQuery.ajaxPrefilter का उपयोग एक और deferred object में jqXHR रैप करने के लिए कर सकता है।

मैं jsFiddle कि यह काम कर रहा से पता चलता पर एक उदाहरण बना है, और इस संस्करण में 401 को संभालने के लिए अपने कोड के कुछ अनुकूल करने के लिए करने की कोशिश की:

$.ajaxPrefilter(function(opts, originalOpts, jqXHR) { 
    // you could pass this option in on a "retry" so that it doesn't 
    // get all recursive on you. 
    if (opts.refreshRequest) { 
     return; 
    } 

    // our own deferred object to handle done/fail callbacks 
    var dfd = $.Deferred(); 

    // if the request works, return normally 
    jqXHR.done(dfd.resolve); 

    // if the request fails, do something else 
    // yet still resolve 
    jqXHR.fail(function() { 
     var args = Array.prototype.slice.call(arguments); 
     if (jqXHR.status === 401) { 
      $.ajax({ 
       url: '/refresh', 
       refreshRequest: true, 
       error: function() { 
        // session can't be saved 
        alert('Your session has expired. Sorry.'); 
        // reject with the original 401 data 
        dfd.rejectWith(jqXHR, args); 
       }, 
       success: function() { 
        // retry with a copied originalOpts with refreshRequest. 
        var newOpts = $.extend({}, originalOpts, { 
         refreshRequest: true 
        }); 
        // pass this one on to our deferred pass or fail. 
        $.ajax(newOpts).then(dfd.resolve, dfd.reject); 
       } 
      }); 

     } else { 
      dfd.rejectWith(jqXHR, args); 
     } 
    }); 

    // NOW override the jqXHR's promise functions with our deferred 
    return dfd.promise(jqXHR); 
}); 

यह काम करता है क्योंकि deferred.promise(object) वास्तव में "वादा के सभी के ऊपर लिख देगा विधियों "jqXHR पर।

नोट: किसी और को करने के लिए, यह लग रहा है, तो आप success: और ajax विकल्पों में error: साथ कॉलबैक संलग्न कर रहे हैं, इस स्निपेट होगा नहीं काम जिस तरह से आप उम्मीद करते हैं। यह मानता है कि jqXHR के .done(callback) और .fail(callback) विधियों का उपयोग करके केवल कॉलबैक संलग्न किए गए हैं।

Answer 2

क्या यह आपके लिए कुछ काम करेगा? आपको बस अपना खुद का डिफर्ड/वादा वापस करने की आवश्यकता है ताकि मूल व्यक्ति को जल्द ही अस्वीकार नहीं किया जा सके।

उदाहरण/परीक्षण उपयोग: http://jsfiddle.net/4LT2a/3/

function doSomething() { 
    var dfr = $.Deferred(); 

    (function makeRequest() { 
     $.ajax({ 
      url: "someurl", 
      dataType: "json", 
      success: dfr.resolve, 
      error: function(jqXHR) { 
       if (jqXHR.status === 401) { 
        return makeRequest(this); 
       } 

       dfr.rejectWith.apply(this, arguments); 
      } 
     }); 
    }()); 

    return dfr.promise(); 
} 

Answer 3

मैंने इस उपयोग के मामले के लिए jQuery plugin बनाया है। यह प्लगइन में gnarf के उत्तर में वर्णित तर्क को लपेटता है और अतिरिक्त रूप से आपको AJAX कॉल को फिर से प्रयास करने से पहले प्रतीक्षा करने के लिए टाइमआउट निर्दिष्ट करने की अनुमति देता है। उदाहरण के लिए।

//this will try the ajax call three times in total 
//if there is no error, the success callbacks will be fired immediately 
//if there is an error after three attempts, the error callback will be called 

$.ajax(options).retry({times:3}).then(function(){ 
    alert("success!"); 
}); 

//this has the same sematics as above, except will 
//wait 3 seconds between attempts 
$.ajax(options).retry({times:3, timeout:3000}).retry(3).then(function(){ 
    alert("success!"); 
}); 

Answer 4

जैसा कि gnarf के उत्तर नोट्स, सफलता और त्रुटि कॉलबैक अपेक्षित व्यवहार नहीं करेंगे। यदि कोई यहां रुचि रखता है तो वह संस्करण है जो success और error कॉलबैक के साथ-साथ वादे शैली की घटनाओं दोनों का समर्थन करता है।

$.ajaxPrefilter(function (options, originalOptions, jqXHR) { 

    // Don't infinitely recurse 
    originalOptions._retry = isNaN(originalOptions._retry) 
     ? Common.auth.maxExpiredAuthorizationRetries 
     : originalOptions._retry - 1; 

    // set up to date authorization header with every request 
    jqXHR.setRequestHeader("Authorization", Common.auth.getAuthorizationHeader()); 

    // save the original error callback for later 
    if (originalOptions.error) 
     originalOptions._error = originalOptions.error; 

    // overwrite *current request* error callback 
    options.error = $.noop(); 

    // setup our own deferred object to also support promises that are only invoked 
    // once all of the retry attempts have been exhausted 
    var dfd = $.Deferred(); 
    jqXHR.done(dfd.resolve); 

    // if the request fails, do something else yet still resolve 
    jqXHR.fail(function() { 
     var args = Array.prototype.slice.call(arguments); 

     if (jqXHR.status === 401 && originalOptions._retry > 0) { 

      // refresh the oauth credentials for the next attempt(s) 
      // (will be stored and returned by Common.auth.getAuthorizationHeader()) 
      Common.auth.handleUnauthorized(); 

      // retry with our modified 
      $.ajax(originalOptions).then(dfd.resolve, dfd.reject); 

     } else { 
      // add our _error callback to our promise object 
      if (originalOptions._error) 
       dfd.fail(originalOptions._error); 
      dfd.rejectWith(jqXHR, args); 
     } 
    }); 

    // NOW override the jqXHR's promise functions with our deferred 
    return dfd.promise(jqXHR); 
}); 

Answer 5

यह एक महान सवाल है कि मैं अभी भी सामना करना पड़ा है।

मैं स्वीकार किए जाते हैं जवाब (@gnarf से) से भयभीत था, तो मैं एक तरीका है कि मैं आसान समझा पता लगा:

 var retryLimit = 3; 
     var tryCount = 0; 
     callAjax(payload); 
     function callAjax(payload) { 
      tryCount++; 
      var newSaveRequest = $.ajax({ 
       url: '/survey/save', 
       type: 'POST', 
       data: payload, 
       headers: { 
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
       }, 
       error: function (xhr, textStatus, errorThrown) { 
        if (textStatus !== 'abort') { 
         console.log('Error on ' + thisAnswerRequestNum, xhr, textStatus, errorThrown); 
         if (tryCount <= retryLimit) { 
          sleep(2000).then(function() { 
           if ($.inArray(thisAnswerRequestNum, abortedRequestIds) === -1) { 
            console.log('Trying again ' + thisAnswerRequestNum); 
            callAjax(payload);//try again 
           } 
          }); 
          return; 
         } 
         return; 
        } 
       } 
      }); 
      newSaveRequest.then(function (data) { 
       var newData = self.getDiffFromObjects(recentSurveyData, data); 
       console.log("Answer was recorded " + thisAnswerRequestNum, newData);//, data, JSON.stringify(data) 
       recentSurveyData = data; 
      }); 
      self.previousQuizAnswerAjax = newSaveRequest; 
      self.previousQuizAnswerIter = thisAnswerRequestNum; 
     } 


function sleep(milliseconds) { 
    return new Promise((resolve) => setTimeout(resolve, milliseconds)); 
} 

असल में, मैं सिर्फ पूरे अजाक्स कॉल और अपनी कॉलबैक लिपटे एक समारोह में जिसे रिकर्सिवली कहा जा सकता है।