[ JavaScript 총정리 12 ] async / await / Promise APIs
15002 단어 JavaScriptJavaScript
async & await
async
와 await
은 Promise를 조금 더 간결하게 그리고 동기적으로 실행되는 것처럼 보이도록 만들어준다. Promise chainig과 같이 난잡해진 코드 위에 사용하면, 동기식으로(순서대로) 코드를 작성하는 것처럼 간편하게 만들 수 있다.
이렇게 기존에 존재하는 것 위에 간편하게 쓸 수 있는 API를 제공하는 것을 📌 syntactic sugar
라고 한다.
async
promise로 만든 것을 async로 간편하게 작성해 보자.
<script>
// Promise로 만든 것
function fetchUser(){
return new Promise((resolve, reject) => {
resolve('yura');
})
}
// async를 사용하여 간단하게 표현
async function fetchUser(){
return 'yura';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
</script>
await
<script>
function delay(ms){
// 정해진 시간 ms가 지나면 resolve를 호출하는 Promise를 리턴
return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple(){
// await은 이 delay가 끝날때까지 3초 기다려준다.
await delay(3000);
return '🍎';
}
async function getBanana(){
await delay(3000);
return '🍌';
}
// -> getBanana()를 Promise chaining으로 표현한다면?
function getBanana(){
return delay(3000)
.then(()=> '🍌');
}
function pickFruits(){
return getApple().then(apple => {
return getBanana().then(banana => `${apple} + ${banana}`);
});
}
// -> 위의 식을 async로
async function pickFruits(){
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`;
}
pickFruits().then(console.log); // 6초뒤 🍎 + 🍌 출력
</script>
Promise APIs
all
- Promise 배열을 전달하여 병렬적으로 다 받을 때까지 모아준다.
getApple
와 getBanana
는 서로 연관이 없기 때문에 각 3초라는 시간 즉, 총 6초를 기다려야 할 필요가 없다. 이 때, all
을 이용하여 병렬로 실행하면 3초만 기다리면 된다.
<script>
function pickAllFruits(){
return Promise.all([getApple(),getBanana()])
.then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log); // 3초뒤 🍎 + 🍌 출력
</script>
race
- 어떤 것이든 상관없이 먼저 리턴되는 첫번째 값만 받아오고 싶을 때
<script>
function pickOnlyOne(){
return Promise.race([getApple(), getBanana()])
}
pickOnlyOne().then(console.log);
</script>
<script>
function delay(ms){
// 정해진 시간 ms가 지나면 resolve를 호출하는 Promise를 리턴
return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple(){
// await은 이 delay가 끝날때까지 3초 기다려준다.
await delay(3000);
return '🍎';
}
async function getBanana(){
await delay(3000);
return '🍌';
}
// -> getBanana()를 Promise chaining으로 표현한다면?
function getBanana(){
return delay(3000)
.then(()=> '🍌');
}
function pickFruits(){
return getApple().then(apple => {
return getBanana().then(banana => `${apple} + ${banana}`);
});
}
// -> 위의 식을 async로
async function pickFruits(){
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`;
}
pickFruits().then(console.log); // 6초뒤 🍎 + 🍌 출력
</script>
all
- Promise 배열을 전달하여 병렬적으로 다 받을 때까지 모아준다.
getApple
와getBanana
는 서로 연관이 없기 때문에 각 3초라는 시간 즉, 총 6초를 기다려야 할 필요가 없다. 이 때,all
을 이용하여 병렬로 실행하면 3초만 기다리면 된다.
<script>
function pickAllFruits(){
return Promise.all([getApple(),getBanana()])
.then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log); // 3초뒤 🍎 + 🍌 출력
</script>
race
- 어떤 것이든 상관없이 먼저 리턴되는 첫번째 값만 받아오고 싶을 때
<script>
function pickOnlyOne(){
return Promise.race([getApple(), getBanana()])
}
pickOnlyOne().then(console.log);
</script>
🌱 Dream Coding 의 내용을 정리하였습니다 :)
Author And Source
이 문제에 관하여([ JavaScript 총정리 12 ] async / await / Promise APIs), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@roong-ra/JavaScript-총정리-11-async-await-Promise-APIs저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)