[JavaScript] async 와 await

출처

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

async & await 

자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.

비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완했다.

 

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

fetchUser() 이라는 메소드를 호출하면 사용자 객체를 반환한다고 생각해보자

여기서 fetchUser() 메소드는 서버에서 사용자 정보를 가져오는 HTTP통신코드라고 가정하면

위 코드는 async & await 문법이 적용된 형태라고 보면 된다.

 

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

위 코드에서 logName 이라는 함수로 감싸준 뒤 async와 await를 붙여준다면

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

이런 코드가 나오게 된다.

 

쉽게말해 서버에서 사용자 데이터를 불러와서 변수에 담고 사용자 아이디(user.id) 가 1 이면 사용자 이름을 출력한다 라는 명령을 주고 싶ㅇ면 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]
}

위 코드는 async&await의 간단한 예제코드이다.

 

먼저 fetchItems() 함수는 프로미스 객체를 반환하는 함수다. 프로미스는 자바스크립트 비동기 처리를 위한 객체이고 

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

 

logItems()를 보면 fetchItems() 함수의 결과 값인 items 배열이 resultItems 변수에 담기고 [1,2,3] 이 출력된다.

 

await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then() 등을 사용해야 했겠지만 async & await 문법 덕에 비동기에 대한 사고를 하지 않아도 되게 됐다.

 

async & await 예외 처리

async & await 에서 예외 처리하는 방법은 try catch 문이다.

프로미스에서 에러처리를 위해 .cathc()를 사용했던 것처럼 async에서는 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);
  }
}

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