Làm cách nào để hủy/hủy yêu cầu jQuery AJAX?

Question

Tôi đã có yêu cầu AJAX sẽ được thực hiện sau mỗi 5 giây. Nhưng vấn đề là trước yêu cầu AJAX nếu yêu cầu trước đó không được hoàn thành, tôi đã hủy yêu cầu đó và đưa ra yêu cầu mới.

Mã của tôi giống như thế này, cách giải quyết vấn đề này?

$(document).ready(
    var fn = function(){ 
     $.ajax({ 
      url: 'ajax/progress.ftl', 
      success: function(data) { 
       //do something 
      } 
     }); 
    }; 

    var interval = setInterval(fn, 500); 
); 

Answer 1

Phương thức jquery ajax trả về đối tượng XMLHttpRequest. Bạn có thể sử dụng đối tượng này để hủy yêu cầu.

Các XMLHttpRequest có một phương pháp abort, mà hủy bỏ yêu cầu, nhưng nếu yêu cầu đã được gửi đến máy chủ sau đó máy chủ sẽ xử lý yêu cầu thậm chí nếu chúng ta hủy bỏ yêu cầu nhưng khách hàng sẽ không phải chờ đợi/xử lý phản hồi.

Đối tượng xhr cũng chứa readyState chứa trạng thái yêu cầu (UNSENT-0, OPENED-1, HEADERS_RECEIVED-2, LOADING-3 và DONE-4). chúng ta có thể sử dụng điều này để kiểm tra xem yêu cầu trước đó đã được hoàn thành chưa.

$(document).ready(
    var xhr; 

    var fn = function(){ 
     if(xhr && xhr.readyState != 4){ 
      xhr.abort(); 
     } 
     xhr = $.ajax({ 
      url: 'ajax/progress.ftl', 
      success: function(data) { 
       //do something 
      } 
     }); 
    }; 

    var interval = setInterval(fn, 500); 
); 

Answer 2

Tại sao bạn nên hủy yêu cầu?

Nếu mỗi yêu cầu mất hơn năm giây, điều gì sẽ xảy ra?

Bạn không nên hủy yêu cầu nếu tham số truyền với yêu cầu không thay đổi. ví dụ: - yêu cầu để truy xuất dữ liệu thông báo. Trong những trường hợp như vậy, Cách tiếp cận tốt đẹp là thiết lập một yêu cầu mới chỉ sau khi hoàn thành yêu cầu Ajax trước đó.

$(document).ready(

    var fn = function(){ 

     $.ajax({ 
      url: 'ajax/progress.ftl', 
      success: function(data) { 
       //do something 
      }, 

      complete: function(){setTimeout(fn, 500);} 
     }); 
    }; 

    var interval = setTimeout(fn, 500); 

); 

Answer 3

Khi bạn yêu cầu máy chủ, hãy kiểm tra xem liệu tiến trình không phải là rỗng (hoặc tìm nạp dữ liệu đó) trước tiên. Nếu nó đang tìm nạp dữ liệu, hãy hủy yêu cầu trước đó và khởi tạo yêu cầu mới.

var progress = null 

function fn() {  
    if (progress) { 
     progress.abort(); 
    } 
    progress = $.ajax('ajax/progress.ftl', { 
     success: function(data) { 
      //do something 
      progress = null; 
     } 
    }); 
} 

Answer 4

jQuery: Sử dụng điểm khởi đầu này làm nguồn cảm hứng. Tôi giải quyết nó như thế này: (đây không phải là một giải pháp hoàn hảo, nó chỉ hủy bỏ các trường hợp cuối cùng và là mã WIP)

var singleAjax = function singleAjax_constructor(url, params) { 
    // remember last jQuery's get request 
    if (this.lastInstance) { 
     this.lastInstance.abort(); // triggers .always() and .fail() 
     this.lastInstance = false; 
    } 

    // how to use Deferred : http://api.jquery.com/category/deferred-object/ 
    var $def = new $.Deferred(); 

    // pass the deferrer's request handlers into the get response handlers 
    this.lastInstance = $.get(url, params) 
     .fail($def.reject)   // triggers .always() and .fail() 
     .success($def.resolve); // triggers .always() and .done() 

    // return the deferrer's "control object", the promise object 
    return $def.promise(); 
} 


// initiate first call 
singleAjax('/ajax.php', {a: 1, b: 2}) 
    .always(function(a,b,c) {console && console.log(a,b,c);}); 

// second call kills first one 
singleAjax('/ajax.php', {a: 1, b: 2}) 
    .always(function(a,b,c) {console && console.log(a,b,c);}); 
    // here you might use .always() .fail() .success() etc. 

Answer 5

Bạn cũng nên kiểm tra readyState 0. Bởi vì khi bạn sử dụng xhr.abort () chức năng này thiết lập readyState 0 trong đối tượng này, và nếu séc của bạn sẽ luôn luôn đúng - readyState = 4

$(document).ready(
    var xhr; 

    var fn = function(){ 
     if(xhr && xhr.readyState != 4 && xhr.readyState != 0){ 
      xhr.abort(); 
     } 
     xhr = $.ajax({ 
      url: 'ajax/progress.ftl', 
      success: function(data) { 
       //do something 
      } 
     }); 
    }; 

    var interval = setInterval(fn, 500); 
); 

Answer 6

tôi biết điều này có thể là hơi muộn nhưng tôi gặp vấn đề tương tự mà gọi phương thức hủy bỏ didnt thực sự hủy bỏ yêu cầu. thay vào đó, trình duyệt vẫn đang chờ phản hồi mà nó không bao giờ sử dụng. mã này đã giải quyết vấn đề đó.

try { 
     xhr.onreadystatechange = null; 
     xhr.abort(); 
} catch (e) {} 

Answer 7

Bạn có thể sử dụng jquery-validate.js. Sau đây là đoạn mã từ jquery-validate.js.

// ajax mode: abort 
// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]}); 
// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort() 

var pendingRequests = {}, 
    ajax; 
// Use a prefilter if available (1.5+) 
if ($.ajaxPrefilter) { 
    $.ajaxPrefilter(function(settings, _, xhr) { 
     var port = settings.port; 
     if (settings.mode === "abort") { 
      if (pendingRequests[port]) { 
       pendingRequests[port].abort(); 
      } 
      pendingRequests[port] = xhr; 
     } 
    }); 
} else { 
    // Proxy ajax 
    ajax = $.ajax; 
    $.ajax = function(settings) { 
     var mode = ("mode" in settings ? settings : $.ajaxSettings).mode, 
      port = ("port" in settings ? settings : $.ajaxSettings).port; 
     if (mode === "abort") { 
      if (pendingRequests[port]) { 
       pendingRequests[port].abort(); 
      } 
      pendingRequests[port] = ajax.apply(this, arguments); 
      return pendingRequests[port]; 
     } 
     return ajax.apply(this, arguments); 
    }; 
} 

Vì vậy mà bạn chỉ cần chỉ cần đặt tham số chế độ để hủy bỏ khi bạn đang làm theo yêu cầu ajax.

Ref: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js