javascript 비동기 프로그래밍 - async await / 유용한 promise APIs

async / await

promise를 좀 더 간편하고 간결하고, 동기적으로 실행되는것 처럼 보이게 만들어준다.
promise들은 체인해서 사용할 수 있는데, 이런식으로 하게되면 난잡해질 수 있는데, 이런거 외에 좀 더 간편하게 async await을 사용하면
간편하게 작성할 수 있게 도와준다.

기존에 존재하는 것을 감싸서 api를 적용하는 것은 syntatic sugar 라고 한다.

• 깔끔하게 promise를 사용할 수 있는 방법

async

function fetchUser() {
  //네트워크 통신을 받는데 10초정도 걸리는 네트워크가 있다고 한다.

  return "ellie";
}

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

만약에 동기적으로 네트워크 통신을 받는데 10초 걸리는 네트워크가 있다고 치면,
이걸 10초 기다렸다가 실행되니까, 그 이후의 코드들은 사용자가 10초동안 텅빈화면만 기다린 다음 출력이 될 것이다.

그러므로 이런것들을 비동기적으로 처리해줘야 한다.

그래서 원래는 promise가 있었다.
언제 유저의 데이터를 받아올 지는 모르겠지만 약속하는 것이다. 이것을 가지고 있으면 then이라는 콜백함수를 지정해놓으면
데이터가 준비되는대로 불러준다는 뜻이다.

async function fetchUser() {
  //네트워크 통신을 받는데 10초정도 걸리는 네트워크가 있다고 한다.
  return "ellie";
}

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

async 앞의 코드를 함수 앞에 쓰면, 코드 블럭이 자동으로 promise화 (비동기화) 된다.

await

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function getApple() {
  await delay(3000);
  return "사과";
}

async function getBanana() {
  await delay(3000);
  return "바나나";
}

이렇게 async await로 기다리라는 표시처럼 만들 수 있다. 이것을 그냥 일반적인 promise 문으로 만든다면

function Banana() {
  return delay(3000).then(() => "바나나");
}

이렇게 될 것이다.

하지만 await를 사용하면 간단하게 우리가 사용했던 코드마냥 사용할 수 있다.

만약에 사과와 바나나 둘 다 받아오고 싶다면 원래의 코드는

function pickFruits() {
  return getApple().then((apple) => {
    return getBanana().then((banana) => `${apple},${banana}`);
  });
}

pickFruits().then(console.log)

이렇게, 콜백지옥을 연상시키듯 만들어야만 하지만, await가 있다면

async function pickupFruits() {
  try {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple},${banana}}`;
  } catch (error) {
    console.log(error);
  }
}

이렇게 간단하게 await 를 붙여서 만들 수 있다. try - catch 로 error를 잡아줄 수 있다.

문제점

사과를 받는데, 1000초 바나나를 받는데 1000초 가 걸린다.
사과를 받을 때 기다리고, 바나나를 받을 때 기다리면 순차적으로 진행하게 되면 비효율적이다.
바나나와 사과를 받아오는데는 서로 연관이 없기 때문에 기다릴 필요가 전혀 없다.

이렇게 되면, 병렬적으로 실행이 되기 때문에 바나나와 사과가 따로 진행이 되고 다 만들어진 이후에 await 하게 된다.

하지만 이러한 코드는 조금 더럽기도하고, 병렬적으로 진행이 되길 원한다면 유용한 promise API가 있다.

function pickAllFriuts() {
  return Promise.all([getApple(), getBanana()]).then((fruits) =>
    fruits.join(" + ")
  );
}

pickAllFriuts().then(console.logs);

이렇게 Promise.all을 통해서 간단하게 가져올 수 있다.

또 유용한 promise api 중 하나인 것은 promise.race 인데,

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

이렇게 promise.race를 통해서 둘 중 가장 빨리 실행되는 것만 가져올 수 있다는 뜻이다.