jQuery로 배열이나, Collection 정보를 순차적으로 Ajax 비동기를 호출해서 처리해야 하는 상황에서
(예시 : 첫번째 Ajax 비동기 호출이 완료 될 때까지, 기다렸다가 두번째 Ajax 비동기 호출을 해야하는 경우 )
Ajax 비동기 호출을 기다리기 위해서 async, await, promise를 사용하여 문제 해결을 진행했다.
단, 소스 코드를 실행 전에 사용하고 있는 브라우저가 async, await, promise 를 지원하는지 확인이 필요하다.
크롬도 마찬가지로 버전이 낮을 경우, 해당 소스코드를 문법 오류로 인식한다.
- 소스는 참조용입니다.
eachAjaxCall();
async function eachAjaxCall(){
var array = [1,2,3];
for ( const element of array ){
try{
await promiseAjaxCall(element);
console.log('element done');
}catch(e){
console.log('called by reject');
}
}
console.log('process done');
}
async function promiseAjaxCall(element){
return new Promise(function(resolve,reject){
$.ajax({
url: 'URL 주소 작성',
type: 'POST',
data : element,
}).done(function(data) {
/**
*
*/
console.log('ajax done' + data);
console.log(element);
resolve();
}).fail(function() {
reject();
});
});
}
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery로 Value getter(),setter() 만들기 (0) | 2019.03.16 |
|---|---|
| [jQuery] scrollTop 을 이용한 textarea focus (0) | 2012.08.22 |
| [jQuery] each() (0) | 2012.05.10 |
| [jQuery] attr() (0) | 2012.04.25 |
| [jQuery] jQuery.each() vs .each() (1) | 2012.04.24 |