async/await를 사용하는 이유

 

자바스크립트는 단일 스레드로 동작한다

이에 따라 동기적인 코드는 실행순서에 따라 차례대로 실행되고

비동기적인 코드 실행은 콜백함수를 이용해 구현된다.

콜백함수를 이용한 비동기 코드는 콜백헬(callback hell)이라는 코드의 가독성과 유지보수성을 저해하는 문제가 발생할 수 있다

 

async/await

• 콜백 지옥을 해결하기 위해 만들어짐
• async 함수 내에서 await라는 키워드를 사용하여 비동기 작업이 완료될 때까지 기다리도록 지시할 수 있다
• 코드 가독성과 유지보수성을 높일 수 있다
• 에러처리를 간편하게 해줌
• 코드를 더욱 직관적으로 작성할 수 있다.

 

예시(callback 함수)

function getData() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

getData();

 

• fetch 함수를 호출
• 해당 Promise가 resolve 될 때까지 then 메서드를 사용하여 다음 작업을 연속적으로 처리
• Promise가 reject될 때, catch 블록에서 해당 에러 처리

 

예시(async/await)

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

 

• async 함수 getData내에서 fetch 함수를 호출
• 해당 Promise가 resolve 될 때까지 await 키워드를 사용하여 기다린 후
• response객체를 JSON 형태로 파싱한 data를 출력한다
• Promise가 불가능한 경우에는 catch 블록에서 해당 에러 처리

 

콜백함수를 사용했을 때보다 async/await를 사용한 코드가 가독성이 좋고 에러처리가 간편해진 것을 볼 수 있다.