Web・API - 2022. 8. 24.

async/await 구문의 실행 원리#18

👉async/await 구문의 실행 원리

이번 시간에는 async 함수가 다른 코드랑 섰여서 실행될때 모습을 살펴보겠습니다.
일단 그전에 알아야 하는 중요한 사실이 있습니다.
그건 바로 await 키워드는 async함수 안에서 사용할수 있다는 사실 입니다.
정말 그런지 한번 살펴 볼게요.

함수 앞에 붙은 async를 지우고 코드를 실행하면 다음과 같이 에러가 납니다.
(await함수는 async 안에서만 실행 할수 있다고 써 있네요)

그러니깐 await 키워드는 async함수 안에서 사용할수 있다는 사실 이점 꼭 기억 해주세요.

이제 코드를 본격적으로 수정했습니다.
console.log를 넣었고, 1~7까지 숫자를 넣었습니다.
여기써 있는 순서대로 각 console.log 실행 됩니다.
왜 그렇게 실행 되는지 설명해드릴게요.

이 코드를 실행하면 일단 저기서 함수를 선언하고

console.log(1) 가 실행되고

fetchAndPrint() 가 호출되고 함수 안에서 console.log(2)가 실행 됩니다.

그리고 여기서 await을 만나게 됩니다.

await을 만나면 일단 그 뒤에 코드를 실행하고, 코드의 실행 흐름은

현재 fetchAndPrint() 호출한곳으로 가게 됩니다.
그러니깐 fetchAndPrint()함수 밖으로 실행 흐름이 바뀐다는 거죠.
이게 아주 중요한 핵심 계념이니깐 잘 기억해주셔야 합니다.!!
그리고 console.log(3), console.log(4), console.log(5), console.log(6) 남은 코드가 쭉쭉 실행 됩니다.

이렇게 밖에 코드가 다 실행한 후에는 아까
await문 뒤에 있던 Promise 객체가 fulfilled상태가 될때까지 기다립니다. 이때 이미
fulfilled상태가 되었을수도 있고, fulfilled상태가 될때까지 더 기다려야 할 수도 있습니다.

어째든 fulfilled상태가 되면 await은 Promise 객체의 작업성공 결과인 response객체를 추출해서 리턴합니다.
그리고 그 다음 코드가 실행되어서 console.log(7)이 출력 됩니다.

그다음 이번에도 await을 만나게 되는데 이때도 똑같이 일단 await 뒤에 코드가 실행되고

다시 코드 실행 흐름은 fetchAndPrint() 함수 밖으로 나가게 됩니다.
하지만 밖에는 이제 더이상 실행할 코드가 없습니다.

그래서 이제는 그냥 text() 메소드가 리턴하는 Promise 객체가 fulfilled상태가 될때까지 기다립니다.

Promise 객체가 fulfilled상태가 되면 그 작업 성공 결과인 실제 response 내용이 result 변수에 할당되고,
그 내용이 출력되면 끝이 납니다.

👉 정리

이렇게 async함수와 그 주변 코드들이 함께 실행되는 모습을 보면 async함수 안에 비동기 실행된다는 부분이 있다라는
말을 실감할수 있습니다. 왜냐하면 await을 만나는 순간 코드의 흐름은 함수 밖으로 나가서 함수 밖에 코드를 실행하고 돌아오기
때문 입니다.