Programming/JavaScript
[Javascript][Lecture][드림코딩]자바스크립트 기초 강의(ES5+)(13/13)
중성자
2021. 11. 24. 22:40
728x90
13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)
// async & await
// clear style of using promise :)
// 1. async
// function fetchUser() {
// return new Promise((resolve, reject) => {
// // do network request in 10 secs...
// resolve("ellie");
// });
// }
async function fetchUser() {
// do network request in 10 secs...
return "ellie";
}
const user = fetchUser();
user.then(console.log);
console.log(user);
// 2. await
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function getApple() {
await delay(2000);
return "🍎";
}
async function getBanana() {
await delay(1000);
return "🍌";
}
// function pickFruits() {
// return getApple().then((apple) => {
// return getBanana().then((banana) => `${apple} + ${banana}`);
// });
// }
async function pickFruits() {
const applePromise = getApple();
const bananaPromise = getBanana();
const apple = await applePromise;
const banana = await bananaPromise;
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);
반응형