async & await

자바스크립트의 비동기 처리 패턴 중 ES7에 나온 최근 문법
기존의 비동기 처리방식인 콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은(동기함수처럼 읽고쓰기) 코드를 작성하게 도와준다.

동기함수처럼 아래로 차례대로 읽히는 방식의 코드를 구성하는 것이 async, await 문법의 목적

기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

1. 함수의 앞에 async라는 예약어가 붙음
   2 함수의 내부 로직중 HTTP 통신을 하는 비동기 처리 코드 앞에 await을 붙힌다.

   주의할 점: 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작됨
   일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios등 프로미스를 반환하는 API 호출이다.

예제

async & await 문법이 가장 빛을 발하는 순간은 여러 비동기 처리 코드를 작업할 때!

function fetchUser() {
  const url = "https://jsonplaceholder.typeicode.com/users/1";
  return fetch(url).then(res => res.json());
}

function fetchTodo() {
  const url = "https://jsonplaceholder.typeicode.com/todos/1";
  return fetch(url).then(res => res.json());
}

/*
1. fetchUser()를 이용하여 사용자 정보 호출
2. 받아온 사용자 아이디가 1이면 할일 정보 호출
3. 받아온 할 일 정보의 제목을 콘솔에 출력
*/

async function logoTodoTitle() {
  const user = await fetchUser();
  if (user.id === 1) {
    const todo = await fetchTodo();
    console.log(todo.title);
  }
}

예외처리

async & await 에서 예외를 처리하는 방법은 try & catch이다.
프로미스에서 에러처리를 위해 .catch()를 사용했던 것처럼 async에서는 catch{}를 사용하면 된다.

async function logoTodoTitle() {
  try {
    const user = await fetchUser();
    if (user.id === 1) {
      const todo = await fetchTodo();
      console.logo(todo.title);
    }
  } catch (err) {
    console.log(err);
  }
}

예외처리 문제점

예외처리를 하려는 비동기 로직마다 try & catch를 묶어서 작성하게되면 코드가 더러워 지게된다.

async function towerOfTerror() {
  let a;
  let b;
  let c;
  
  try {
    a = await step1();
  } catch (err) {
    handle(err);
  }
  
  try {
    b = await step2(a);
  } catch (err) {
    handle(err);
  }
  
  try {
    c = await step3(b);
  } catch (err) {
    handle(err);
  }
  
  return a + b + c;
}

예외처리 문제점 해결방법

await이 붙은 비동기처리 코드는 Promise를 반환하므로 catch()를 활용할 수 있다.

async function towerOfTerror() {
  let a;
  let b;
  let c;
  
  
  a = await step1().catch(err => handle(err));
  b = await step2(a).catch(err => handle(err));
  c = await step3(b).catch(err => handle(err));

  return a + b + c;
}

더 좋은 예외처리 해결방법

try catch to repace를 구현하는 함수를 만들어서 활용

/*
* 첫 번째 요소는 데이터, 두번째 요소는 오류이다. [data, error]
*/
async function awesome(promise) {
  try {
    const data = await promise;
    
    return [data, null];
  } catch (err) {
    console.error(err);
/*
* 오류가 있으면 데이터가 null 이고 오류가 정의된다. [null, error]  */
    return [null, err];
  }
}

async function main() {
  /*
  * 오류 처리를 한줄로 정리가능
  */
  const [data, err] = await awesome(promise);
  if (err) {
  /*
  * if문을 사용하여 코드를 깔끔하게 정리할 수 있다.
  */
  }
  const [data2, err2] = await awesome(promise);
  const [data3, err3] = await awesome(promise);
}