front-end/JavaScript
[Javascript] await / async 에 대해..(비동기 처리)
Nat
2021. 7. 14. 22:37
//async & await
//clear style of using promise
//1. async
async function fetchUser(){
//do network request in 10 secs..
return 'beshyun';
}
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 '🍌';
}
//프로미스도 중첩되면 콜백지옥을 연상케 됨.
//병렬적 await > 동시다발적 실행
async function pickFruits(){
const applePromise = getApple(); //Promise 안에 있는 코드블럭 실행 각각 시키고
const bananaPromise = getBanana();
const apple = await applePromise; //await > 동기화 시켜줌..
const banana = await bananaPromise;
return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
//3. useful APIs ✨
function pickAllFruits(){//Promise 에 있는 all APIs
return Promise.all([getApple(), getBanana()]).then(fruits =>
fruits.join(' + ')//배열을 스트링으로 묶을 수 있는 join
);
}
pickAllFruits().then(console.log);
function pickOnlyone(){
return Promise.race([getApple(),getBanana()]);
}
pickOnlyone().then(console.log);