비동기 함수 실행컨텍스트 과정 질문드려요

Question

async function foo() { try { const response &#61; await fetch(&#34;https://www.xxx.xxx&#34;); const data &#61; await response.json(); console.log(data); } catch (e) { console.log(&#34;에러발생: &#34;, e); // 에러발생: TypeError: Failed to fetch } } foo(); console.log('111');위와 같은 코드가 있다고 가정했을 때 실행결과는111 -> 에러발생: TypeError: Failed to fetch이렇게 발생하게되는데 제가 코드 흐름에 따라서 실행 컨텍스트 과정을 생각해봤을 때foo 함수가 호출되면 foo 함수의 실행 컨텍스트가 생성되고 콜 스택에 추가됩니다.try 블록 내에서 fetch(&#34;https://www.xxx.xxx&#34;)가 실행되면 fetch 함수의 실행 컨텍스트가 생성되고 콜 스택에 추가됩니다. 이때 네트워크 요청이 백그라운드에서 진행됩니다. fetch 함수는 프라미스를 반환하며 fetch 함수의 실행 컨텍스트는 콜 스택에서 제거됩니다.이때 마이크로 태스크 큐에 해당 await 키워드 이후의 후속 작업(프라미스가 이행될 때 실행할 작업)이 추가됩니다.foo 함수가 종료되어 foo 함수의 실행컨텍스트가 콜 스택에서 제거됩니다.console.log('111')이 실행되어 &#34;111&#34;이 콘솔에 출력됩니다.콜 스택이 비어있기 때문에 마이크로 태스크 큐에 대기하고 있던 await 이후의 후속작업이 콜 스택으로 순차적으로 이동하여 실행됩니다.fetch 함수의 네트워크 요청이 실패해 reject가 호출되어 Promise의 상태가 rejected가 됩니다.어떻게 에러가 캐치되는거지???try/catch 문이 좀 헷갈리네요. console.log('111')이 실행되기 위해서는 콜스택이 비어져있어야하는건 분명한데 이미 종료된 foo함수 내의 catch에서 어떻게 에러가 잡히는걸까요??

O-h-y-o · Answer

foo 함수에서 await를 만나게 되면 foo 의 실행 컨텍스트가 잠시 중단되어(마이크로 태스크 큐 X) console.log('111'); 를 실행합니다. 이후 네트워크 통신이 끝나게 되면 다시 foo 의 실행 컨텍스트가 실행됩니다. response에 await fetch("https://www.xxx.xxx"); 의 프로미스 결과값을 넣는 것부터 시작합니다.

비동기 함수 실행컨텍스트 과정 질문드려요

1개의 답변

Q&A 목록