[JavaScript] 비동기의 꽃? async 와 await

🔎 promise에 이어서 async 와 await는 왜 사용하는지, 어떻게 사용하는지 학습하고자 한다.

✔️ async와 await란

→ async와 await는 깔끔하게 promise를 사용할 수 있는 방법이다. (promise를 조금 더 간결하고 간편하고 동기적으로 실행하는 것처럼 보이게 해준다)

async와 await는 새로운 것이 아니라 기존에 존재하는 promise 위에 조금 더 간편한 API를 제공하는 것이다.

그렇다고 해서 무조건 promise를 async 와 await로 바꿔줘야하는 것은 아니다.

✔️ async 써보기

function fetUser() {
 // do network request in 10 secs ...
 return 'jigu';
}
const user = fetchUser();
console.log(user);

✅ 위와 같이 작성할 경우, fetchUser이 나오기 까지 10초가 걸리고, 기다린 후 동기적 실행.

function fetUser() {
 return new Promise((resolve, reject) => {
 // do network request in 10 secs ...
 resolve('jigu');
});
}
const user = fetchUser();
user.then(console.log);
console.log(user);

✅ 그래서 동기를 비동기적으로 바꿔주기 위해 promise를 사용한다.

asyn function fetUser() {
 // do network request in 10 secs ...
 resolve 'jigu';
}
const user = fetchUser();
user.then(console.log);
console.log(user);

✅ 이를 조금 더 간결하게 작성하기 위해서 asyn를 사용한다.
asyn 키워드를 함수 앞에 쓰면 코드 블록이 자동으로 promise로 바뀐다

✔️ await 써보기

function delay(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}
asyn function getApple() {
	await delay(2000);
	return '🍎';
}
asyn function getBanana() {
	await delay(1000);
	return '🍌';
}
function pickFruits() {
	return getApple()
    .then(apple => {
    getBanana()
    .then(banana => `${apple} + ${banana}`);
    })
}
pickFruits().then(console.log);

✅ await이라는 키워드는 asyn가 붙은 함수 안에서만 사용 가능하다.

function pickFruits() 구문을 보면 콜백 지옥과 유사한 모습을 보이기 때문에 asyn와 await를 이용하여 아래와 같이 간단하게 만들 수 있다

asyn function pickFruits() {
	const apple = await getApple();
    const banana = await  getBanana();
    return ${apple} + ${banana}`;
}

✅ 하지만 아직 await가 사과에서 1초 기다리고, 바나나에서 1초 기다리고 각각 처리가 되고 있어 비효율적이다.

asyn function pickFruits() {
	const applePromise = getApple();
    const bananaPromise = getBanana();
	const apple = await applePromise();
    const banana = await bananaPromise();
    return ${apple} + ${banana}`;
}

✅ 이를 해결하기 위해 새로운promise를 생성해서 넣어주면, 병렬적으로 처리되어 사과와 바나나가 한번에 출력되게 된다.

const applePromise = getApple();
const bananaPromise = getBanana();

✅ 하지만 위처럼 동시다발적으로 수행이 가능한 경우, 저렇게 작성하지 않고 아래와 같이 pickAllFruits를 사용해서 작성한다.

function pickAllFruits() {
	return Promise.all([getApple(),getBanana()]).then(fruits => fruits.join(' + ')
);
}
pickAllFruits().then(console.log);

✅ 마지막으로, 배열의 프로미스 중에서 가장 먼저 배열에 리턴하는 한 아이만 전달하기 위해서는 아래와 같이 pickOnlyOne를 사용한다.

function pickOnlyOne() {
	return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);```

Resolve //성공 -> resolve
Reject //실패 -> catch