[Javascript] async와 await

📝 async / await 란?

Promise를 활용한 비동기 코드를 간결하게 작성하는 문법이다.

🎯 async / await 특징

• async / await 문법으로 비동기 코드를 동기 코드처럼 간결하게 작성할 수 있다.
• async 함수와 await 키워드를 이용한다.
• await 키워드는 반드시 async 함수 안에서만 사용해야 한다.
• async로 선언된 함수는 반드시 Promise를 리턴한다.
• Promise를 대체하기 위한 기능은 아니며 내부적으로는 Promise를 사용해서 비동기를 처리한다. 단지 코드 작성할 때 유지보수가 쉽고 편하게 보이도록 문법을 다르게 작성한 것이다.

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

---

async 함수

async function asyncFunc() {
	let data = await fetchData()
	let user = await fetchUser(data)
	return user
}

• async 함수는 function 키워드 앞에 async를 붙여 만든다.
• fetchData, fetchUser은 Promise를 리턴하는 함수이다.
• await 키워드는, then 메서드체인을 연결한 것처럼 순서대로 동작한다.
• 비동기코드에 쉽게 순서를 부여한다
• 변수 = await 프로미스; 인 경우 프로미스가 resolve된 값이 변수에 저장된다.
• async에서 return한 값은 두가지 방법으로 받을 수 있다.

	1) asyncFunc().then((result) => ...) 
	2) const result = await asyncFunc()

try-catch 에러처리

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

• try-catch 구문으로 async / await 형태 비동기 코드 에러 처리가 가능하다.
• catch 절의 e는 Promise의 catch 메서드가 받는 반환 값과 동일하다.