async / await?? 기다려? 뭔데??

진짜 삽질하는 짱구입니다 :) 재형·2022년 3월 21일

1. async & await란?

Javascript의 비동기 처리 패턴 중 가장 최근에 나온 문법이라고 한다. 기존의 처리 방식인 callback과 promise의 단점을 보완하고 읽기 좋은 코드를 작성하게 도와 준다고 한다.

이 문법의 목적은 위에서부터 아래로 한 줄 한 줄 사고하면서 프로그래밍 하는거라고 한다.

2. async & await 문법

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

기본 문법

function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

1번째 코드에 async 과 await를 적용한 코드가 2번째 예이다. 보기에도 뭔가 되게 간단해 보인다.

2 - 1 예제 )

function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    resolve(items)
  });
}

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}

fetchItems() 함수는 프로미스 객체를 반환하는 함수이다. fetchItems() 함수를 실행하면 프로미스가 이행되어, resolve값은 items 배열이 된다.

logItems()함수를 실행하면 fetchItems() 함수의 결과 값인 items 배열이 resultItems 변수에 담긴다. 따라서, 콘솔에 [1,2,3]이 출력된다.

// HTTP 통신 동작을 모방한 코드
function fetchItems() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var items = [1,2,3];
      resolve(items)
    }, 3000);
  });
}

// jQuery ajax 코드
function fetchItems() {
  return new Promise(function(resolve, reject) {
    $.ajax('domain.com/items', function(response) {
      resolve(response);
    });
  });
}

위 예제는 다시 읽어보면서 이해해 보자!

3. 예외 처리

프로미스에서 에러 처리를 위해 .catch()를 사용한 것처럼 async에서는 catch{}를 사용 한다.

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}

코드 실행을 하다가 발생한 네트워크 통신 오류 뿐만 아니라 간단한 타입 오류들의 일반적인 오류까지도 catch로 잡아낼 수 있다. 프로미스와 비슷하게 여기서도 catch{}를 통해 처리하면 된다.

말 그대로, try => 함수를 실행한다~~, 그리고 에러는 catch를 통해 나타 낸다.