Promise, 비동기, async, non-block

 

---

시간 관점에서는 Async와 Sync로 나눌 수 있고,
제어권 관점에서는 blocking과 non-blocking으로 나눌 수 있다.

Promise  

 

비동기적인 것을 수행할 때 콜백함수 대신 유용하게 쓸 수 있는 object

 

정해진 기능을 수행하고 나서 정상적으로 마무리되었다면 결과값을 전달해준다
문제가 생겼다면 error를 전달해준다.

state: pending -> fulfilled or rejected
Producer vs Consumer

reject(): 주로 error object를 통해서 값을 전달한다.

 

promise //
    .then(value =>{
    console.log(value);
    })
    .catch(error =>{
    console.log(error);
    })
    .finally(()=>{console.log('finally')});

 

Promise chaining

 

const fetchNumber = new Promise((resolve, reject)=>{
    setTimeout(()=> resolve(1), 1000);
});

fetchNumber
.then(num => num*2)
.then(num => num*3)
.then(num => {
    return new Promise((resolve, result)=>{
        setTimeout(()=> resolve(num-1), 1000);
    })  
})
.then(num => console.log(num));

 

 

Error handling

 

const getHen = () =>
    new Promise((resolve, reject)=>{
        setTimeout(()=> resolve('🐓'), 1000);
    });
const getEgg = hen =>
    new Promise((resolve, reject)=>{
        setTimeout(()=> reject(new Error(`error! ${hen}=> 🥚`)), 1000);
    })
const cook = egg => 
    new Promise((resolve, reject)=> {
        setTimeout(()=> resolve(`${egg} => 🍳`), 1000);
    })


getHen() //
.then(getEgg)//.then(hen => getEgg(hen)) 콜백함수를 전달할 때 받아오는 벨류를 
             //다른 함수로 호출하는 경우 간단히 코드 작성가능. 자동적으로 getEgg라는 
             //함수에 전달해서 
.catch(error => {   
    return '🥖';
})
.then(cook)//.then(egg => cook(egg))
.then(console.log)//.then(meal => console.log(meal))
.catch(console.log)

 

---

 

 

Async & await  

 

기존에 있던 promise 위에서 조금 더 간편한 API를 제공
좀 더 간결하게 만들어주며, 동기적으로 실행되는 것처럼 보이게 만들어준다.

 

async

 

async function fetchUser(){
    //do network request in 10 secs..
    return 'ellie';
    };


const user = fetchUser(); //Promise {<fulfilled>: 'ellie'} 출력 
user.then(console.log)
console.log(user);

 

await

 

async function pickFruits(){
    const applePromise = getApple();
    const bananaPromise = getBanana();
    
    const apple = await applePromise;
    const banana = await bananaPromise;
    

return `${apple} + ${banana}`;} 

pickFruits().then(console.log);

 

 

Promise.all

 

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); //🍎 출력된다.

 

 

 

---