🍪 async / await은 무엇인가?

async/await은 ECMAScript 2017(ES8)에 추가된 사항으로 기존 비동기 처리 함수들의 단점을 보완할 수 있다. 기초적인 사용방법은 function 자체를 async 키워드를 붙여 선언해주고, 비동기로 처리되는 부분 앞에 await 키워드를 붙이면 끝이다. 한가지 주의할 점은 async/await은 await을 붙인 부분이 promise를 반환하므로 이 역시 promise 방식을 이용한다는 것이다.

await 키워드는 async 함수에서만 유효하다는 것을 기억해야한다. async 함수의 본문 외부에서 사용하면 SyntaxError가 발생한다.

🍪 어떻게 사용할까?

Promise를 then()과 catch()를 다뤘던 구문과 비교하면서 알아보자.

function test1() {
    fetch('...url...')
      .then(response => {
        //do something
      })
      .catch(error => {
        //handle error
      });
  }

async function test2() {
    try{
      const response = await fetch('...url...');
        // do something
    } catch (error) {
        // handle error
    }
}

함수 앞에 async를 선언하고 비동기 처리구문에 await를 처리해주면, then()처리 대신에 await 구문으로 대체가 가능하고, catch()처리는 try...catch 구문을 통해 대체가 가능하다.

🧪 async await 예제

Promise Part에서 다뤘던 예제를 async await으로 표현해보자.

const movieAPI = "<https://movieapi.com/data>";
const tvAPI =  "<https://tvapi.com/data>";
const getData = async () => {
   const movieData = await fetch.then(res => resp.json());
   const tvData =  await fetch.then(res => resp.json());
   return {
      movies: movieData,
      tvs: tvData
   }
}

🍪 async await이 왜 더 좋다고 하는가?

아래 코드는 각각 프로미스 체이닝과 async await으로 다룬 예제이다.

function test1() {
    return doSomethingAsync()
      .then(foo => doAsync1(foo))
      .then(bar => doAsync2(bar))
      .then(baz => doAsyncLast(baz))
}

async function test2() {
    const foo = await doSomethingAsync();
    const bar = await doAsync1(foo);
    const baz = await doAsync2(bar);
    await doAsyncLast(baz);
}

일단 흔히들 async await이 좋다고 하는 이유는 동기화 함수 작성하는 것처럼 친숙한 형태로 작성 할 수 있다는 것이다.

그러나 두 코드에서 foo를 기준으로 보자. then과 catch를 통해 다룬 위예제에서는 해당 구문이 끝나는 순간 생명주기가 끝이나지만, async await를 다룬 예제에서는 코드 어느 구문에서도 다시 사용(실제로 쓰일 경우가 전혀 없을때에도)되는게 가능해진다.

async await을 쓰면서 이미 사용이 끝난 변수를 다시 쓸 수도있는 위험부담을 가지게 된 관점에서는 프로미스 체이닝방식이 더 좋은 코드라고 말할 수 있다.

🤔 그렇다면 프로미스 체이닝 방식이 더 좋은 것 아닌가??

프로미스 체이닝방식과 async await방식의 프로그램 작성하는 구조는 위에서도 살펴보았듯이 완전 다르다. fetch API를 예시로 들어보자.

await fecth(url);