자바스크립트 비동기 처리 async & await

 

What is async & await?

 

async & await 문법은 자바스크립트 비동기 처리 패턴 중 비교적 최근에 나온 문법이다.

이는 콜백 함수와 프로미스의 단점을 보완하고 가독성을 높이고 관리의 편의성을 높인 방식이다.

 

기본 문법 구조

 

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

async는 함수명 앞에 붙여주고 await는 비동기 처리 메소드명 앞에 붙여준다.

await 뒤에 오는 비동기 처리 메소드는 반드시 Promise 객체를 반환하는 함수여야 한다.

보통 Axios와 같이 프로미스 객체를 반환하는 API 호출 함수가 비동기 처리 메소드 자리에 온다.

그리고 await 키워드는 async 함수 내부에서만 유효하다.

 

 

여러 개 비동기 처리 다루기 with HTTP 통신

 

function fetchUser() {
  let url = 'blabla'
  return fetch(url).then(function(response) {
    return response.json();
  });
}

function fetchTodo() {
  let url = 'blablablabla';
  return fetch(url).then(function(response) {
    return response.json();
  });
}

 

위 예제는 서버에서 각각 사용자 정보와 투두리스트를 받아오는 비동기 처리 작업들이고,

각각 정보를 담은 프로미스 객체를 반환한다.

 

async function logTodoTitle() {
  const user = await fetchUser();
  if (user.id === 1) {
    const todo = await fetchTodo();
    console.log(todo.title);
  }
}

 

위 비동기 작업들을 모두 await 뒤에 넣어준다.

해당 로직은 사용자 정보를 받아오고,

사용자 id 가 1과 일치하면 투두리스트를 받아오고,

콘솔에 투두리스트 제목을 출력하는 것이다.

 

 

async & await 에러 처리

 

프로미스 객체가 rejected 됐을 때 에러를 처리하는 방법으로는 try & catch를 사용하면 된다.

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); 
    }
  } catch (error) {
    console.log(error);
  }
}

 

async 함수 내에서 return 하기

 

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch (e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}

 

async 함수 내에서 return 되는 값은 암묵적으로  Promise.resolve()로 감싸서 리턴된다.

따라서 processDataInWorker(v) 함수가 실행되고 나서 반환된 값이 프로미스 객체가 된다.

 

 

 

async & await 와 Promise의 chaining 비교

 

// Promise

p(1000)  //setTimeout 함수가 있는 p함수
  .then(() => p(1000))
  .then(() => p(1000))
  .then(() => {
    console.log('3초 후 실행');
  });
  
//async & await

(async function main() {
  await p(1000);
  await p(1000);
  await p(1000);
  console.log('3초 후 실행');
})();
  

 

프로미스를 연결하는 코드를 보면 체이닝하는 느낌이 강하게 들고,

async&await 문법은 비동기 코드를 한 줄 한 줄 끝내서 뭔가 더 깔끔한 그런 느낌이 든다.

 

 

async & await 문법으로 Axios 사용하기

 

참고 링크1

참고 링크2

 

 

 

참고

 

• MDN
• CAPTAIN PANGYO_Post