Front-end/Javacript
자바스크립트 Tutorial By Ellie (11)
Jace.K
2021. 5. 27. 06:46
비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs
// async & await
// clear style of using promise :)
// 1. async
async function fetchUser() {
// do network request in 10 secs....
return 'ellie';
}
const user = fetchUser();
user.then(console.log);
console.log(user);
// 2. await
// await은 async가 붙은 함수 안에서만 사용한다.
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
await delay(3000);
return 'apple';
}
async function getBanana() {
await delay(3000);
return 'banana';
}
async function pickFruits() {
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
// 3. useful Promise APIs
function pickAllFruits() {
return Promise.all([getApple(), getBanana()]).then(fruits =>
fruits.join(' + ')
);
}
pickAllFruits().then(console.log);
function pickOnlyOne() {
return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);