TIL #10 | async와 await

async와 await

• async와 await 문법을 사용하면 promise를 좀 더 편하게 사용할 수 있다.

async

async가 붙은 함수는 반드시 promise를 반환한다.
-> (promise가 아닌 값을 반환해도 promise를 감싸 이행된 promise로 반환되도록 한다.)

async function func() {
	return 1;
}

func().then(alert) // Promise {<fulfilled>: 1}, alert: 1

await

await 키워드를 만나면 promise가 처리될 때까지 기다린다.

• await는 async 함수 안에서만 동작한다. (async 함수 안이 아니면 에러 발생)
• await는 promise.then 보다 가독성 좋게 promise의 result값을 얻을 수 있게 한다.

async function func() {
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => resolve("완료"), 1000)
	})

	let result = await promise; // promise 처리될 때까지 기다린다.
	alert(result)
}

func()

async/await를 사용한 비동기 처리 예시

async function showAvatar() {
	// fetch 사용하여 json 데아터 가져오기
	let response = await fetch('/~~/~.json');
	let user = await response.json();

	// fetch 사용하여 github 사용자 데아터 가져오기
	let githubResponse = await fetch('https:// ~ github.com/users/${user.name}');
	let githubUser = await githubResponse.json();

	let img = document.createElement('img');
	img.src = githubUser.avatar_url;
	img.className = 'promise-avatar-example';
	document.body.append(img);
	// 3초 대기
	await new Promise((resolve, reject) => setTimeout(resolve, 3000));
	img.remove();

	return githubUser;
	
}

showAvatar();

• promise.then을 사용한 것보다 코드가 깔끔해졌다.

최상위 레벨 코드에서 await를 사용하고 싶은 경우

• 익명 async 함수로 코드를 감싸서 사용하면 최상위 레벨 코드에도 await를 사용할 수 있다.

(async () => {
	let response = await fetch('/~.json');
	let user = await response.json();

})();

await 에러 처리

1. try..catch문

async function func() {
	try {
		let response = await fetch('/~.json');
		let user = await response.json();
	} catch(err) { // fetch와 response.json()에서 발생한 에러 처리
		alert(err)
	}
}

2. .catch

async function func() {
	let response = await fetch("https://~")
}

func().catch(alert); // fetch에서 발생한 에러 처리

Promise.all

여러 개의 Promise를 처리해야할 경우 유용하게 사용한다.

• 병렬 처리되기 때문에 데이터가 로딩되는 시간을 줄일 수 있다.
• 여러 개의 프라미스 처리를 기다려야 할 경우 Promise.all과 같이 사용

async function func() {
	let [results1, result2] = await Promise.all([
		fetch(url1),
		fetch(url2)
		...
	])
}

---

회고

오늘은 Promise 비동기 처리를 async와 await를 활용하여 간단하게 처리하는 방법을 알아보았다. 앞으로의 실습과 프로젝트에선 async와 await를 사용하여 비동기 처리를 하는 것이 간단하게 사용할 수 있어서 좋을 것 같다.
여러 API에 접근해서 데이터를 가져올 경우 Promise.all을 사용하여 좀 더 간단한 코드를 작성해보는 것이 좋을 것 같다.