async await

promise를 더 깔끔하게 사용하는 것 

 

먼저 promise를 사용하지 않았을 때 예시

=>hojin 

이렇게 쓰면 바로 user를 출력할 수 있지만, 동기적으로 움직이기 때문에 유저정보를 다 받아올 때까지 다른 코드를

읽어오지 못해 시간이 오래걸린다. 

 

Promise 사용 

 

 

동작이 완료되었기 때문에 fulfilled이고 then 콜백함수로 값을 받는다. 

그러나 이렇게 promise를 사용하지 않고도 간단하게 사용할 수 있는 방법이 있다. 

 

async 사용

 

promise를 지우고 function앞에다가 async를 달아주면 코드 블록이 자동으로 promise로 바뀐다. 

 

 

await사용 

✔200,100이 아니라 2000,1000이다. 

 

=>🍎+🍌(출력 결과) 

getFruits는 두 과일을 다 가져오는 함수이다. 

 

await은 async가 선언된 함수 안에만 사용할 수 있다. 

그리고 await앞에 함수가 있다면, 그 함수가 끝날 때까지 기다리는 것을 의미한다.

따라서 위 코드의 수행 시간은 총 3초가 걸린다. 

그러나 getFruits함수처럼 promise도 많이 쓰다 보면 callback지옥에 빠지게 된다.

 

그러나 async와 await를 같이 쓰면 

과일을 가져오는 함수가 이렇게 간단해질 수 있다.

에러가 발생했을 때를 처리하기 위해서는 try and catch문에 넣어서 에러를 처리할 수 있다. 

 

🔥await 병렬처리!!

위에 처럼 작성하면 callback 지옥에서는 벗어날 수 있지만, 직렬로 처리하여 시간이 오래걸리게 된다. 

따라서 효율적으로 처리하기 위해서는 await을 병렬로 적어주는 것이 좋다. 

 

 

promise는 만든 순간 promise안에 있는 코드 블록이 실행되어 promise가 실행된다. 

따라서 apple과 banana가 같이 실행된다. 그래서 걸리는 시간이 3초에서 2초안으로 줄일 수 있다. 

 

 

유용한 promise APIs 

 

 

=>🍌
🍎+🍌

all

all의 경우 배열안에 있는 getApple(),getBnana()를 다 가지고 오기 때문에 🍎+🍌가 출력된다. 

 

race

race는 더 빠른 거 하나만 가지고 오기 때문에 수행시간이 1초인 바나나만 출력된다. 

🍌

 

바나나가 더 먼저 처리되기 때문에 먼저 출력된다.