JS - async, await

async와 await은 promise를 더욱더 간편하고 간결하고 동기적으로 사용할 수 있게 하는 녀석이다!🤩

promise chaining을 계속 하게 되면 코드가 난잡해지고 가독성이 떨어진다.
하지만 async와 await을 사용하면 깔끔하게 사용할 수 있다.

먼저 기존 promise를 사용하여 비동기 처리의 문법이다

기존 promise 코드

function fetchUser(){
    return new Promise((reserve, reject) => {
        //return 'min'; //pending 상태
        reserve('min'); //fulfilled 상태
        // reject(new Error('omg!')); //rejected 상태
    })
}


const user = fetchUser();

user.then(user => console.log(user));

나름 이것 또한 콜백지옥을 생각하니 좋은 코드이긴 하지만
아래에서 async와 await을 배워서 더 간단하게 사용해보자

promise를 async를 사용하여 바꾸기

// 1. 함수 선언식
async function fetchUser() {
    return `ellie`;
  }
  
  // 2. 함수 표현식
  const fetchUser = async function() {
    return `ellie`;
  };
  
  // 3. 화살표 함수
  const fetchUser = async () => {
    return `ellie`;
  };

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

위 처럼 굉장히 다양한 방법으로 간단하게 작성이 가능하다.

---

기존 promise 코드

요번엔 기존 promise 코드를 await까지 포함하여 바꾸는 것을 확인해보자

먼저 기존 promise를 사용하여 비동기 처리의 문법이다

  function delay(ms) {
    return new Promise (resolve => setTimeout(resolve, ms));
  }
  
  function getApple() {
    return delay(1000)
    .then(() => `🍎`);
  }
  function getBanana() {
    return delay(1000)
    .then(() => `🍌`);
  }
  
  function pickFruits() { //어디선가 본거 같은 느낌 (설마 ㅋㅂㅈㅇ ??)
    return getApple()
    .then(apple => {
      return getBanana().then(banana => `${apple} + ${banana}`);
    });
  }
  pickFruits().then(result => console.log(result));

위 코드를 보면 return delay로 setTimeout에 시간값을 할당해주고 있는데
이렇게 promise chanining을 하면 복잡하기에 await을 사용하여 간단하게 바꿀 수 있다

promise를 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 `🍌`;
  }
  
  async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
  }
  pickFruits().then(result => console.log(result));

너무나도 깔끔해졌다. await의 경우는 async함수 내부에서만 사용이 가능하며
또한 async를 이용하여 반환하는 값들을 변수에 넣을 수가 있다.
하지만 위 코드 같은 경우는 사과와 바나나를 받아오는데에는 서로 아무런 연관이 없어
굳이 한개씩 받아오는 시간을 기다릴 필요는 없다
이 문제는 병렬처리로 바꾸게 되면 해결이 가능하다.

async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
  }

// ↓ ↓ ↓ ↓ ↓ ↓ 병렬처리

async function pickFruits() {
  //병렬처리
    const applePromise = getApple();
    const bananaPromise = getBanana();
  //동기화
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
  }

applePromise와 bananaPromise를 만들자마자 바로 getApple(), getBanana()가 실행되기 때문에
병렬적으로 처리가 가능해진다.

하지만 병렬처리를 이런식으로 이렇게 동시다발적으로 수행이 가능한 경우에는
promise에서 제공하는 promise.all 이라는 api로 수정하는 방법 또한 있다.