jQuery에서 ajax 요청 일괄을 하려면 어떻게 해야 합니까?

jQuery에서 ajax 요청 일괄을 하려면 어떻게 해야 합니까?

나는 ajax call을 n조로 어떻게 하는지 궁금합니다.

사용 사례는 다음과 같습니다.

저는 사용 데이터를 보여주는 표를 가지고 있습니다.각 행에 드릴링할 수 있으며, 각 행에 더 깊이 드릴링할 수 있는 공통 속성이 있으면 한 번에 모든 행에 드릴링하도록 선택할 수 있습니다.각 행에 대해 테이블에 추가할 데이터를 가져오기 위해 ajax 호출이 수행됩니다.

경우에 따라 최대 50개의 행을 동시에 드릴링할 수 있습니다.상상할 수 있듯이, 이는 서버에 많은 스트레스를 줍니다.어떻게 하면 이 콜들을 더 작은 배치로 보낼 수 있을까요? 그 콜들이 발사되기 전에 배치되기를 기다리고 있습니까?

jquery message queuing과 같은 플러그인들이 저에게 도움이 될 가능성이 있다는 것을 알고 있지만, 이것은 작업 프로젝트이므로 가능한 한 플러그인을 피하고 싶습니다.

jQuery를 사용하는 것을 볼 수 있습니다.when, 이것은 모든 요청이 완료되었을 때 콜백 기능을 실행할 수 있게 해줍니다.

$.when($.ajax("request1"), $.ajax("request2"), $.ajax("request3"))
 .done(function(data1,  data2, data3){
         // Do something with the data
 });

아니면

$.when($.ajax("request1"), $.ajax("request2"), $.ajax("request3"))
.then(successCallback, errorHandler);

자세한 내용은 다음 게시물을 참조하시기 바랍니다.

또한 플러그인을 사용하는 것에 대한 고민이 작업 환경에 있다는 사실, 특히 작업이 단순화되는 경우에 영향을 받아야 하는지 확신할 수 없습니다.따라서 생산성이 향상될 수 있습니다.물론 플러그인을 신중하게 선택해야 합니다. 품질과 장기 유지보수가 문제가 될 수 있기 때문입니다.

jQuery를 사용하는 Ajax 호출은 일반적으로 비동기식입니다.따라서 50개의 행이 있는 경우 jQuery는 50개의 모든 요청을 비동기적으로 전송하므로 서버에서 응답을 받을 때 처리 순서를 제어할 수 없습니다.

사용가능async: false에서$.ajax를 호출하여 행을 순환할 때 요청이 하나만 서버로 전송되도록 합니다.

$.ajax({
    url: location,
    data: params,
    async: false,
    success: function(msg) { // do something}
});

이 접근 방식의 문제점(async: false)는 사용자가 "freeze" 또는 응답하지 않는 페이지를 경험할 수 있다는 것입니다.

또 다른 방법은 호출이 비동기식이지만 ajax 호출은 다음과 같이 각 행의 성공 이벤트를 기다리도록 자바스크립트에서 재귀를 사용하는 것입니다.

var maxRows = 50;

function myFunc(index) {
   $.ajax({
       url: location,
       data: params,
       async: true,
       success: function(msg) { 
            if (index < maxRows) {
               // do something
            }
            else {
               return; //index equals maxRows--stop the recursion
            }
            index++;
            myFunc(index); //call the function again
       }
   });

   $(document).ready(function() {
       myFunc(0);      
   });
}

다른 메시지를 통합할 수 없다면 자신만의 메시지 관리자를 만들어야 한다는 eicto에 동의합니다.여기 작은 것에 대한 나의 비판이 있습니다.

var AjaxQueue = function(max) {
  this.max = max;
  this.requests = [];
  this.current = 0;
}

AjaxQueue.prototype.ajax = function(opts) {
  var queue = this;
  opts.complete = function(jqXHR, textStatus) {
    queue.current -= 1;
    queue.send();
  };
  this.requests.push(opts);
  this.send();
}

AjaxQueue.prototype.send = function(opts) {
  while (this.current < this.max && this.requests.length > 0) {
    $.ajax(this.requests.unshift());
    this.current += 1;
  }
}

아직 사용해 본 적이 없어서 버그가 있을 수밖에 없습니다.그리고 당신이 a를 사용하지 않는다고 가정합니다.complete선택. 그냥 덮어쓰기만 해요.그런 경우 확인하고 이전의 전체 기능이 여전히 호출되는지 확인할 수 있습니다.

콜의 재귀적 일괄 처리가 저에게 효과적입니다.하지만 저는 XHR2 블롭 4K를 받아서 각각 IndexedDB(파우치DB)에 저장하고 있기 때문입니다.저는 XHR2와 IDB 풋 모두를 위한 스레드를 가지고 있습니다.그래서 좀 더 세련되게 굴어야 했습니다.

     for (var i in info.LayerInfo) {
        var imageType = (info.LayerInfo[i].Class == "BASE") ? "jpg" : "png";
        info.LayerInfo[i].SaveCount = 0;
        getLayer(0, info, info.LayerInfo[i], info.LayerInfo[i].Path, imageType);
    }
}

function getLayer(index, info, layer, base, imageType) {
    if (layer.Files.length == 0) {
        console.log("Thread done: " + index + " SaveCount: " + layer.SaveCount);
        return;
    }
    var val = layer.Files.shift();
    var path = base + "/" + val.id + "." + imageType;
    $xhr.ajax({
        url: path,
        dataType: "blob",
        success: function (data) {
            console.log("fetched: ", layer.Type + "-" + val.id);
            saveBlob(data, val.size, val.id, layer.Type, index, info, layer, base, imageType);
            if (index < maxThreads - 1) {
                getLayer(++index, info, layer, base, imageType);
            } else {
                return;
            }
        }
    });
}

function saveBlob(blob, length, id, layerID, index, info, layer, base, imageType) {
    if (blob.size != length) {
        console.error("Blob Length found: ", blob.size, " expected: ", length);
    }
    var blobID = layerID + "-" + id;
    var type = blob.type;
    DB.putAttachment(blobID + "/pic", blob, type, function (err, response) {
        if (err) {
            console.error("Could store blob: error: " + err.error + " reason: " + err.reason + " status: " + err.status);
        } else {
            console.log("saved: ", response.id + " rev: " + response.rev);
            layer.SaveCount++;
            getLayer(index, info, layer, base, imageType);
        }
    });
}

언급URL : https://stackoverflow.com/questions/6986458/how-can-i-make-batches-of-ajax-requests-in-jquery