비동기의 꽃 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);
'Front-end > Javacript' 카테고리의 다른 글
event.preventDefault() 설명 (0) | 2021.06.21 |
---|---|
자바스크립트 최신 문법 (ES6, ES11) (0) | 2021.05.27 |
자바스크립트 Tutorial By Ellie (10) (0) | 2021.05.27 |
자바스크립트 Tutorial By Ellie (9) (0) | 2021.05.26 |
자바스크립트 Tutorial By Ellie (8) (0) | 2021.05.26 |