[JAVA SCRIPT] JS - new Promise() 문법 다단계 뿌시기

Step1. new Promise 내부에서 new Promise 사용하기.

// step1
// new Promise를 또 내부에 사용 가능? 응 가능
new Promise((r1, r2) => {
    console.log('Promise(1)');

    r1();
})
.then(() => {
    console.log('then(2)');

    new Promise((r1, r2) => {
        console.log('Promise(3)');
        r1();
    })
    .then(() => {
        console.log('then(4)');
    })
})

Step1 실행결과

Step2. Promise를 return 받아 then을 끄집어 내기

// step2
// step1에서 then을 밖으로 끄집어 내기
/* then안에서 return을 사용하면 promise 객체를 반환받기 때문에 
then자리에 promise가 반환되어져 왔기 때문에 then 아래에 또 then을 사용 할 수 있다.*/
// 다 끄집어 낼 수 없기 때문에 then이라도 꺼내어 사용한다.
// then은 예약어가 아니라 함수다.
new Promise((r1, r2) => {
    console.log('Promise(1)');
    r1();
})
.then(() => {   
    console.log('then(2)');

    // promise 함수가 리턴된다.
    return new Promise((r1, r2) => {
        console.log('Promise(3)');
        r1();
    })
})
.then(()=> {
    console.log('then(4)');

    return new Promise((r1, r2) => {
        console.log('Promise(5)');
        r1();
    })
})
.then(() => {
    console.log('then(6)');
})

Step2 실행결과

Step3. (Step2)에서 중복되는 코드를 함수를 사용하여 코드 간략화

// step3
// step2에서 중복되는 코드 대신에 f1() 함수 사용
function f1() {
     return new Promise((r1, r2) => {
        r1();
    })
}

f1()
.then(() => {   
    console.log('then(2)');

    return f1()
})
.then(()=> {
    console.log('then(4)');

    return f1()
})
.then(() => {
    console.log('then(6)');
})

Step3 실행결과

Step4. (Step3)를 좀 더 간략하게 표현

// step4
function f1() {
    return new Promise((r1, r2) => {
       r1();
   })
}

f1()
.then(() => f1())
.then(() => f1())
.then(() => f1())  // promise는 걸렸지만 then을 받지 못할 뿐..

Step5. Promise의 간결한 코드

// step5
// promise를 사용하면 코드가 깔끔하다.
function f1(n) {
    return new Promise((r1, r2) => {
        setTimeout(() => {
            console.log(n);
        }, 1000*n)
        r1();	// .then()으로 이동
   })
}

f1(1)
.then(() => f1(2))
.then(() => f1(3))
.then(() => f1(4))

// 아래 예제를 new Promise() 사용하여 더 간략하게 표현

// setTimeout(() => {
//     console.log(1);
//     setTimeout(() => {
//         console.log(2);
//         setTimeout(() => {
//             console.log(3);
//         }, 1000) 
//     }, 1000) 
// }, 1000) 

Step5 실행결과

Step6. 원하는 기능 구현 함수 적용 예제

- 원하는 모양의 함수를 구현해서 사용이 가능하다.

// step6
// 원하는 모양의 함수를 만들어서 가져다 붙이면 된다.
// 이를 통해 깊숙하게 들어가는 것을 막을 수 있다.
function f1(n) {
    return new Promise((r1, r2) => {
        console.log(1);
        r1();
   })
}
function f2(n) {
    return new Promise((r1, r2) => {
        console.log(2);
        r1();
   })
}
function f3(n) {
    return new Promise((r1, r2) => {
        console.log(3);
        r1();
   })
}
function f4(n) {
    return new Promise((r1, r2) => {
        console.log(3);
        r1();
   })
}

f1(1)
.then(() => f3(2))
.then(() => f2(3))
.then(() => f4(4))

Step6 실행결과

Step7. r1() 즉 then으로의 인수전달

// step7
// r1() 의 인수전달
function f1(n) {
    return new Promise((r1, r2) => {
        console.log(1);
        r1('호랑이');
   })
}
function f2(n) {
    return new Promise((r1, r2) => {
        console.log(n);
        r1(1234);
   })
}
function f3(n) {
    return new Promise((r1, r2) => {
        console.log(n);
        r1();
   })
}
function f4(n) {
    return new Promise((r1, r2) => {
        console.log(4);
        r1();
   })
}

f1(1)
.then((t1) => f2(t1))
.then((t2) => f3(t2))
.then(() => f4(4))

Step7 실행결과

Step8. 실제 사용 예제

- 검증할 때 처럼 하나의 검증이 끝나면 다음으로 넘어간다고 생각하면 된다.

- 아래는 예제는 '동기'의 예제이다.

// step8 -1
// 이 방법은 '동기'가 된다.
// 하나가 끝나면 하나가 넘어간다.
function f1(n) {
    return new Promise((r1, r2) => {
        if(n==='ID'){
            console.log('f1 pass');
            r1(123456);
        }
        else {
            r2();
        }
   })
}
function f2(n) {
    return new Promise((r1, r2) => {
        if(n===123456){
            console.log('f2 pass');
            r1('호랑이');
        }
        else {
            r2();
        }
   })
}
function f3(n) {
    return new Promise((r1, r2) => {      
        if(n==='호랑이'){
            console.log('f3 pass');
            r1(987654);
        }
        else {
            r2();
        }
   })
}
function f4(n) {
    return new Promise((r1, r2) => {
        if(n===987654){
            console.log('통과!');
        }
        else {
            r2();
        }
   })
}
function f5() {
    console.log('실패하였습니다.');
}

f1('ID')
.then((AUD) => f2(AUD))
.then((t2) => f3(t2))
.then((PSW) => f4(PSW))
.catch(f5)

Step8 실행결과 -1

- 아래는 f2의 값을 변경 하는 예제로 값을 호랑이->호랑이다 라고 변경을 했다.

- f2까지는 pass 했지만 f3에서 검증이 실패 했기 때문에 다음으로 진행되지 않고 catch로 가 종료하게 된다.ㅇ

// step8 -2
function f1(n) {
    return new Promise((r1, r2) => {
        if(n==='ID'){
            console.log('f1 pass');
            r1(123456);
        }
        else {
            r2();
        }
   })
}
function f2(n) {
    return new Promise((r1, r2) => {
        if(n===123456){
            console.log('f2 pass');
            r1('호랑이다');	// 이 부분 변경해봄
        }
        else {
            r2();
        }
   })
}
function f3(n) {
    return new Promise((r1, r2) => {      
        if(n==='호랑이'){
            console.log('f3 pass');
            r1(987654);
        }
        else {
            r2();
        }
   })
}
function f4(n) {
    return new Promise((r1, r2) => {
        if(n===987654){
            console.log('통과!');
        }
        else {
            r2();
        }
   })
}
function f5() {
    console.log('실패하였습니다.');
}

f1('ID')
.then((AUD) => f2(AUD))
.then((t2) => f3(t2))
.then((PSW) => f4(PSW))
.catch(f5)

Step8 실행결과 -2

 

 

2019.08.19(월)

Java Script 문법 - new Promise() 뿌시기