prosource

jQuery.ajax() 메서드의 비동기 옵션이 폐지되었습니다.이제 어떻게 해야 하나요?

probook 2023. 2. 22. 22:19
반응형

jQuery.ajax() 메서드의 비동기 옵션이 폐지되었습니다.이제 어떻게 해야 하나요?

jQuery 1.8에서는async:falsejQuery.ajax()권장되지 않습니다.
그러나 백그라운드에서 AJAX 통신이 진행 중일 때 "로딩 화면"이 있는 웹 페이지를 몇 개 보셨습니까?나는 아마 수천 개를 봤을 것이다.

제가 언어 파일을 로드해야 하는 모바일 앱을 쓰고 있는 경우입니다.처음에 언어 파일을 로드하고 언어 파일에서 버튼 및 기타 GUI 요소의 텍스트를 가져옵니다.

이건 나한테 정말 안 좋아.언어 파일이 없으면 GUI가 표시되지 않기 때문입니다.그럼 어떻게 해결하죠?내 모든 코드를success콜백?그건 좋은 코딩 연습이 아닌 것 같아.다른 방법으로 해결할 수 있을까요?

해결책은 사용자가 인터페이스와 상호 작용하지 않도록 오버레이를 수동으로 추가한 후 AJAX 쿼리가 완료되면 오버레이를 삭제하는 것입니다.

$(function() {
    show_overlay();        

    $.ajax({
        // Query to server
    }).done(function() {
        // Verify good data
        // Do stuff
        remove_overlay();
    });
});

이 파라미터의 권고에 관한 공식 토론을 티켓에서 읽었는데, 제가 이해한 내용은 다음과 같습니다.

  • 문제는 동기 AJAX에 대한 Promise(1)를 구현하면 오버헤드가 발생한다는 것입니다.

  • Sync AJAX에는 페이지 언로드 전 상태 보존과 같은 실제 사용 사례가 많이 있습니다.따라서 이 기능은 그대로 유지되지만 사용 방법은 변경될 수 있습니다.

  • 가장 가까운 솔루션(1.8?)은 콜백만 지원하는 것입니다(약속은 지원하지 않습니다).asyncfalse.

결론:계속 사용async: false단, 그 결점(VM 차단)에 주의해 주십시오.걱정하지 마세요.이 기능이 에서 삭제될 경우 대체 기능이 제공됩니다.

AJAX 호출을 기다리는 동안 1000페이지 중 많은 페이지가 실제로 UI를 차단하지는 않을 것입니다.대신에, 콜이 발신되었을 때에, 대기 화면을 사용해 UI 를 흐리게 하고 나서, 응답 핸들러로 그 UI 를 삭제합니다.

UI를 숨기는 방법에는 여러 가지가 있습니다(모달로 설정되어 있고 이스케이프 버튼이나 닫기 버튼이 없는 jQuery UI Dialog를 사용할 수도 있습니다).그 결정은 당신에게 맡기겠습니다.하지만 코드의 레이아웃은 다음과 같습니다.

var someFunction = function () {

    // any pre-conditions to the logic
    // obscure the UI here

    $.ajax({
        url: 'ajax/test.html',
        success: function(data) {

            // handle the response
            // show the UI again

        },
        error: function(data) {

            // handle the response
            // show the UI again

        }
    }); 
}

그 순서를 달성하는 방법은 여러 가지가 있겠지만 그게 일반적인 생각입니다.UI를 차단하는 것은 결코 의도된 것이 아니며, jQuery가 해당 기능을 포함하는 제거보다 더 어려운 결정이었다고 생각합니다.비동기식이야.

간단한 해결책은 Ajax 콜 성공 시 콜백으로 함수를 호출하고 Ajax 콜 결과를 전달하는 것입니다.

예를 들어 다음과 같습니다.

function getPetInfo(petid,callback){

  $.ajax({
    url: 'get-petinfo.php',
    type: 'GET',
    async: false,
    data: {
      cache: false,
      petid: petid
    },
    success: function(data) {
      var dataobject = JSON.parse(data);
      callback(dataobject);
    }
  });
}

왜 이 파일을 얻기 위해 에이잭스를 사용했을까요?를 사용하여 포함하기만 하면 됩니다.script붙이다

어떤 경우에도 모든 코드를 onSuccess에 넣는 것이 아니라 코드 실행을 시작하는 단일 함수를 호출합니다.

언급URL : https://stackoverflow.com/questions/11448011/jquery-ajax-methods-async-option-deprecated-what-now

반응형