JavaScript(ES6)| async와 await 그리고 유용한 promise APIs

syntactic sugar - 기존에 존재하는것위에 간편하게 쓸 수 있는 api

 

async & await

clear style of using promise

 

 

1.async

동기적으로 실행이 되면 

위 사진 처럼 함수 호출을 인식하고

함수를 읽는데 만약 10초가 걸리는 식이면 10초후에 리턴되고

그 리턴되는 값이 출력되기때문에

만약, 그 뒤에 웹페이지 ui를 표시하는 기능이 있다면

사용자는 10초동안 빈 화면을 보면서 기다려야하는 상황이 발생한다.

 

때문에 오래걸리는 일은 비동기적으로 처리할 수 있어야 한다.

 

저번 시간에 비동기로 사용했던것이 promise.

Promise에서 resolve나 reject값을 설정하지 않으면 위 사진 처럼

pending상태로 출력이 된다. 

Promise는 꼭 resolve나 reject값을 설정해야 한다.

 

 

이렇게 resolve를 설정해주면 fulfilled로 ellie가 출력되는 것을 볼 수 있다.

 

 

then을 사용해서 consol.log에 ellie를 출력할 수 있다.

 

 

이런 promise도 async를 사용해서 더 간단하게 작성해줄 수 있다.

함수앞에 async만 써주면 promise가 자동적으로 적용된다.

사진 처럼 then을 사용해서 출력하면 promise때처럼 그대로 출력이 됨.

 

 

2. await ✨

await은 async가 붙은 함수안에서만 사용할 수 있다.

await은 delay가 끝날때까지 기다려 준다.

즉, 1초 있다가 사과를 리턴하는 promise를 만들게 됨.

await없이 promise를 사용하는 함수를 쓰게되면 위 사진처럼 쓰게됨.

await을 사용하면 동기적인 코드를 사용하는 것 처럼 보임.

(쉽게 이해할 수 있음)

 

과일을 다 따는 함수를 작성할때

.then

.then이런식으로 작성하게됨.

콜백지옥과 비슷한 느낌임. 😱

 

콜백지옥 느낌의 promise를 await을 이용해서 깔끔하게 바꿔줄 수 있다.

 

에러처리도 try{ } catch() {  }처럼 쓸 수 있어서 더욱 익숙하다.

 

 

이 식에서도 문제점이 하나 발견된다.

사과 1초, 바나나 1초로 설정해 놓으니

실행을 할 때, 동기적으로 사과먼저 1초, 바나나 먼저 1초를 사용하니

총 2초가 소요된다. 두 개가 연결되어져 있는게 아닌데 차례대로 처리가 되는것이 효율적이지 않다.

 

이때, 사용할 수 있는 방법이 있다.

바로 Promise를 만드는 것이다. Promise를 만들면 바로 코드블럭이 실행되기 때문에

2초가 아닌, 1초만에 병렬적으로 실행되는 것을 확인할 수 있다.

 

 

 

3. useful Promise APIs

-all

병렬적으로 기능을 수행할 수 있을 경우에는 좀 더 깔끔한 api를 사용할 수 있다.

바로 Promise에 있는 all을 사용하면 된다.

all은 모든 promise들이 병렬적으로 다 받을 때 까지 모아주는 것.

 

즉, 사과와 바나나를 fruits에 모아주고 그것을 join을 통해 스트링으로 묶어 전달.

 

 

-race

사과가 2초, 바나나가 1초 걸린다고 설정을 했을때

가장 먼저 처리되는 것만 불러오는 api가 있다.

 

Promise.race를 주면 가장 먼저 처리되는(1초라서) 바나나만 출력이 된다.