javascript async, await

기본 문법

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

비동기 처리 메서드는 Promise를 반환해야 await가 의도한 대로 동작합니다.
axios등 프로미스를 반환하는 API호출 함수가 await의 대상이 됩니다.

function 앞에 async 를 붙이면 해당 함수는 항상 promise를 반환합니다. await는 async 함수 안에서만 동작합니다. await 키워드를 만나면 Promise가 처리될 때까지 중단됐다가 실행이 재개됩니다. 이 때 promise 변수에 resolved Promise 값이 할당됩니다.

promise가 처리될 때까지 중단되면서 다른 일을 할 수 있기 때문에 CPU리소스가 낭비되지 않습니다. await는 promise.then()보다 가독성 좋게 동기적으로 실행하는 것 처럼 promise 결과 값을 얻을 수 있게 하는 문법입니다.

async await 예제

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

// Promise.then()
function logItems() {
  fetchItems()
  	.then(console.log);
}

// async awiat code
async function logItems() {
  var resultItems = await fetchItems();  
  //fetchItems실행 후에 consle.log
  console.log(resultItems); // [1,2,3]
}

async await 실용 예제

사용자와 할 일 목록을 받아오는 HTTP 통신 코드

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();
  });
}

fetchUser => 그 user의id가 1이면 => fetchTodo() 순서로 실행돼야할 때

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

fetchUser은 fetch를 실행하여 비동기로 실행이 완료되기 전에 userid ===1을 실행할 수 있으므로 await로 fetch 실행이 완료될 때까지 중단되도록 합니다.

logTodoTitle()를 실행하면 콘솔에 delectus aut autem가 출력될 것입니다. 위 비동기 처리 코드를 만약 콜백이나 프로미스로 했다면 훨씬 더 코드가 길어졌을 것이고 인덴팅 뿐만 아니라 가독성도 좋지 않았을 겁니다. 이처럼 async await 문법을 이용하면 기존의 비동기 처리 코드 방식으로 사고하지 않아도 되는 장점이 생깁니다.

예외처리 문법

then().catch() 처럼 에러를 잡기위해 try 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);
  }
}