JavaScript - 비동기, async/await

async/await란?

자바스크립트에서 비동기 처리를 위해 콜백 함수를 사용하였으나 반복적으로 사용할 경우 Callback Hell이 발생하는 문제점이 있었다. Callback Hell을 방지하기 위해 사용한 Promise도 마찬가지로 코드가 길어지면 가독성이 떨어지는(.then 지옥) 문제가 발생한다.

이를 개선하기 위해 비동기 처리 패턴 중 가장 최근인 ES8에서 async/await 키워드가 추가되었고 복잡한 Promise 코드를 간결하게 작성할 수 있게 되었다.

async/await 사용하기

// 함수 선언식
async function funcDeclarations() {
	await 작성하고자 하는 코드
	...
}

// 함수 표현식
const funcExpression = async function () {
	await 작성하고자 하는 코드
	...
}

// 화살표 함수, try/catch
const ArrowFunc = async () => {
  try {
	const res = await axios.get(url)
	console.log(res);
  } catch(err) {
    console.error(err);
  }
}

1. 함수 앞에 async 키워드를 붙여준다.
   async 함수안에서 번거롭게 Promise를 쓰지 않아도 자동적으로 코드 블럭들이 Promise로 변환된다.

2. async 함수 내에서만 await 키워드를 사용하며 Promise 앞부분에 await를 넣어준다. await는 Promise를 받아 처리하고 비동기 코드가 동기적으로 실행되는 것처럼 간편하게 작성이 가능하다.

3. try/catch문으로 감싸 에러 처리를 한다.