• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 JavaScript, TS 게시판 Promise async await 버튼 이벤트 적용하기 중 질문

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

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #18859

    최덕희
    참가자

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

    [질문 강의 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. 여러 삽질을 시도했지만  결과가 같습니다. 무엇을 놓치고 있는지 감이 오지 않습니다. 혹시 해결 방안과 명쾌한 설명 부탁드립니다.

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

     

     

    #18864

    codingapple
    키 마스터

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

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

     

    #18878

    최덕희
    참가자

    아하! 이해했습니다.

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

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

    감사합니다:)

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠