[JavaScript] async & await

📝 async와 await을 사용하여 직관적으로 비동기 처리 코드를 작성해보자

async

---

📍 async란

async는 Promise를 더 쉽게 이용할 수 있게 도와준다.
함수 앞에 async를 붙이면 해당 함수는 Promise를 반환하는 비동기처리 함수가 된다.

📍 사용 예제

function hello(){
	return "hello";
}

async function helloAsync(){
	return "hello Async";
}

console.log(hello()); // hello
console.log(helloAsync()); // Promise{<pending>}

helloAsync 함수 앞에 async가 붙여져 있어, Promise를 반환하고 있는 것을 알 수 있다. 그렇다면 이제 helloAsync 함수에 then을 사용할 수도 있다.

helloAsync().then((res) => {
	console.log(res);
}); // hello Async

async를 붙여준 helloAsync 함수의 return 값은 Promise의 resolve 결과값이 된다.

await

---

📍 await이란

await은 async 함수 안에서만 동작하며,
JavaScript는 await을 만나면 Promise가 처리될 때까지 기다린다.

📍 사용 예제

// function delay(ms){
// 	return new Promise((resolve) => {
// 		setTimeout(() => {
// 			resolve();
//		}, ms);
//	});
//}

function delay(ms){
	return new Promise((resolve) => {
		setTimeout(resolve, ms);
	});
}

1. delay()함수 생성

• 전달받은 ms만큼 setTimeout이 대기했다가, resolve하며 끝나는 delay 함수를 만들었다.
• setTimeout이 resolve하는 것 밖에 없으므로 콜백함수 자체를 resolve로 전달하는 아래의 형태로 간추릴 수 있다.

// async function helloAsync(){
// 	return delay(3000).then(() => {
// 		return "hello Async";
// 	});
// }

async function helloAsync(){
	await delay(3000);
	return "hello async";
}

helloAsync.then((res) => {
	console.log(res);
});

// 3초뒤, hello Async 출력됨

2. await 사용

• await을 사용하여 return을 2번하고 있는 helloAsync()를 간단하게 바꾸어볼 수 있다.
• await을 비동기 함수 호출 앞에 붙이면 비동기 함수가 마치 동기적인 함수처럼 작동한다.
• await이 붙은 함수의 호출은 뒤에 있는 함수가 끝나기 전까지 아래의 코드를 수행하지 않는다.

참고

---

한입 크기로 잘라 먹는 리액트를 학습하며 개인적으로 정리한 내용입니다.