이 코드 스 니펫은 Google 개발자 가 제공 한 것 입니다 .
// map some URLs to json-promises
const jsonPromises = urls.map(async url => {
const response = await fetch(url);
return response.json();
});
나는 마지막 jsonPromises에 약속의 배열이 될 것이라는 것을 이해합니다 . 그러나 나는 그것이 어떻게 일어나는지 완전히 확신하지 못합니다.
내 이해에 따르면, 실행은이 선에 도달 할 때 const response = await fetch(url);, 그것은 웹 API를 호출 스택에서 이동 동일한 작업을 수행 return response.json();하고, 다음으로 이동 url에서 urls. 맞습니까? 간단한 경우 이벤트 루프가 어떻게 작동하는지 이해 setTimeout하지만이 예제는 저를 많이 혼란스럽게합니다.
다음과 같은 일이 발생합니다.
1) .map함수가 실행되고 각 요소 (비동기 함수)에 대한 콜백을 실행합니다. 이 함수는를 호출 fetch하여 엔진 내부에서 일부 마법을 시작합니다. fetchPromise를 반환합니다. 에 await도달하면 함수 실행이 중지됩니다. 에서 수행 한 함수에 대한 호출 .map은 약속 으로 평가됩니다. .map모든 약속을 수집하고 배열에 저장하고 배열을 반환합니다.
2) 언젠가 후드 아래에서 실행되는 가져 오기 중 하나가 연결을 설정하고 JS로 다시 전화를 걸어 fetch약속을 해결합니다 . 그러면 async function호출이 계속됩니다. res.json()엔진이 연결에서 모든 패킷을 수집하고 내부적으로 JSON으로 구문 분석하도록합니다. 다시 Promise를 반환하고 awaited 를 받으면 실행이 다시 중지됩니다.
3) 언젠가 연결 중 하나가 종료되고 전체 응답이 JSON으로 제공됩니다. promise가 해결되고 async function호출이 계속 실행됩니다. returns로 인해 promise (배열에있는 것)가 해결됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다