경고 해결 – [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

jQuery 자바스크립트 작업을 하다보면 다음과 같은 경고를 만나는 경우가 있다.

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

위 경고는 아래의 코드를 실행했을때 생겼다.

jQuery(function() {
  for (var i = 0; i < 10; ++i) {
    $.ajax({
      url: 'test-url',
      async: false,
      success: function(data) {
        ...
      }
    })
  }
})

경고가 발생하는 것은 jQuery 가 1.8 버전부터 async 옵션이 폐기(deprecation)되었다. 대신에 jqXHR.done(), jqXHR.fail(), jqXHR.always() 을 사용할 수 있다.

jQuery 로 페이지 로딩시 ajax 처리를 하는데 동기적으로 처리해야 되는 상황에서 발생했다.

위와 같은 문제가 발생하는 가장 근본적인 원인은 ajax 를 반복문으로 호출하기 때문이다. 따라서 가장 좋은 해결방법은 ajax 를 한번만 호출하도록 변경하는게 최선이다.

하지만 서버측을 변경할 수 없는 환경에서는 사용할 수 없는 방법이다. 차선책으로 이를 해결하기 위해서는 Promise 기법을 사용해야 한다.

jQuery(function() {
  function loadAjax(i, limit) {
    $.ajax({
      url: 'test-url'
    })
    .done(function(data) {
      // success 옵션의 함수와 동일
        ... 
      if (i < limit) {
        loadAjax(i + 1, limit)
      }
    })
    .fail(function(){
      // ajax 호출이 실패하는 경우
    })
  }

  loadAjax(0, 10) // 재귀호출시작!
})

코드는 그럭저럭이지만 재귀적 호출이 되버려서 사실상 콜백지옥인 상황은 동일하다 ㅡ.ㅡ; limit 이 얼마 안된다면 상관없지만 매우 큰수라면 사용하기 힘들것이다.

jQuery.ajax() 공식문서 바로가기 : https://api.jquery.com/jquery.ajax/