[javascript] 비동기식 Ajax 요청이 아닌 동기식 jQuery를 수행하려면 어떻게해야합니까?


Answers

jQuery의 Ajax 설정을 호출하여 동기 모드로 설정할 수있다.

jQuery.ajaxSetup({async:false});

그런 다음 jQuery.get( ... ); 사용하여 Ajax 호출을 수행하십시오 jQuery.get( ... );

그런 다음 한 번만 다시 켜십시오.

jQuery.ajaxSetup({async:true});

아마 @Adam이 제안한 것과 똑같은 방식으로 작동하지만 jQuery.get() 또는 jQuery.post() 를보다 정교한 jQuery.ajax() 구문으로 재구성하려는 사람에게 도움이 될 수 있습니다.

Question

표준 확장 점을 제공하는 JavaScript 위젯이 있습니다. 그 중 하나가 beforecreate 함수입니다. 항목이 작성되지 않게하려면 false 를 리턴해야합니다.

jQuery를 사용하여이 함수에 Ajax 호출을 추가했다.

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

하지만 내 위젯이 항목을 생성하는 것을 막으려 고하므로 콜백이 아닌 모 기능에서 false 를 반환해야합니다. jQuery 또는 다른 API를 사용하여 동기화 된 Ajax 요청을 수행하는 방법이 있습니까?




이것은 jQuery로 ASYNC 요청에 대한 간단한 구현이다. 나는이 도움이되기를 바랍니다.

var queueUrlsForRemove = [
    'http://dev-myurl.com/image/1', 
    'http://dev-myurl.com/image/2',
    'http://dev-myurl.com/image/3',
];

var queueImagesDelete = function(){

    deleteImage( queueUrlsForRemove.splice(0,1), function(){
        if (queueUrlsForRemove.length > 0) {
            queueImagesDelete();
        }
    });

}

var deleteImage = function(url, callback) {
    $.ajax({
        url: url,
        method: 'DELETE'
    }).done(function(response){
        typeof(callback) == 'function' ? callback(response) : null;
    });
}

queueImagesDelete();



async: false 를 사용하면 차단 된 브라우저를 사용할 수 있습니다. 비 차단 동기 솔루션의 경우 다음을 사용할 수 있습니다.

ES6 / ECMAScript2015

ES6를 사용하면 생성기 및 공동 라이브러리를 사용할 수 있습니다.

beforecreate: function (node, targetNode, type, to) {
    co(function*(){  
        let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    });
}

ES7

ES7을 사용하면 asyc를 사용할 수 있습니다.

beforecreate: function (node, targetNode, type, to) {
    (async function(){
        let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    })(); 
}



이 모든 대답은 async : Aalse로 Ajax 호출을하면 Ajax 요청이 완료 될 때까지 브라우저가 정지하게된다는 점을 놓치고있다. 흐름 제어 라이브러리를 사용하면 브라우저를 끊지 않고이 문제를 해결할 수 있습니다. 다음은 Frame.js 의 예입니다.

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}



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

$.ajax({
  url: "test.html",
  async: false
}).done(function(data) {
   // Todo something..
}).fail(function(xhr)  {
   // Todo something..
});



JSONP 를 사용하여 교차 도메인 Ajax 호출을 수행하는 경우 동기식으로 수행 할 수 없으며 async 플래그는 jQuery에서 무시됩니다.

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // jsonp
    async: false //IGNORED!!
});

JSONP 호출의 경우 다음을 사용할 수 있습니다.

  1. 자신의 도메인으로 Ajax 호출 - 크로스 도메인 콜 서버 측
  2. 비동기로 작동하도록 코드 변경
  3. Frame.js와 같은 "함수 시퀀서"라이브러리 사용 (이 answer )
  4. 실행을 차단하는 대신 UI 차단 (이 answer ) (내가 가장 좋아하는 방식)



Links