TIL. 42 await & async

📑 await, async

async와 await는 자바스크립트의 비동기 처리 문법 중 하나이다. 기존의 비동기 처리 방식의 단점인 코드가 길어지는 것과 콜백지옥에서 벗어날 수 있게 도와주고, 코드의 가독성을 살려준다.

기본 형태

const 함수명 = async() => {
  await 비동기 처리 코드
}

• 일반적으로 axios와 같은 프로미스를 반환하는 API 호출 함수에 주로 쓰인다.

const asyncCall = async() => {
  const data = await fetch()
  
  if (data.id === 1) {
    console.log(data.name)
  }
}

• 위 코드에서는 fetch가 호출되고 data를 받아오면 if문으로 넘어간 후 콘솔이 출력된다.

예외 처리(try catch)

• 프로미스에서 .catch()를 사용했던 것처럼 async & await에서도 비슷하게 예외 처리를 할 수 있다.

• error 객체에 내용이 담기기 때문에 유형에 맞게 처리할 수 있고, 통신 오류와 간단한 타입 오류 등 일반적인 오류도 잡아낼 수 있다.

• try 내부에는 성공 관련 로직만 있고, catch 내부에는 실패 관련 로직만 있다.

const asyncCall = async() => {
  try {
    const data = await fetch()
  
    if (data.id === 1) {
      console.log(data.name)
    }
  } catch(error) {
    console.log(error);
  }
}