[ajax] ajax + promise

 

 

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('콘솔이 먼저 실행됨');

    });