모든 AJAX 호출을 순차적으로 만드는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1151598

문제

나는 jQuery를 사용합니다.그리고 내 애플리케이션에서 병렬 AJAX 호출을 원하지 않습니다. 각 호출은 시작하기 전에 이전 호출을 기다려야 합니다.그것을 구현하는 방법?도우미가 있나요?

업데이트 XMLHttpRequest 또는 jQuery.post의 동기 버전이 있다면 알고 싶습니다.하지만 순차!= 동기식이므로 비동기식 및 순차식 솔루션을 원합니다.

도움이 되었습니까?

해결책

동기식 Ajax 호출을 사용하는 것보다 더 좋은 방법이 있습니다. JQuery Ajax는 연기를 반환하여 파이프 체인을 사용하여 다음 실행 전에 각 Ajax 호출이 완료되도록 할 수 있습니다. 다음은 더 깊이있는 예제가있는 작업 예입니다. JSFiddle에서 놀아요.

// How to force async functions to execute sequentially 
// by using deferred pipe chaining.

// The master deferred.
var dfd = $.Deferred(),  // Master deferred
    dfdNext = dfd; // Next deferred in the chain
    x = 0, // Loop index
    values = [], 

    // Simulates $.ajax, but with predictable behaviour.
    // You only need to understand that higher 'value' param 
    // will finish earlier.
    simulateAjax = function (value) {
        var dfdAjax = $.Deferred();

        setTimeout(
            function () {
                dfdAjax.resolve(value);
            },
            1000 - (value * 100)
        );

        return dfdAjax.promise();
    },

    // This would be a user function that makes an ajax request.
    // In normal code you'd be using $.ajax instead of simulateAjax.
    requestAjax = function (value) {
        return simulateAjax(value);
    };

// Start the pipe chain.  You should be able to do 
// this anywhere in the program, even
// at the end,and it should still give the same results.
dfd.resolve();

// Deferred pipe chaining.
// What you want to note here is that an new 
// ajax call will not start until the previous
// ajax call is completely finished.
for (x = 1; x <= 4; x++) {

    values.push(x);

    dfdNext = dfdNext.pipe(function () {
        var value = values.shift();
        return requestAjax(value).
            done(function(response) {
                // Process the response here.

            });

    });

}

어떤 사람들은 코드가 무엇을하는지 전혀 알지 못한다고 말했습니다. 그것을 이해하려면 먼저 JavaScript 약속을 이해해야합니다. 나는 약속이 곧 기본 JavaScript 언어 기능이 될 것이라고 확신하므로 배우기위한 좋은 인센티브를 제공해야합니다.

다른 팁

내가 생각할 수있는 두 가지 선택이 있습니다. 하나는 콜백을 통해 그들을 사슬하는 것입니다. 다른 하나는 호출을 비동기 대신 동기화하는 것입니다.

순차적으로 원하는 이유가 있습니까? 속도가 느려질 것입니다.

호출을 동기화하려면 Ajax 호출에서 Async 옵션을 설정합니다. 문서를 참조하십시오 http://docs.jquery.com/ajax/jquery.ajax#options (옵션 탭을 클릭하여 확인하십시오).

당신은 내러티브 JavaScript를 시도 할 수 있습니다 http://www.neilmix.com/narriationjs/doc/

나는 그것을 직접 사용한 적이 없다. 이 작업을 원한다면 비동기 동작을 체인하기 위해 일종의 추상화를 설정할 것입니다. 다른 사람들이 말했듯이, Ajax 객체의 동기 버전은 응답을 기다리는 동안 이벤트가 처리되는 것을 차단합니다. 이로 인해 브라우저가 응답을받을 때까지 얼어 붙은 것처럼 보입니다.

Nosredna가 말했듯이 콜백을 체인하는 것입니다. 전체 응용 프로그램을 잠그므로 동기식 XMLHTTPREQUEST를 사용하지 않는 것이 좋습니다.

내가 아는 한 이것에 대한 도우미는 많지 않지만 콜백 FIFO와 비슷한 일을 할 수 있습니다.

이거 봐요: http://docs.jquery.com/ajax/jquery.ajax ( "옵션"탭을 클릭하십시오).

그러나 동기식 호출은 응답이 수신 될 때까지 페이지가 정지 될 것이므로 프로덕션 사이트에서는 사용할 수 없습니다. 어떤 이유로 든 브라우저가 얼어 붙은 상태에서 30 초 동안 기다려야한다면 사용자가 화를 낼 수 있기 때문입니다.

편집 : 알겠습니다. 업데이트를 사용하면 달성하고 싶은 것이 더 명확합니다.)

따라서 코드는 다음과 같습니다.

    $.getJSON("http://example.com/jsoncall", function(data) {
        process(data);
        $.getJSON("http://example.com/jsoncall2", function (data) {
            processAgain(data);
            $.getJSON("http://example.com/anotherjsoncall", function(data) {
                processAgainAndAgain(data);
            });
        });
    });

이런 식으로 두 번째 통화는 첫 번째 통화에 대한 응답이 접수 및 처리 된 경우에만 발행되며, 세 번째 통화는 두 번째 통화에 대한 응답이 접수 및 처리 된 경우에만 발행됩니다. 이 코드는 getjson을위한 것이지만 $ .ajax로 조정할 수 있습니다.

설정 비동기 거짓 옵션, 예를 들어,

$.ajax({ async: false /*, your_other_ajax_options_here */ });

참조: ajax/jquery.ajax

그리고 지금 당신은 이것에 대한 해결책이있는 것 같습니다.

http://api.jquery.com/category/deferred-object/

또는

http://www.slideshare.net/furf/making-ajax-sexy-jsconf-2010?from=ss_embed

동기 호출이 반드시 더 느린 것은 아닙니다. AJAX 호출이 열려 소켓에 게시된 다음 소켓을 닫는 앱이 있는 경우 일부 소켓은 단일 연결만 처리할 수 있으므로 소켓에 대한 여러 호출은 의미가 없습니다. 이전 AJAX 호출이 완료된 경우에만 전송되도록 데이터를 대기열에 추가하면 데이터 처리량이 훨씬 높아집니다. 

(async () => { 
  for(f of ['1.json','2.json','3.json']){
    var json = await $.getJSON(f);
    console.log(json)
 };
})()
  1. jQuery ajax 호출로 3 개의 JSON 파일을 요청합니다
  2. 대기중인 순서대로 (병렬이 아닌) 프로세스
  3. Chrome/Firefox/Edge에서 작업 (2018 년 1 월 30 일 기준)

더 MDN

약속을 사용하여 Ajax 호출을 순차적으로 만들 수 있습니다. 배열 푸시 및 POP 약속 방법을 사용하면 순차적 인 Ajax 호출이 훨씬 쉬워집니다.

var promises = [Promise.resolve()];

function methodThatReturnsAPromise(id) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/todos/'+id,
      dataType:'json',
      success: function(data)
      {
        console.log("Ajax Request Id"+id);
        console.log(data);
        resolve();
      }
    });
  });
} 

function pushPromise(id)
{
  promises.push(promises.pop().then(function(){
    return methodThatReturnsAPromise(id)}));
}


pushPromise(1);
pushPromise(3);
pushPromise(2);

node.js 이벤트를 사용하는 것은 어떻습니까?

var EventEmitter = require('events').EventEmitter;
var eventEmitter = new EventEmitter();
var $ = require('jquery');

var doSomething = function (responseData) {
  var nextRequestData = {};
  // do something with responseData
  return nextRequestData;
};

// ajax requests
var request1 = $.ajax;
var request2 = $.ajax;
var requests = [request1, request2];

eventEmitter.on('next', function (i, requestData) {
  requests[i](requestData).then(
    function (responseData) {
      console.log(i, 'request completed');
      if (i+1 < requests.length) {
        var nextRequestData = doSomething(responseData);
        eventEmitter.emit('next', i+1, nextRequestData);
      }
      else {
        console.log('completed all requests');
      }
    },
    function () {
      console.log(i, 'request failed');
    }
  );
});

var data = {
  //data to send with request 1
};
eventEmitter.emit('next', 0, data);

순차적! = 동기식, 비동기 및 순차적 솔루션을 원합니다.

동기 실행은 일반적으로 "동일한 시계 사용"을 의미하는 반면 순차적 실행은 "순서 또는 시퀀스에 따른 다음"을 의미합니다.

구체적인 사용 사례의 경우 비동기 실행은 비 순위행 결과의 가능성을 암시하기 때문에 두 조건 모두 충족되어야한다고 생각합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top