js) async & await

• 기존의 비동기 처리 방식인 콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

async & await의 형식

async function 함수명() {
  await 비동기처리메서드();
} // 비동기처리메서드가 반드시 프로미스 객체를 반환해야 한다. 

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

예제 (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() 함수를 실행하면 프로미스가 이행되며 결과 값은 items 배열이 된다.
• logItems() 함수를 실행하면 fetchItems() 함수의 결과 값인 items 배열이 resultItems 변수에 담긴다. 따라서 콘솔에는 [1,2,3]이 출력된다.

예제 (2) -> 여러개의 비동기 처리 코드를 다룰 때

function fetchUser() {   // 1번 유저 정보 출력
  var url = 'https://jsonplaceholder.typicode.com/users/1'
  return fetch(url).then(function(response) {
    return response.json();
  });
}

function fetchTodo() {  // 1번 할일목록 출력
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  return fetch(url).then(function(response) {
    return response.json();
  });
}

async function logTodoTitle() {
  var user = await fetchUser();
  if (user.id === 1) {   //유저정보를 확인한 뒤 
    var todo = await fetchTodo(); // fetchTodo() 실행
    console.log(todo.title); // todo 첫번째 항목의 title 출력
  }
}

async & await 예외처리

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

출처 : https://joshua1988.github.io/web-development/javascript/js-async-await/#%EB%93%A4%EC%96%B4%EA%B0%80%EB%A9%B0