async & await

기존의 비동기 처리 방식의 단점을 보완하고 코드의 가독성이 좋아지는 비동기 처리 패턴이다.

function logName() {
  // fetchUser() : HTTP 통신 코드
  var user = fetchUser('domain.com/users/1', function(user) {	
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

일반적으로 자바스크립트의 비동기 처리는 위처럼 콜백형태로 표현해야 실행 순서를 보장받는다.

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

만약 데이터를 받아와 화면에 표시하기까지 비동기로 처리해야하는 과정이 많아진다면 콜백안에 콜백을 물리는 형태로 계속해서 코드 구조가 깊어진다.

async & await 기본 문법

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

함수의 앞에 async 라는 예약어를 붙이고, 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙인다. 여기서 주의해야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다. 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수다.

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

async & await 예외 처리

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

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

위의 코드를 실행하다가 발생한 네트워크 통신 오류뿐만 아니라 간단한 타입 오류 등의 일반적인 오류까지도 catch로 잡아낼 수 있다. 발견된 에러는 error 객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리해주면 된다.