[Javascript] 콜백을 프로미스로 전환하기

(1) ajax 통신 글로벌 함수 (콜백 사용)

var Common = {
    ajaxTransaction : function ( _param ) {
        var param = _param;
        var result = undefined;

        $.ajax({
            url : param["url"]
            , type : "POST"
            , async: false
            , success : function (ajaxResult) {
                result = ajaxResult;
            }
            , error : function () {
                alert("error 발생");
            }
        });
        return result;
    }
};

 

(2) ajax 함수 호출 (콜백 사용)

var indexPage = $.extend({}, Common);

var param = {
    url : "/exceptionTest"
}
var result = indexPage.ajaxTransaction(param);
console.log(JSON.stringify(result));

 

 

―――――――――――――――――――――콜백에서 프로미스로 전환―――――――――――――――――――――

 

(1) ajax 통신 글로벌 함수 (프로미스 사용)

function gfn_Transaction( inputParam) {
    return new Promise(function (resolve, reject) {
        var reqUrl = inputParam.url;
        var reqData = inputParam.data;
        $.ajax({
            url : reqUrl
            , type : "POST"
            , async: false
            , success : function (resData) {
                resolve(resData);
            }
            , error       : function(xhr, errorName, error) {
                reject(xhr);
            }
        });
    });
}

 

(2) ajax 함수 호출 (프로미스 사용)

var indexPage = $.extend({}, Common);

var param = {
    url : "/exceptionTest"
}

indexPage.getData = function () {
    indexPage.ajaxTransaction(param)
        .then(function (result) {
            console.log(JSON.stringify(result));
        }, function (error) {
            alert('오류발생');
        });
}

indexPage.getData()

 

 

+아래는 프로미스를 두번 사용해서 동기화를 처리한 예제 소스이다

(프로미스를 이용하면 콜백 지옥을 피할 수 있고, 소스를 직관적으로 이해할 수 있다)

var indexPage = $.extend({}, Common);

var param = {
    url : "/exceptionTest"
}
indexPage.getData = function () {
    return new Promise(function (resolve, reject) {
        indexPage.ajaxTransaction(param)
            .then(function (result) {
                console.log("[1]"+JSON.stringify(result));
                resolve(result);
            }, function (error) {
                alert('오류발생');
            });
    });
}

indexPage.getData()
    .then(function (result) {
        console.log("[2]"+JSON.stringify(result));
    }, function (error) {
        alert('오류발생');
    });

 

※참고하여 작업한 포스팅 :  https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

※읽어보면 좋은 포스팅 : https://sisiblog.tistory.com/233