callback 지옥 setTimeout편

문제

---

웹의 API 중에 setTImeout은 비동기적으로 움직이기 때문에 함수의 실행을 했을 때 절차적으로 읽지를 못하는 문제가 생긴다. 

 

예를 들어 다음 함수의 결과는 second -> first이다 

 

function call(){

	settimeout(()=>{

		console.log("first")

	},2000)

	console.log("second")
}

 

해결 

---

이를 해결하기 위해 호출 할 때 함수를 콜백지옥으로 함수가 실행되면 다음 함수가 실행되는 코드를 짜야 하는 한계가 있다. 이를 보여주면 다음과 같다. 

function getFlightTicket(callback){


    setTimeout(()=>{

    callback()

},2000)

    

}
undefined
getFlightTicket(()=>{

    console.log("first")
    getFlightTicket(()=>{

        console.log("second")
        getFlightTicket(()=>{

        console.log("third")
        })
    })

})
undefined
VM83:3 first
VM83:6 second
VM83:9 third

 

문제

---

여기서 문제를 함수를 호출하는 모습이 굉장히 지저분하다는 것을 알 수 있다.  이를 해결하는 것이 Promise 

 

해결

---

선언

1.  return 에 promise 함수를 호출

2.  promise 함수를 호출하면 인자에 resolve가 callback이 되고 또 다른 인자로 reject를 지닌다. 

3. 그리고 마지막으로 resolve()를 호출하면 끝 

 

 

호출

 

1.함수를 호출하고

2.then 매서드를 호출( then 매서드를 호출함으로써 callback 함수의 값을 만듦)

 

function getFlightTicket(){

    return new Promise((resolve,reject)=>{

            setTimeout(()=>{

                resolve()

             },1000)
            

        })

}
undefined
getFlightTicket().then(()=>{

    console.log("first")
    return getFlightTicket()
})
.then(()=>{
    console.log("second")
    return getFlightTicket()
})
.then(()=>{

    console.log("third")
    return getFlightTicket()

})
Promise {<pending>}
VM1115:3 first
VM1115:7 second
VM1115:12 third