[javascript] async & await

https://imswengineer.tistory.com/118

[javascript] 비동기 처리

https://imswengineer.tistory.com/119

[javascript] 콜백함수

https://imswengineer.tistory.com/120

[javascript] Promise

 

async & await는 자바스크립트 비동기 처리 패턴 중 가장 최근 문법이다.

콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성하게 해준다.

 

async & await 기본 문법

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

먼저 함수의 앞에 async라는 예약어를 붙인다.

함수 내부 로직 중에서 HTTP통신을 하는 비동기 처리 코드 앞에 await를 붙인다.

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

 

 

async & 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는 프로미스 객체를 반환하는 함수이다.

프로미스란  "자바스크립트 비동기 처리를 위한 객체 "

fetchItems() 함수를 실행하면 프로미스가 이행되고 결과값은 items 배열이 된다.

logItems() 함수를 실행하면 fetchItems()함수의 결과 값인 items (배열)가 resultItems 변수에 담긴다.

await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then()등을 사용해야 했다.

 

 

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

각각 사용자와 할일의 목록을 받아오는 HTTP통신코드가 있어 사용자 정보와 할일 정보가 담긴 프로미스객체가 반환됨.

 

아래와 같이 작성하면 로직의 순서는,

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

1. fetchUser()를 이용하여 사용자 정보 호출
2. 받아온 사용자 아이디가 1이면 할 일 정보 호출
3. 받아온 할 일 정보의 제목을 콘솔에 출력 순이다.

만약 콜백이나 프로미스로 했다면 훨씬 더 코드가 길어졌을 것이고 가독성도 좋지 않았을 것이다.

 

 

async & await 예외 처리

async & await에서 예외를 처리하는 방법은 바로 try - catch이다.

프로미스에서는 .catch()를 사용했던 것 처럼 async에서는 catch{}를 사용

위의 코드를 실행하다가 발생한 네트워크 통신 오류뿐만 아니라 간단한 타입 오류 등의 일반적인 오류까지도 catch로 잡아낼 수 있다.

발견된 에러는 error 객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리해주면 된다.

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/

자바스크립트 async와 await