2021.07.28(Wen.) <Async & Await의 기초>

그래요. Async와 Await는 어디에나 있어요. 그래서 엄.청.중.요.합.니.다

1. 왜 씁니까?

• promise를 조금 더 깔끔하고 더 동기적으로 보이게끔 만든다.
• 콜백 함수나 promise가 너무 많으면 코드를 읽기 너무 힘들다. 그저 promise에 요소를 조금 더 해서 사용하는 'syntactic sugar'이 된다!

2. 어떻게 사용하나요?

//! promise Ver.
function findUser() {
	return new Promise((resolve, reject) => {
		// 뭔가 통신을 한다던지 지연이 일어난다.
        resolve('Hendrix');
	});
}

const user = findUser();
user.then(console.log);
console.log(user)

//! async Ver.
async function findUser() {
		// 뭔가 통신을 한다던지 지연이 일어난다.
        return 'Hendrix';
}

const user = findUser();
user.then(console.log);
console.log(user)

 

• 물론 둘의 결과는 똑같다. 그저 promise를 줄여서 async로 퉁 친 것이다. 하지만 가끔은 promise가 필요할 때가 있다. 마치 for... 과 while처럼 말이다.

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

async function beatIt() {
	await delay(1000);
    return 'Oh No...Help';
}

async function defense() {
	await delay(2000);
    return 'Miss!';
}

• await은 setTimeout에 의해 소괄호에 적힌 시간에 맞게 기다렸다가 리턴하게 된다.
• 이외에 promise.all이나  then으로 연결할 수 있는 부분은 다른 포스팅에서 정리하는 것이 좋을 것 같다.