결과적으로 잘~ 작동합니다! 하지만, 만약 저 코드 양이 방대해진다면, 본인은 물론 다른 사람도 보다가 미쳐서 모니터를 주먹으로 칠 수도 있습니다.
그래서 나온것이 Promise() 입니다.
예시2) Promise() : 여러 개의 then() 사용하기
function delayP(sec) { // 인자를 시간초만 받음
return new Promise( ( resolve, reject ) => { // Promise (성공, 실패) 선언
setTimeout(() => {
resolve (new Date().toISOString()) // resolve(성공)에 해당하는 항목
}, sec * 1000)
})
}
then()
delayP(1)
.then((result)=> {
console.log(1, result)
return delayP(1) // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
})
.then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
console.log(2, result)
})
Promise() .then() 을 사용하는 것의 장점은 더 말할 필요가 없이 보기가 쉽습니다.
또한 구분지어서 코드를 작성하는데에도 문제가 없죠.
출력 결과
하지만 만약 반환값(return)을 작성해주지 않는다면,
delayP(1)
.then((result)=> {
console.log(1, result)
return delayP(1) // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
})
.then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
console.log(2, result)
// return이 없다. => 다음 result = undefined가 될 것이다.
// return 'string or something' 하면 해당하는 내용이 바로 출력된다.
// => delay를 통해 해당 내용을 지연시키지 않았기 때문에.
})
.then((result) => { // 받은 return 값이 null 이기 때문에 undefined를 출력한다.
console.log(3, result) // 출력 내용 ( 3, undefined )
})
2번째then에서 return이 없습니다!
=> 3번째delayP( null ) 이 들어갔다는 뜻입니다.
그렇기 때문에 출력되는 것은( 3, undefined ) 가 됩니다.
출력 결과
추가적으로 sec 라는 인자도 전달이 안되었기 때문에 바로 세번째 then() 이 실행되어 3, result 가 출력되었습니다.
