[비동기 함수] - async / await

👩🏻‍💻 await 함수

Promise의 성공 결과 값을 받아오려면 함수 앞에 await을 사용한다

async은 함수나, 파일 module의 최상위 레벨에서만 사용할 수 있다. 여기서 module은 ES6 모듈을 의미

---

👩🏻‍💻 await의 역할

• fetch함수는 Promise 객체를 리턴한다.
• fetch 앞에 await문이 있으면 Promise가 Fulfilled 상태가 될 때까지 기다린다.
• Promise는 세 가지 상태를 갖는다.
  1.  Pending (미결정) : 비동기 작업을 기다리고 있을 때
  2.  Fulfilled (성공) : 비동기 작업을 성공적으로 끝났을 때
  3.  Rejected (실패) : 비동기 작업이 실패했을 때
• 비동기 작업이 완료되면 Promise가 작업 결과를 알려준다. 이는, await로 활용한다.

Promise가 초기 Pending 상태

await

🔒 Pending 상태

await를 써주면 Promise가 FullFilled, Rejected 상태가 될때까지 기다린다.

 

🔓 Fulfilled 상태

• await을 사용하면 Promise가 Fulfilled 상태일 때 경우 비동기 작업의 결과, fetch의 경우 response를 Promise의 결과 값으로 갖게 된다.
• await은 Promise의 결과 값을 꺼내서 리턴해 준다.

 

---

 

🧑‍🤝‍🧑 async와 await를 한 쌍 처럼

fetch 앞에 async-await 문이 있으면 Promise가 Fulfilled 상태가 될 때까지 기다리는 동안, 다시 함수 밖으로 가서 코드를 실행한다.

 

👩🏻‍💻async 함수의 특징

항상 Promise를 리턴❗

 

Promise를 리턴하는 이유 설명

1. 비동기 함수를 사용하는 이유는 비교적 오래 걸리는 작업을 처리하기 위해서이다.
2. async-await fetch 작업을 하려면 꽤 오래 걸리는데
3. 비동기 함수를 호출하면 리턴값을 바로 알 수 없는 문제가 발생한다,
4. 그래서 일단 Promise를 리턴해 준다.
5. 함수의 body가 다 실행되고 리턴값이 정해지면
6. Promise를 Fulfilled 상태로 바뀌고
7. 함수의 리턴값을 Promise의 결과값으로 채워준다.