jquery promise, Deferred 테스트

- Javascript Promise

크롬,사파리,IE EDGE 등등 사용가능. IE6~11 지원안함.

https://www.a-mean-blog.com/ko/blog/%ED%86%A0%EB%A7%89%EA%B8%80/_/Javascript-Promise

- $.Deferred() - (비동기함수를 순차적으로 실행함.)

크롬, IE 등등 호환..

resolve(Object) :  완료(성공)

reject(Object) : 에러(실패)

promise() : 완료 or 에러가 될때까지 기다림

함수를 연결하면 순차적으로 호출됨.

functionCall(parameter) // 처음 실행할 함수

.then(성공시 함수, (생략가능)실패시 함수).then(성공시 함수, (생략가능)실패시 함수)........

.fail(실패시 then이후 호출할 함수)

.done(성공시 then이후 호출할 함수)

.always(성공/실패 상관없이 then이후 호출할 함수)

※ fail, done, always 필요없을경우 선언안해도됨.

※ 파라메터에 callback으로 function구현가능.

http://uwostudy.tistory.com/54

https://www.zerocho.com/category/jQuery/post/57c90814addc111500d85a19

 예제 : http://kwange.tistory.com/entry/jqueryajax-promise-%EB%A1%9C-ajax-result-%EB%A6%AC%ED%84%B4%ED%95%98%EA%B8%B0

- $.when() - (비동기함수들을 동시에 실행했다가 전부 종료되면 Callback함수 호출.)

http://iamnotokay.tistory.com/235

테스트 코드

/*
// ##################### 화살표함수 START ################################################
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98
function callBackTest1(arg){
    console.log("callBackTest1 start - " + arg);
    var def = $.Deferred();

    setTimeout( ()=> {
        console.log("callBackTest1 setTimeout Call"); 
        def.resolve("callBackTest1 성공");
    }, 2000); // 성공테스트    
        
    console.log("callBackTest1 end");    
    return def.promise();
}
function callBackTest2(arg){
    console.log("callBackTest2 start - " + arg);
    var def = $.Deferred();

    setTimeout( ()=> {
        console.log("callBackTest2 setTimeout Call"); 
        def.resolve("callBackTest2 성공");
    }, 3000);        

    console.log("callBackTest2 end");
    return def.promise();
}
function callBackTest3(arg){
    console.log("callBackTest3 start - " + arg);    
       var def = $.Deferred();
    setTimeout( ()=> {
        console.log("callBackTest3 setTimeout Call"); 
        def.reject("callBackTest3 실패")
    }, 4000); // reject : 실패    

    console.log("callBackTest3 end");
    return def.promise();
}
// ##################### 화살표함수 END ################################################
*/
 
 
 
 
 
 
function callBackTest1(arg){
    console.log("callBackTest1 start - " + arg);
    var def = $.Deferred();
 
    setTimeout( function(){ 
        console.log("callBackTest1 setTimeout Call");
        def.resolve("callBackTest1 성공")
    }, 3000); // 성공테스트
 
    console.log("callBackTest1 end");
    return def.promise();
}
 
function callBackTest2(arg){
    console.log("callBackTest2 start - " + arg);
    var def = $.Deferred();
 
    setTimeout( function(){ 
        console.log("callBackTest2 setTimeout Call");
        def.resolve("callBackTest2 성공")
    }, 3000);
 
    console.log("callBackTest2 end");
    return def.promise();
}
 
function callBackTest3(arg){
    console.log("callBackTest3 start - " + arg);
    var def = $.Deferred();
 
    setTimeout( function(){ 
        console.log("callBackTest1 setTimeout Call");
        def.reject({"RESULT_CODE":"FAIL", "RESULT_MSG":"callBackTest3 Fail"}) // reject : 실패
    }, 3000); 
 
    console.log("callBackTest3 end");
    return def.promise();
}
 
 
 
 
function success(arg){
    console.log("success - " + arg);
}
 
function error(arg){
    console.log("error - " + arg);
}
 
function fail(arg){
    console.log("fail - " + arg);
}
 
function done(arg){
    console.log("done - " + arg);
}
 
function always(arg){
    console.log("always - " + arg);
}
 
 
 
 
 
 
 
/* 
###################################################
    순차실행
###################################################
*/
console.log("test call start");
callBackTest1("야홓").then(callBackTest2).then(success, error).done(done).always(always); // callBackTest1 -> callBackTest2 -> done -> always
//callBackTest1("야홓").then(callBackTest2).then(callBackTest3).then(success, error).done(done).always(always); // callBackTest1 -> callBackTest2 -> callBackTest3(reject) -> error -> always    (done 안탐)
//callBackTest1("야홓").then(callBackTest2).then(callBackTest3).then(success, error).done(done).fail(fail).always(always); // callBackTest1 -> callBackTest2 -> callBackTest3(reject) -> error -> fail -> always    (done 안탐)
//callBackTest1("야홓").then(callBackTest2).then(callBackTest3).fail(fail).done(done).always(always); // callBackTest1 -> callBackTest2 -> callBackTest3(reject) -> fail -> always    (done 안탐)
//callBackTest1("야홓").then(callBackTest3).then(callBackTest2).fail(fail).done(done).always(always); // callBackTest1 -> callBackTest3(reject) -> fail -> always
//callBackTest1("야홓").then(callBackTest3).then(callBackTest2, error).fail(fail).done(done).always(always); // callBackTest1 -> callBackTest3(reject) -> error -> fail -> always
console.log("test call end");
 
 
// 1.
/*
function whenSuccess(rs1, rs2){
    console.log("when조건 성공");
    console.log("##rs1 : " + rs1);
    console.log("##rs2 : " + rs2);
}
*/
 
 
// Parameter 미선언
function whenSuccess(){
    console.log("when조건 성공");
    for(var i=0, maxLength=arguments.length; i<maxLength; i++){
        console.log("##rs"+ i + " : " + arguments[i]);
    }
}
function whenFail(rs){
    console.log("when조건 실패");
    console.log("##rs : " + JSON.stringify(rs));
    console.log("rsCode : " + rs.RESULT_CODE);
    console.log("rsMsg : " + rs.RESULT_MSG);
}
 
 
 
 
 
/*
###################################################
    동시실행
###################################################
*/
// callBackTest1, callBackTest2 동시에 Call - 성공테스트
//$.when( callBackTest1("1111"), callBackTest2("2222") ).then(whenSuccess, whenFail); // 성공테스트
// callBackTest1, callBackTest3 동시에 Call - 실패테스트
// $.when( callBackTest1("1111"), callBackTest3("2222") ).then(whenSuccess, whenFail); // 실패테스트
 

ajax 예제(http://kwange.tistory.com/entry/jqueryajax-promise-%EB%A1%9C-ajax-result-%EB%A6%AC%ED%84%B4%ED%95%98%EA%B8%B0)

function ViewData(param1) {
 
    GetAjaxeData(param1).then(function (data) {
        console.log("data : " + JSON.stringify(data));
    });
 
}
 
 
 
function GetAjaxeData(param1){
 
    var def = new $.Deferred();
    var formCollection = "param1=" + param1;
 
    $.post("ajax url", formCollection,
        function (data, textStatus, jqXHR) {
            if (data.Code == '0') {
                def.resolve(JSON.parse(data.Data));
            } else {
                def.reject();
            }
        });
 
    return def.promise();
}