비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs

💖 async와 await이란?

async와 await은 새로운 것이 아니라, 기존의 promise위에 간편한 api를 제공하는 것이다. (syntactic sugar라고도 부름) 이것들을 사용하면 promise를 깔끔하게 사용할 수 있다.
try, catch문 가능하다!

1. async
   함수 앞에 async키워드를 붙이면 promise로 만들어 주므로, 간편하게 return으로만 표시해줘도 된다. (당연히 화살표 함수로도 가능! const fetchUsers = async () => {} )

async function fetchUser(){
    return'ellie';
}
const user = fetchUser(); 
user.then(console.log)
console.log(user);

2. await
   프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다. 정리하자면 다음 실행을 일시 중지시켰다가 프로미스가 settled 상태가 되면 다시 재개한다. 그러므로 만약 서로 연관없이 수행되는 것이라면 await 키워드를 쓸 필요가 없고, 처리 순서가 보장되어야 하는 것이라면 await 키워드를 쓰면 된다.

function delay(ms){
return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple(){
await delay(1000);
return '🍎';
}
async function getBanana(){
await delay(1000);
return '🍌';
}
//프로미스로 만들 시
// function getBanana(){
//     return delay(3000)
//     .then(()=> '🍌');
// }

💖 유용한 Promise APIs

1. Promise.all
   만약 바나나와 사과를 얻은 후 같이 출력하려고 하면, 먼저 바나나를 얻은 후 사과를 얻는 과정으로 굳이 할 필요가 없다. 동시에 얻으면 된다. 이럴 경우에 all을 이용한다.

function pickAllFruits(){
    return Promise.all([getApple(), getBanana()])
    .then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);

2. Promise.race
   가장 먼저 받아오는 값을 출력하고 싶을 시 사용하면 된다.

function pickOnlyOne(){
    return Promise.race([getApple(), getBanana()])
}
pickOnlyOne().then(console.log);