async await

자바스크립트 async와 await • 캡틴판교 (joshua1988.github.io)

자바스크립트 async와 await

위 블로그에 있는 내용을 보고 정리하였다.

 

async await이란 js 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리방식인 콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있도록 도와준다.

 

아래와 같은 코드가 있다

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

fetchUser라고 하는 코드는 서버에서 데이터를 받아오는 HTTP통신 코드라고 가정해보자.

일반적으로 자바스크립트의 비동기 처리 코드는 아래 처럼 콜백을 사용해야지 코드의 순서를 보장 받을 수 있었다.

function logName() {
  // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓았습니다.
  var user = fetchUser('domain.com/users/1', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

이렇게 되면 복잡해 지기 때문에 이를 해결하기 위해 나온 것이 async await이다. 

 

단순히 비동기 처리 로직을 await을 통해서 변수에 할당하고 그 변수를 동기처럼 활용할 수 있다. 그리고 await을 사용하려면 일단 async로 감싼 함수안에서만 사용할 수 있다.

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

 

먼저 함수앞에 async라는 예약어를 붙이고, 비동기 처리 코드 앞에 await을 붙인다. 여기서 주의해야할 점은

비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await이 의도한 대로 동작한다.

 

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는 프로미스 객체를 반환한다. 프로미스는 자바스크립트 비동기 처리를 위한 객체라고 했다. 

items배열이 반환이 된다.

 

logItems를 보면 resultItems에 items의 배열이 담긴다. await을 활용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then등을 사용해야 했을 것이다. 하지만 async await 문법 덕택에 비동기에 대한 사고를 하지 않아도 되는 것이다.

 

async await이 가장 빛을 발할 때는 여러개의 비동기 처리 코드를 다룰 때라고 한다.

아래와 같이 각각 사용자와 할 일 목록을 받아오는 통신 코드가 있다고 해보자.

function fetchUser() {
  var url = 'https://jsonplaceholder.typicode.com/users/1'
  return fetch(url).then(function(response) {
    return response.json();
  });
}

function fetchTodo() {
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  return fetch(url).then(function(response) {
    return response.json();
  });
}

위 함수들을 실행하면 각 각 사용자 정보와 할 일 정보가 담긴 프로미스 객체가 반환이 된다.

 

 

async await을 사용하면 아래와 같이 로직을 사용할 때도 훨씬 수월하고 훨씬 짧고 직관적으로 이해할 수 있게 된다.

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