[Javascript] await / async 에 대해..(비동기 처리)
2021. 7. 14. 22:37ㆍfront-end/JavaScript
//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);
'front-end > JavaScript' 카테고리의 다른 글
[JavaScript] CSS 변수 사용과 JS (0) | 2021.08.22 |
---|---|
[JavaScript] event는 어떻게 호출˙발생하고, 어떻게 막지? (0) | 2021.07.08 |
[JavaScript] strict Mode(엄격모드) 라고 아십니까? (0) | 2021.07.06 |
[Javascript ] 콜백함수 남용에 대한 위험성.. (0) | 2021.07.06 |
[JavaScript] 웹 브라우저에 무슨 일이 ?? What happened to web Browser? (0) | 2021.07.05 |