Promise async await 버튼 이벤트 적용하기 중 질문

[최덕희]

안녕하세요. 좋은 강의를 만나 신나게 수강하고 있는 수강생입니다.
항상 좋은 강의 올려주셔서 감사합니다.

[질문 강의 Path]
매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법 --> part3 -->  Promise 어려워서 싫으면 async/await을사용합시다.
--> 예제 : <button>을 누르면 성공하는 Promise 만들기

내용 중 아래와 같이 코드를 짜봤습니다.
[코드]
<script>
        function funcButton() {
            return new Promise((resolve,reject)=>{
                document.querySelector("button").addEventListener("click", function () {
                    console.log("funcButton Promise");
                    resolve("promise resolve data 성공");
                })
            })
        }

        async function test() {
            await funcButton().then(console.log);
        }

        test();
</script>

 

[코드 실행 시 기대]
저의 기대는 첫 화면 시 버튼이 눌러질 때까지 기다리다가(await) 
버튼이 눌러지면 
console.log("funcButton Promise")가 찍히고 resolve로 넘겨 받은 문자열("promise resolve data 성공")이 
then에서 실행되어 console.log에 찍히기를 기대했습니다.

 

[코드 결과]

해당 코드를 실행하면 첫 버튼 클릭 시 console창에 
funcButton Promise
promise resolve data 성공
이 출력되지만 

2번째 버튼 클릭부터는 funcButton Promise만 출력 됩니다.

[이럴꺼라 생각했습니다.]
저의 생각에는 test()함수가 실행되면 
addEventListerner가 있는 funcButton 함수는 Queue에 등록되어 재사용 시 
저의 생각에는 funcButton과 test 함수 2개가 등록되고 addEventListerner가 있는 funcButton 함수는 Queue에 등록되어
버튼을 추가로 클릭했을 경우 resolve까지 코드가 진행되어 test함수의 then까지 실행 될거라 생각했습니다.

 

[질문]
1. 해당 코드가 어떤 이유로 버튼을 연속하여 눌렀을 시 then까지 진행되지 않는지 알고자 합니다.
2. [이럴꺼라 생각했습니다.]에서 어떤 부분이 맞고 어떤 부분이 틀렸는지 알고 싶습니다.
3. 여러 삽질을 시도했지만  결과가 같습니다. 무엇을 놓치고 있는지 감이 오지 않습니다. 혹시 해결 방안과 명쾌한 설명 부탁드립니다.

긴 글 읽어주셔서 감사합니다.

 

 

[codingapple]

아마 resolve를 여러번되는걸 기대하신 것 같은데

promise 하나는 한번 성공이나 실패하면 끝이고 연속두번 resolve 그런건 불가능해서요 

 

[최덕희]

아하! 이해했습니다.

한번 성공하고 끝나기에 addEventListener에서 성공 실패를 판단하면 안되는 거군요!

성공 실패를 다른곳에서 선언해서 사용하니까 잘돌아갑니다. 

감사합니다:)

[글쓴이]

글