여씨의 개발이야기
[입문] await과 async 본문
// async & await
// clear style of using promise :)
// 1. async
async function fetchUser() { // syntactic sugar : promise 대신 async 한 단어만 넣으면 promise 기능 완!
// do network reqeust in 10 secs....
return 'jisun';
}
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 getBanana(){
return delay(3000).then(()=>'🍌');
}
async function pickFruits() {
const applePromise = getApple();
const bananaPromise = getBanana(); // 이렇게 각 promise를 await하기 전에 만들어주면
const apple = await applePromise; // 이 놈과
const banana = await bananaPromise; // 이 놈이 병렬적으로 실행하게 됨
return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
// 3. useful APIs ✨ // 위의 pickFruits 를 좀 더 간단하게!
function pickAllFruits() {
return Promise.all([getApple(), getBanana()]).then(fruits =>
// Promise.all : promise들을 모아서 병렬실행
fruits.join(' + ') // 결과값을 배열로 받아오니 join을 사용
);
}
pickAllFruits().then(console.log);
function pickOnlyOne() {
return Promise.race([getApple(), getBanana()]);
// Promise.race : 배열에 전달된 promise중에 빨리 끝난 놈을 가져옴
}
pickOnlyOne().then(console.log);
'🐾 Programming Lang > 🛸 Javascript' 카테고리의 다른 글
[UTIL] 오늘 날짜, 현재 시간 구하기 (0) | 2023.10.05 |
---|---|
[입문] Promise에 대해 아라보자 (0) | 2022.03.11 |
[Library] Ajax vs fetch vs axios (1) | 2022.03.04 |
[동기와 비동기] new Promise(resolve => setTimeout(resolve, ms)); 이게 몬데요...?;;; (0) | 2022.02.14 |
[실무] 현재 페이지 링크 복사하는 법 (0) | 2022.01.28 |
Comments