async/await란?

• Promise를 활용한 비동기 코드를 직관적으고 간결하게 작성하는 문법으로, 비동기 코드를 동기 코드처럼 간결하게 작성할 수 있다.

💡 메소드 체이닝이 많이 사용되는 코드에서는 Promise가 코드에 일관성을 지켜서 더 깔끔하게 보일 수 있고, 개별 함수를 호출하여 값을 받아오는 경우 async/await이 효과적이다.

• async 함수는 항상 promise를 반환(리턴), 만약 async 함수의 반환값이 명시적으로 promise가 아니라면 암묵적으로 promise로 감싸진다.
• await 키워드는 Promise를 리턴하지 않는 함수라도 사용할 수 있지만 이 경우 리턴한 데이터는 Promise.resolve()로 감싸진다.
• 자바스크립트는 await 키워드를 만나면 promise가 처리될 때까지 기다린다. await는 반드시 async 함수 안에서만 사용된다.

문법 async function ()

async function asyncFunc() {
	let data = await fetchData() // 실행 1
	let user = await fetchUser(data) // 실행 2
	return user
}

• function 키워드 앞에 async을 붙여 만든다.
• 위 예시에서 fetchData, fetchUser가 Promise를 리턴하는 함수이다.
• await 키워드는 then 메서드 체인을 연결한 것처럼 작성순서대로 동작한다. 즉, await키워드 뒤의 함수가 끝날 때까지 다음 await 키워드의 함수는 기다리게 된다.

에러 처리

1. 일반 Promise 함수 에러처리

function fetchData1() {
	return request()
		.then((response) => response.requestData)
		.catch((error) => {console.log("실패")})
}

Promise를 리턴하는 함수의 경우, 에러가 발생하면 catch메서드를 이용하여 에러를 처리한다.

1. async await을 이용한 에러처리

async function asyncFunc(){
	try {
		let data1 = await fetchData1()
		return fetchData2(data1)
	} catch (e) {
		console.log("실패:", e)
	}
}

• try-catch 구문으로 await 코드를 감싼다.
• 위 예시의 catch 절의 e는, Promise의 catch 메서드가 받는 반환 값과 동일하다.
• try catch 구문을 나누어서 각 에러에 개별적으로 대응을 하는 것으로 에러처리를 세분화 시킬 수도 있다.