javaScript의 비동기 함수

Question

위의 코드의 출력 결과를 아래와 같이 정리하였습니다.정리한 대로라면 각각 서로 다른 4개의 addCoffee가 부분적으로 나누어 작동하고, resolve(value) 는 다음 then이 반환하는 콜백 함수(function (prevName))에 값을 전달한다고 이해하였습니다. 그렇다면 만일 실행부분이 아래와 같다면 어떤 결과가 나오는지 궁금했습니다. 이 경우 실행 결과는 아래와 같이 나왔습니다.에스프레소에스프레소 undefined아메리카노아메리카노 undefined카페모카카페라떼에스프레소---------------------카페모카 에스프레소아메리카노---------------------에스프레소, 카페모카---------------------카페라떼 에스프레소, 카페모카에스프레소, 카페모카, 카페라떼---------------------출력 결과를 보면 addCoffee('에스프레소')().then(addCoffee('아메리카노')()) 까지는 결과가 예상한 대로 나왔습니다.출력 결과를 보면 addCoffee('에스프레소')()가 resolve 값을 넘겨 주기 전에 .then(addCoffee('아메리카노')())의 콜백함수가 완료되고, addCoffee('에스프레소')()가 resolve 값을 .then(addCoffee('카페모카'))로 전달되었는데 이게 단순히 addCoffee('에스프레소')()가 더 빨리 완료되기에 비어있는 .then(addCoffee('카페모카'))의 prevName값으로 전달된 것인지 알고 싶습니다. 그러니까 정확히 어떤 원리로 addCoffee('아메리카노')()가 아닌 .then(addCoffee('카페모카'))로 전달된건지 알고 싶습니다.그 다음 출력 결과를 보면 .then(addCoffee('아메리카노')())의 resolve가 .then(addCoffee('카페라떼'));로 전달되는 것은 아니던데 이것도 잘 이해가 가지 않습니다. 위의 결과 대로라면 먼저 완료된 순으로 가장 가까운 실행되지 않은 function (prevName)의 prevName에 들어가는 것 같은데 출력 결과로는 .then(addCoffee('카페모카'))가 전달하는 값이 들어가고 있는데 왜 그렇게 되는지 알고 싶습니다.

캐티 · Answer

then(a=>100) 처럼 벨류를 반환하는 대리자를 넣어줘야 하는데요. 내가 뭘 잘못 했지를 이케 길게 얘기하면 어떡하나요.

REALFIVE · Answer

자바스크립트 안쓴지 오래인 c# 개발자인데 진짜 async/await 키워드로 비동기 프로그래밍하는 게 얼마나 편한건지 절실히 느끼네요진짜 1도 모르겠음. 자바스크립트로 된 토스트케이스 예제를 봐야하나 ㄷㄷ

월급은나의빛 · Answer

핵심 포인트 : .then(resolve) 다음에 또 .then이 있을 때 resolve에 전달되는 값은 &#34;Promise를 리턴하는 함수&#34; 라야 합니다. 그래야 두번째 then 이 해당 Promise가 fulfill 되기를 기다립니다. 그렇지 않으면 두번째 then의 resolve 함수가 첫번째 resolve가 호출되었던 promise와 동일한 conext에서 실행됩니다. 즉 함수가 아닌 값을 리턴한 then 블럭이 없는 것처럼 행동합니다. (이 부분에 대한 공식 문서를 못 찾겠네요. 찾아보시길 바랍니다)질문하신 내용에서 then(addCoffee('아메')()) 는 &#34;함수&#34;를 전달한 게 아니라 &#34;Promise&#34;를 전달했습니다. Promise는 오브젝트일 뿐 &#34;Promise를 리턴하는 함수&#34;가 아니라서 바로 다음 then 블럭이 실행된 것입니다.말이 복잡했네요. 위에서 하신 실험은 다음과 거의 유사한 것입니다.addCoffee('에스프레소')() .then(console.log('---- no effect ----')) .then(addCoffee('카페모카')) .then(addCoffee('카페라떼'))

핸호 · Answer

질문이 굉장히 복잡하네요. 좀만 단순화 시키면 좋을거 같아요... 두번째 시도하신 방법인 .then(addCoffee('아메리카노')()) 형태는 결국 .then(new Promise) 형태가 됩니다. 우선 이는 .then() 체이닝의 올바르지 못한 syntax 입니다. 기본적으로 체이닝이 되려면 함수를 넣어야 하거든요. 결국 addCoffee('아메리카노')()는 전체 체인에 포함되지 않고 독립적으로 돌아갑니다. 쉽게 이해하려면, addCoffee2라는 함수를 따로 만들어서 setTimeout을 5000 정도 준다음에 아메리카노에만 addCoffee2를 넣어보시면, 아메리카노 함수는 모든 체인들이 다 끝난 뒤 한참있다 끝나는걸 볼 수 있죠.그럼 중간에 잘못된 syntax로 들어간 .then(addCoffee('아메리카노')())의 뒷 체인인 .then('카페모카')는 어떻게 "에스프레소" 인자를 받았는가? 기본적으로 .then() 안에 함수가 아닌 인자가 들어갈 경우, 체인은 멈추지 않고 이전 resolve 값을 넘기도록 되어있기 때문입니다. 예를들어 addCoffee('에스프레소').then(1234).then(addCoffee('카페모카'))를 실행할 경우, 3번째 체인은 1번째 체인의 결과값을 받습니다.

라떼개발자 · Answer

호출만 하고 결과를 기다리지 않고 다음 then으로 넘어가서 완료 순서가 일정하지 않기에 일어나는 상황으로 보여요

javaScript의 비동기 함수

5개의 답변

#promise 목록