자바스크립트에서 API를 불러올 때 순서 (fetch, async, await)

자바스크립트에서 API를 불러올 때 순서

 

1. url 세팅

• 자바스크립트 Call Stack에서 변수 선언 등으로 바로 처리.

2. Fetch(url)

• 데이터를 달라고 요청하는 함수
• 네트워크 통신 필요
• 다른 지역의 서버에서 데이터를 받으려면 시간이 걸림.
  • 자바스크립트는 브라우저에게 fetch(url)을 넘겨 놓고 다음 일을 수행한다.
  • fetch가 완료 될 때까지 pending이 뜬다..
  • 데이터가 아직 안와서 기다리는 중...
  • 

3. Data 보여주기

• fetch(url)이 끝나기 전에는 보여줄 Data가 없으므로 fetch를 기다려야 한다.
  • 마찬가지로 fetch를 기다리는 동안 그 다음 명령들도 다같이 대기 해야한다..
• 그래서 '이 함수를 fetch 가 끝나고 나서 실행을 시켜줘!' 라고 할 때 acync, await을 사용 한다.
  • 이렇게 해야 fetch가 pending 중인 사이에 다른 명령들을 먼저 처리할 수 있다.
  • async
    • 함수를 비동기적으로 처리 하도록 만든다.
  • await
    • 기다려줘.
    • async 처리한 함수를 기다리게 한다.
      • async 처리한 함수를 task Queue에 잠시 넣는다.
    • 다음 명령어들을 처리한다.
    • Call Stack이 비워지면, 다시 task Queue에 넣었던 async 처리한 함수를 불러본다.
    • fetch가 완료되었다면, data를 보여준다.
  • 

 

 

 

Refference

• 코딩알려주는누나
• 이미지2