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

async와 await는 promise를 좀 더 간결하고 간편하고 동기적으로 실행되는 것처럼 보이게 만들어 주는 것.

promise를 chining을 계속 할 수 있는데 코드가 난잡해질 수 있다.

기존에 존재하는 promise에 좀 더 간편한 api로 async와 await를 사용하면 코드를 동기식으로 작성하는 것처럼 간편한 작성을 도와준다.

새로운 것이 추가된 것이 아닌 기존에 존재하는 기능에 좀 더 간편한 api를 제공한다. 이렇게 기존에 존재하는 것 위에 기존에 존재하는 것을 감싸서 우리가 좀 더 간편하게 쓸 수 있는 api를 제공하는 것을 syntactic sugar이라 한다. 

자바 스크립트에서 class는 완전히 새로운 것이 아니라 프로토타입을 베이스로 한 syntactic sugar이다. 

 

async와 await은 깔끔하게 promise를 사용할 수 있는 방법이다. 

// async & await
// clear style of using promise :)

function fetchUser() {
  return new Promise((resolve, reject) => {
    resolve("ellie");
  });
}
//위와 같은 promise를 아래 async를 사용해서 간편하게 쓸 수 있다. 
// 1. async
async function fetchUser() {
  // do network reqeust in 10 secs....10초가 걸리는 네트워크 요청
  return 'ellie';
}

const user = fetchUser();
user.then(console.log);
console.log(user);

async가 없다면 10초동안 빈 화면에서 기다려야 한다. 

// 2. await ✨
//async 함수 안에서만 쓸 수 있다. 
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
//await을 쓰면 delay함수를 기다려 준다. 
  await delay(2000);
  return '🍎';
}

async function getBanana() {
  await delay(1000);
  return '🍌';
}

//아래의 함수를 위의 코드처럼 바꾼 것이다. 
function getBanana(){
	return delay(3000)
    .then(()=>'🍌');

async function pickFruits() {
	//프로미스를 바로 실행을 한다. 
  const applePromise = getApple();
  const bananaPromise = getBanana();
  //여기서 병렬적으로 실행해준다. 
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`;
}

//위처럼 병렬적으로 코드를 수행할 수 있는 경우는 api를 사용해서 간단하게 작성한다. 3번으로 ㄱㄱ

//아래의 코드처럼 chaining이 많아지면 가독성이 떨어지고 콜백지옥...처럼..문제 생김...
function pickFruits(){
    return getApple().then(apple=>{
        return getBanana().then(banana=>`${apple}+${banana}`);
    });
}

pickFruits().then(console.log);

// 3. useful APIs ✨
function pickAllFruits() {
//ALL은 프로미스 배열을 전달하면 모든 프로미스가 병렬적으로 다 받아질 때까지 모아준다. 
  return Promise.all([getApple(), getBanana()]).then(fruits =>
    fruits.join(' + ')
  );
}
pickAllFruits().then(console.log);

function pickOnlyOne() {
//race는 가장 먼저 값을 리턴하는 것만 전달된다. 
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);