들어가기 앞서..
오늘은 async 사용법에 대해 배웁니다. promise와 연계 되니 promise를 모르신다면 이전 게시글을 먼저 보고 오세요
오늘은 무엇을 배울까 ?
async, await , race, all
async
async는 promise를 더욱 간략하게 사용할수 있게 만들어 준다.
우선 promise 사례를 보자
function fetchUser(){
return new Promise((resolve,reject)=> {
resolve ('succes');
})
}
기본적인 promise사용법이다.
다음은 async사례이다.
async function fetchUser() {
return 'success'
}
이는 위의 코드인 promise처럼 작동한다.
위의 코드 보다 엄청 간단하다.
이처럼 async는 promise를 간략하게 사용할수 있게 한다.
await
async가 사용된 곳에서 사용이 가능한 await는 값을 받을 때까지 대기하는 일을 수행한다.
setTimeout의 ms을 사용할수 있다.
function delay(ms){
return new Promise(resolve =>setTimeout(resolve,ms));
}
async function getApple() {
await delay(3000);
return 'apple';
}
3초 뒤에 apple이 리턴된다.
all
all은 프로미스를 병력적으로 값을 받을수 있게 한다.
직렬적으로는 하나씩 하나씩 값을 받아서 느릴수 있는데 병렬적으로 한번에 값을 다 받으면 빠르게 작업을 처리할수 있다.
위의 사례에 banana를 얻는 값을 추가해준다.
async function getBanana() {
await delay(3000);
return 'banana';
}
function pickAllFruits() {
return Promise.all([getApple(),getBanana()]) //프로미스를 다밭을때가지 기다리게한다.
.then(fruits => fruits.join('+'));
}
값을 다 받으면 .then을 이용하여 다음을 처리한다. join은 이전강의에서 배워서 잘알것이다. 결과는 apple + banana가 나온다.
race
가장 먼저 받은 값을 알고 싶은 경우 race를 사용한다.
function pickOnlyOne() {
return Promise.race([getApple(),getBanana()])
}
promise는 코드를 간략하게 만들어 콜백지옥에서 벗어날수 있게 해준다.
다양한 사례들이 있으니 어느 사례에서 어느것을 사용해야 할지는 알아봐야 할것 같다.
