드림코딩 : JS - 13. async, await, Promise APIs (비동기의 꽃)

async는 Promise의 syntatic sugar

//async & await
// 깔끔하게 promise를 사용하는 방법 :)
 
//1. async (비동기)
async function fetchUser() {
    //네트워크 통신해서 받아오는데 10초 걸린다...가정
    return 'sigcho';
};
 
const user = fetchUser();
user.then(console.log); //fetchUser()함수는 Promise 이므로 then 사용 가능
console.log(user);
 
 
 
//2. await
function delay(ms) {  //ms: 밀리세컨즈
    return new Promise(resolve => setTimeout(resolve, ms)); //정해진 시간이 지나면 resolve를 호출하는 Promise 리턴한다
}
 
async function getApple() { //async: Promise를 만든다
    await delay(2000);  //await: delay가 끝날때까지 기다린다
    return '🍎';   //1초 후 🍎 리턴
}
 
async function getBanana() { 
    await delay(1000);
    return '🍌';
}
function getBanana() {  //Promise로 chaining, 위와 같다
    return delay(1000)
    .then(() => '🍌');
}
 
async function pickFruits() {
    const applePromise = getApple(); //Promise는 만들면 바로 실행된다
    const bananaPromise = getBanana();
    const apple = await applePromise(); //동기화 시켜준다, 1초만에 🍎 + 🍌 실행(병렬적! 동시에 실행)
    const banana = await bananaPromise();
    return `${apple} + ${banana}`
}
function pickFruits() {  //Promise로 chaining, 위와 같다, 콜백지옥??!
    return getApple()
    .then(apple => {
        return getBanana()
        .then(banana => `${apple} + ${banana}`);
    });
}
 
pickFruits().then(console.log);
 
 
 
//3. useful Promise APIs (간단하게 만들 수 있다)
//all
function pickAllFruits() {
    return Promise.all([getApple(), getBanana()]) //모든 Promise들이 병렬적으로 받을 때까지 모아준다, 배열 형태로 전달
    .then(fruits => fruits.join(' + ')) //그러고나면, 배열을 string으로 만든다
}
 
pickAllFruits().then(console.log);
 
//race
function pickOnlyOne() {
    return Promise.race([getApple(), getBanana()]); //배열 중 가장 먼저 값을 리턴하는 아이만 전달된다
}
 
pickOnlyOne().then(console.log); //🍌가 1초라서 먼저 출력된다, 🍎는 2초
 

 

 

async 콘솔 값

 

 

 

 

숙제 : 콜백지옥 Promise를 async로 간단하게 만들기