모든 AJAX 호출을 순차적으로 수행하는 방법은 무엇입니까?
저는 jQuery를 사용합니다.그리고 애플리케이션에서 병렬 AJAX 호출을 원하지 않습니다. 각 호출은 시작하기 전에 이전 호출을 기다려야 합니다.어떻게 구현합니까?도우미가 있습니까?
UPDATE XMLHttpRequest 또는 jQuery.post 의 동기화된 버전이 있는지 알고 싶습니다.하지만 순차적인!= 동기식이며 비동기식이고 순차적인 솔루션을 원합니다.
동기식 Ajax 호출보다 훨씬 더 나은 방법이 있습니다.Jquery agax는 지연을 반환하므로 파이프 체인을 사용하여 다음 실행 전에 각 agax 호출이 완료되는지 확인할 수 있습니다.다음은 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.
});
});
}
어떤 사람들은 코드가 무엇을 하는지 전혀 모른다고 말했습니다.그것을 이해하기 위해서는 먼저 자바스크립트 약속을 이해해야 합니다.저는 약속들이 곧 네이티브 자바스크립트 언어 기능이 될 것이라고 확신합니다. 그래서 그것은 당신에게 학습에 대한 좋은 동기를 줄 것입니다.
제가 생각할 수 있는 두 가지 선택지가 있습니다.하나는 콜백을 통해 연결하는 것입니다.다른 하나는 통화를 비동기가 아닌 동기화하는 것입니다.
당신이 그것들을 순차적으로 원하는 이유가 있나요?그렇게 하면 일이 느려집니다.
통화를 동기화하려면 Ajax 호출의 비동기 옵션을 false로 설정합니다.http://docs.jquery.com/Ajax/jQuery.ajax#options 의 설명서를 참조하십시오(옵션 탭을 클릭하여 확인하십시오).
(async () => {
for(f of ['1.json','2.json','3.json']){
var json = await $.getJSON(f);
console.log(json)
};
})()
- jQuery ajax 호출로 3개의 json 파일을 요청합니다.
- 대기 중인 순서대로(병렬하지 않음) 처리
- Chrome/Firefox/Edge에서 작업(2018년 1월 30일 기준)
MDN에서 더 보기
이것을 할 수 있는 가장 좋은 방법은 Nosredna가 말한 대로 콜백을 연결하는 것입니다.동기식 XMLHttpRequest는 전체 응용프로그램을 잠그기 때문에 사용하지 않는 것이 좋습니다.
제가 알기로는 이에 대한 도움이 별로 없지만, 당신은 콜백 FIFO와 비슷한 것을 할 수 있습니다.
당신은 서사 자바스크립트를 시도해 볼 수 있습니다. http://www.neilmix.com/narrativejs/doc/
제가 직접 사용해본 적은 없지만요.이 작업을 수행하려면 비동기 작업을 연결하는 추상화를 설정해야 합니다.다른 사람들이 말했듯이, 동기화된 버전의 Ajax 개체는 응답을 기다리는 동안 이벤트가 처리되는 것을 차단합니다.이렇게 하면 응답을 수신할 때까지 브라우저가 중지된 것처럼 보입니다.
비동기 옵션을 false로 설정합니다(예:
$.ajax({ async: false /*, your_other_ajax_options_here */ });
약속을 사용하여 Ajax 호출을 순차적으로 수행할 수 있습니다.Array push and pop promise 방법을 사용하면 순차적인 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);
jQuery 비동기식 작업을 시퀀싱하는 현대적인 방법은 이미 반환된 약속과 지원을 약속하는 흐름 제어를 사용하는 것입니다. 이는 현재 여기에 나와 있는 이전의 다른 답변에는 나와 있지 않습니다.
예를 들어, 여러 스크립트를 로드하려고 했다고 가정합니다.$.getScript()그러나 스크립트를 순차적으로 로드해야 첫 번째 스크립트가 완료될 때까지 두 번째 스크립트가 로드/실행되지 않으므로 스크립트가 모두 완료된 시점을 알고자 합니다.다▁the▁use▁you있니습수▁▁can라는 약속을 직접 사용할 수 있습니다.$.getScript()이미 반환되었습니다.단순화를 위해 다음과 같은 기능을 제공합니다.await을 곧그약속▁a▁in.for다음과 같은 루프:
async function loadScripts(scriptsToLoad) {
for (const src of scriptsToLoad) {
await $.getScript(src);
}
}
loadScripts([url1, url2, url3]).then(() => {
console.log("all done loading scripts");
}).catch(err => {
console.log(err);
});
이제 모든 jQuery Ajax 관련 비동기 작업이 약속을 반환하므로(그리고 수년 전부터), 이 개념을 jQuery의 Ajax 관련 작업으로 확장할 수 있습니다.
또한 여기서 jQuery 작업을 새 약속으로 포장하거나 지연된 jQuery에서 포장하려는 다른 모든 응답 시도는 구식이며 약속 방지 패턴으로 간주됩니다. 작업 자체가 이미 약속을 반환할 때에는 자신의 새 약속으로 포장하려고 하지 않고 해당 약속을 직접 사용할 수 있기 때문입니다.
이것을 보세요: http://docs.jquery.com/Ajax/jQuery.ajax ("download" 탭 클릭).
그러나 동기식 호출은 응답이 수신될 때까지 페이지를 고정하므로 운영 사이트에서 사용할 수 없습니다. 사용자가 브라우저를 고정한 상태에서 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);
});
});
});
이렇게 하면 첫 번째 통화에 대한 응답이 수신 및 처리된 경우에만 두 번째 통화가 발행되고, 두 번째 통화에 대한 응답이 수신 및 처리된 경우에만 세 번째 통화가 발행됩니다.이 코드는 forgetJ입니다.SON이지만 $.ajax에 적용할 수 있습니다.
동기식 호출이 반드시 느린 것은 아닙니다. AJAX 호출을 열고, 게시하고, 소켓을 닫는 앱이 있다면 소켓에 대한 여러 호출이 의미가 없습니다. 일부 소켓은 단일 연결만 처리할 수 있기 때문입니다. 이 경우 이전 AJAX 호출이 완료되었을 때만 전송되는 데이터를 큐잉하면 데이터 처리량이 훨씬 더 높아집니다.
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);
sequential!= synchronous. 비동기적이고 순차적인 솔루션을 원합니다.
동기식 실행은 일반적으로 "동일한 클럭 사용"을 의미하는 반면, 순차적 실행은 "순서 또는 순서에 따라 수행"을 의미합니다.
비동기식 실행은 비순차적 결과의 가능성을 의미하기 때문에 귀사의 특정 사용 사례에 대해 두 가지 조건이 모두 충족되어야 한다고 생각합니다.
언급URL : https://stackoverflow.com/questions/1151598/how-to-make-all-ajax-calls-sequential
'programing' 카테고리의 다른 글
| url_for를 사용하여 Flask 정적 파일에 링크 (0) | 2023.08.16 |
|---|---|
| 도커 작성을 위해 호스트 네트워크를 사용하는 방법은 무엇입니까? (0) | 2023.08.11 |
| 가상 환경에서 사용자 지정 코드는 어디로 이동합니까? (0) | 2023.08.11 |
| PowerShell 출력을 탭 구분 형식의 텍스트 파일로 내보냅니다. (0) | 2023.08.11 |
| 연속 번호 지정으로 SQL 업데이트 (0) | 2023.08.11 |