ajax abort 지옥에서 탈출하기, 하루종일 삽질일기

와~ 하루를 꼬박 이것때문에.... 개고생했는데, 알고보니 그리 어려운 것이 아니었다는 것에 더.... 힘빠지네요~

ajax로 보내면.. 수많은 abort들

위의 것은 해결된 후에도 딱 한번만 나오면 좋겠는데,

그래도 두번은 나오네요.

이것 알기전에는 보통 3번, 많게는 5번씩 쭈~ 욱 읽는 것...

각설하고 핵심을 남겨놓습니다.

	  
		  var deferred = $.Deferred();
			  
		 // data 전송해서 php 값을 넣기 위해 필요한 구문
			 $.ajax({
				url: URL,
				type: "post",		
				data: $("#board_form").serialize(),
				dataType:"json",
			    timeout: 20000, // 20초
				success : function(data){			
				deferred.resolve(data);
				console.log(data);

deferred를 활용하는것...

사실 이것 이전에 몰랐음...

  // // 중복호출 금지
  // if (ajaxRequest3 !== null) {
  // ajaxRequest3.abort();

이 방법을 주로 썼는데, 안통하는 강한놈을 만남...

하루종일 정말 이것때문에 꼬박 시간을 보냄

불러오기 해서 다시 조회하면...

분명 오류가 없는데 나오지 않는 현상...

다시 코드 정리해서 올려봅니다.

만약 버튼 이외의 이벤트나 함수에서 Ajax 요청을 호출한 후에 실행까지 대기하는 코드가 필요하다면, Deferred 객체를 사용할 수 있습니다. Deferred 객체는 jQuery에서 비동기 작업의 상태를 추적하고, 작업이 완료되었을 때 콜백 함수를 호출할 수 있도록 합니다.

아래 예제 코드에서는 Deferred 객체를 사용하여 Ajax 요청이 완료될 때까지 기다린 후, done() 메소드를 사용하여 콜백 함수를 호출합니다.

function myFunction() {
  var deferred = $.Deferred();
  $.ajax({
    url: 'yourUrl',
    type: 'POST',
    data: yourData,
    success: function(response) {
      console.log(response);
      deferred.resolve(response);
    },
    error: function(xhr, status, error) {
      console.log(error);
      deferred.reject(error);
    }
  });
  return deferred.promise();
}

myFunction().done(function(response) {
  // Ajax 요청이 완료된 후 실행할 코드
  console.log('Ajax 요청이 완료되었습니다.');
});

 

위 코드에서 myFunction() 함수에서 Deferred 객체를 생성한 후, Ajax 요청을 실행합니다. Ajax 요청이 완료될 때, resolve() 메소드를 호출하여 상태를 변경합니다. 이후 promise() 메소드를 사용하여 Deferred 객체를 반환하고, done() 메소드를 사용하여 콜백 함수를 등록합니다.

myFunction() 함수를 호출하면, Ajax 요청이 완료될 때까지 promise() 객체를 반환합니다. 이후 done() 메소드가 실행되어 Ajax 요청이 완료된 후에 실행할 코드를 작성할 수 있습니다.