이라는 개념을 새로 배웠다


await 초반에 들었을땐 해당 프로미스가 값을 반환할때까지 기다린다 라고만 들었고

김치 블로그 포스팅에선 promise 가 이런 이런 기능을 한다

라고만 설명하지 그 어디에서도 promise가 어떤 방식으로 동작한다 라는 개념은 없었음


그래서 내가 처음에 await을 봤을때 

'엥? 그거 완전 동기식 아니냐?'

라고 생각했음


말 그대로 await 구문을 쓰면 해당 promise가 응답할때까지

아래의 코드는 실행이 안됨 이게 동기식으로 블록킹을 하는게 아니면 어떻게 동작하냐?

의문이었는데 최근에 프로젝트 하면서 이 문제를 직접 겪음


무 슨 상황이었냐면

setTimeout+프로미스로 시간이 지나면 특정 함수를 실행시키는 일종의 시간제한 기능이 있었음

await으로 기다리도록 했고 시간이 지나면 아래의 코드가 실행되는 상황이었는데

문제는 그걸 취소하는 거임

await이 아래의 코드를 블록킹한다면 setTimeout을 해제하는것도 막히지 않냐?

이런 상황


아래 예시를 보면


function settingBomb(){

return new Promise(resolve => {

setTimeout(()=>{

resolve('Boom')

},5000)

})

}


function defuse(){

//대충 c4 해제하는 로직

console.log('bomb has been defused')

console.log('Counter Trrorists Win!')

}


async function start(){

console.log(await settingBomb())

console.log('Trrorists Win!')

}

//카운터 시작

start()


//해제 하는 함수 실행

defuse()



5초후에 폭8 하는 프로미스가 있고

그걸 취소하는 함수도 있음


start 함수를 실행하면 5초후 테러리슨트 윈 이라는 메세지가 뜰꺼임

문제는 여기서 await으로 c4가 터지기까지 기다리므로 아래의 코드는 실행안됨


근데 정말로 await이 아래의 코드를 블록킹하면 defuse()도 호출안될꺼임

실제로 실행해보면 멀쩡하게 해제됨



await을 쓰려면 반드시 프로미스를 반환하는 함수여야하는데

await은 보이지는 않지만 구문 아래의 코드를 

then으로 감싼다고함 (그 async 함수 안의 코드를)

결론적으로 await 아래의 코드는 블록킹을 하는게 

아닌 아래 코드를 전부 해당 프로미스가 끝날때 실행할 then에다가 쑤셔넣는거임


그러니까 js는 블록킹되는게 아니니 다른 이벤트나 코드 실행이 가능함






실제 5초 기다리는 await 아래의 코드도 멀쩡히 실행됨

await이 막는범위는 async 함수 안에서만 기다리고 그 밖코드는 멀쩡히 실행가능



참고한 글임:

https://yorr.tistory.com/20



프갤에 먼저 썻었는데 프로그래밍글은 바로 묻힘 ㅋㅋㅋㅋㅋ