TIL.비동기 프로그래밍 async await

async await

async await을 이용해서 비동기 코드를 작성하면 프로미스의 then 메서드를 체인 형식으로 호출하는 것보다 가독성이 좋아진다.
그렇다고 async await이 프로미스를 완전히 대체하는 것은 아니다. 프로미스는 비동기 상태를 값으로 다루기에 async await보다 큰 개념

async await함수는 프로미스를 반환한다.
프로미스는 객체로 존재하지만 async await은 함수에 적용되는 개념이다.
다음과 같이 async await함수는 프로미스를 반환한다.

async function getData(){
  return 123;
}
getData().then(data=> console.log(data));//123

async키워드를 이용해서 정의된 함수는 async await함수이며 항상 프로미스를 반환한다. 그래서 함수 호출 수 then 메서드를 사용할 수 있다.

await키워드를 사용하는 방법

await키워드는 async await함수 내부에서 사용된다. await키워드 오른쪽에 프로미스를 입력하면 그 프로미스가 처리됨 상태가 될 때까지 기다린다. await키워드로 비동기 처리를 기다리면서 순차적으로 코드를 작성할 수 있다.

function getData(){
  const data=await requestData(10)//에러발생
  console.log(data);

위 코드처럼 await키워드는 async키워드 없이 사용할 수 없다.

async await는 프로미스보다 가독성이 좋다
async await와 프로미스는 비동기 프로그래밍을 동기 프로그래밍 방식으로 작성할 수 있게 해준다. 다음 코드는 async await와 프로미스를 비교하기 위해 같은 기능을 각각의 방식으로 구현한 것이다.

function getDataPromise(){
  asyncFunc1()
  .then(data =>{
    console.log(data);
    return asyncFunc2();
  })
  .then(data=>{
    console.log(data);
  });
}
async function getDataAsync(){
  const data1=await asyncFunc1();
  console.log(data1);
  const data2=await asyncFunc2();
  console.log(data2);
}

async await이 더 간결함을 볼 수 있다.

예외처리하기
async await함수에서 예외를 처리하는 방법을 알아보자. async await 함수 내부에서 발생하는 예외는 다음과 같이 try catch 문으로 처리하는게 좋다.

async function getData(){
  try{
    await doAsync();//비동기 함수
    return doSync();//동기 함수
  }
  catch(error){
    console.log(error);
  }
}

비동기 함수와 동기 함수에서 발생하는 모든 예외가 catch문에서 처리된다.