집 > 기사 > 웹 프론트엔드 > 반복되는 Ajax 요청을 방지하는 솔루션

반복되는 Ajax 요청을 방지하는 솔루션

亚连원래의: 2018-05-24 11:35:032928검색

이 기사에서는 Ajax 요청의 반복 전송을 방지하는 솔루션을 주로 소개합니다. 관심 있는 친구는 참고할 수 있습니다.

페이지에 여러 개의 버튼이 있으며 버튼을 클릭하면 서버에서 데이터를 비동기적으로 읽을 수 있습니다. 데이터. 각 버튼 클릭으로 요청되는 페이지는 동일하지만 요청 매개변수가 다르기 때문에 반환되는 콘텐츠가 다릅니다. 여러 개의 버튼을 계속 클릭하면 여러 개의 비동기 요청이 발행됩니다. 그런 다음 요청 반환 속도에 따라(다른 버튼 매개 변수가 다르고 반환 내용이 다르기 때문에 속도가 있습니다) 데이터가 순서대로 표시되고 먼저 클릭한 버튼이 나타납니다. 그가 요청한 데이터가 상대적으로 커서 나중에 표시됩니다.

1. 문제 해결

이 문제를 해결하는 방법은 두 가지가 있습니다.

1. 여러 번 요청이 계속되고 요청된 URL 주소가 동일한 경우. 이전 요청을 모두 취소하고 마지막 요청만 실행합니다.
2. 여러 건의 요청이 연속적으로 이루어지고 요청한 URL 주소가 동일한 경우. 모든 후속 요청을 포기하고 첫 번째 요청만 실행합니다.

2. 해결 방법

1. ajax 요청의 비동기를 false

$.ajax({ 
 async: false, 
 type : "POST", 
 url : defaultPostData.url, 
 dataType : &#39;json&#39;, 
 success : function(data) { 

 } 
});

async

로 설정합니다. 올리안
기본값: 참. 기본적으로 모든 요청은 비동기식입니다. 동기 요청을 보내야 하는 경우 이 옵션을 false로 설정하세요.
동기 요청은 브라우저를 잠그고 다른 사용자 작업은 요청이 완료될 때까지 기다려야 실행될 수 있습니다.

2. jquery ajaxPrefilter를 사용하여 요청을 중단하세요

첫 번째 솔루션은 곡선을 통해 국가를 구하는 방법일 뿐이므로 실제로 위의 문제를 해결하지는 않습니다. 따라서 이 방법을 사용하는 것이 좋습니다.

 var pendingRequests = {};
 $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  var key = options.url;
  console.log(key);
  if (!pendingRequests[key]) {
   pendingRequests[key] = jqXHR;
  }else{
   //jqXHR.abort(); //放弃后触发的提交
   pendingRequests[key].abort(); // 放弃先触发的提交
  }

  var complete = options.complete;
  options.complete = function(jqXHR, textStatus) {
   pendingRequests[key] = null;
   if ($.isFunction(complete)) {
   complete.apply(this, arguments);
   }
  };
 });

Prefilters는 각 요청 및 $.ajax()가 이를 처리하기 전에 전송되는 사전 필터입니다.

options은 요청된 옵션입니다.
originalOptions 값은 Ajax 메서드에 제공되는 수정되지 않은 옵션이므로 ajaxSettings 설정에는 기본값이 없습니다.
jqXHR 요청한 jqXHR 객체입니다

위 내용의 핵심 아이디어는 요청을 보내면 요청이 응답된 후 큐에 추가된다는 것입니다. 이렇게 하면 동일한 요청이 언제든지 하나만 전송될 수 있습니다.

제한 사항: 은 jquery의 Ajax 요청을 방지하는 프런트엔드입니다. Jquery가 아닌 Ajax 요청에는 작동하지 않습니다. jquery의 ajaxPreFilter 함수를 사용하기 때문에 jquery ajax 요청에만 작동합니다.

중단을 호출한 후 jquery는 오류 메서드를 실행하고 중단 예외 정보를 발생시킵니다. 이러한 유형의 예외는 다음 방법을 사용하여 구별할 수 있습니다.

var ajax = $.ajax({
 &#39;error&#39;:function(jqXHR, textStatus, errorThrown){
  if(errorThrown != &#39;abort&#39;){
   //ajax被调用abort后执行的方法
   alert(&#39;您的ajax方法被停止了&#39;);
  }
 }
})

3. Demo

버튼을 클릭할 때마다 요청이 백엔드로 전송됩니다. 아래 데모는 버튼을 여러 번 클릭하는 것을 구현하며 마지막으로 클릭한 요청만 성공한다는 것을 보장합니다.

<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>  
<script>
  var pendingRequests = {};
  jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
   var key = options.url;
   console.log(key);
   if (!pendingRequests[key]) {
    pendingRequests[key] = jqXHR;
   }else{
    //jqXHR.abort(); //放弃后触发的提交
    pendingRequests[key].abort(); // 放弃先触发的提交
   }

   var complete = options.complete;
   options.complete = function(jqXHR, textStatus) {
    pendingRequests[key] = null;
    if (jQuery.isFunction(complete)) {
    complete.apply(this, arguments);
    }
   };
  });
  <!-- 异步加载应用列表开始 -->

  $("#button1").live("click", function() {
    $.ajax(&#39;config/ajax/appinfoListFetcher.json&#39;, {
    type:&#39;POST&#39;,
    data: {param1:value1,
       param2:value2,
      },
    success: function(res){
      //后端数据回写到页面中
    },
    error:function(jqXHR, textStatus, errorThrown){
     if(errorThrown != &#39;abort&#39;){
      //ajax被调用abort后执行的方法
      alert(&#39;应用加载失败！&#39;);
     }
    }
    });
    <!-- 异步加载应用列表结束 -->
   });
</script>

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

반복되는 Ajax 요청을 방지하는 솔루션

관련 기사