ajax가 먼저 선언되고 실행됐음에도 하단의 console.log 가 먼저 실행되는 이유는
ajax는 서버와 통신(요청과 응답)을 하기때문에 물리적인 시간이 소요된다.
Promise는 ie 에서 동작이 안되니 폴리필을 꼭 추가하도록 하자.
Promise IE 대응 폴리필
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
jQuery(1.7.2)
jQuery(document).ready(function() {
var ajaxCall = function() {
console.log('Promise 대기 전');
return new Promise(function(resolve, reject) {
console.log('Promise 대기 중');
jQuery.ajax({
url: './ajax-promise.json',
data: "data",
type: 'get',
dataType: 'JSON',
contentType: "application/json;charset=utf-8",
success: function(res) {
//성공시 실행코드
console.log('success 실행', res);
return resolve(res);
},
error: function(err) {
//실패시 실행코드
console.log('error 실행', err);
},
complete: function() {
//성공, 실패 상관없이 완료 실행하는 코드
console.log('complete 실행');
}
}).done(function(res) {
//성공시 실행코드
console.log('done 실행', res);
}).fail(function(err) {
//실패시 실행코드
console.log('fail 실행', err);
}).always(function() {
//성공, 실패 상관없이 완료 실행하는 코드
console.log('always 실행');
});
});
}
ajaxCall().then(function(data) {
console.log('Promise 실행', data);
});
console.log('콘솔이 먼저 실행됨');
});