Promise

💁 Promise

• 프로미스는 JS에서 제공하는 비동기 코드를 간편하게 처리할 수 있도록 돕는 object.

• 프로미스는 어떤 기능을 실행하고 나서 정상동작시 성공메세지 + 함께 처리된 결과값 전달// 예상치 못한 문제가 발생시 error전달

• State: pending(보류) → fulfilled(성공적인 완료) or rejected(거부)

• Promise의 object인 Produce vs Consumer

1. Producer (생산자)

• 프로미스는 클래스여서 new라는 생성자로 생성가능
• 프로미스는 executor 란 콜백함수 전달해줘야하며 이것은 두가지 콜백함수를(resolve, reject) 다시받음
• 프로미스를 만드는 순간 executor란 콜백함수 바로 실행

const promise = new Promise((resolve, reject)=>{
    
    //doing some heavy work(network, read files) 
    // => 동기적이라면 기다리느라 시간 너무 쓰니까 비동기적 추천
    
    console.log('doing something...');
    setTimeout(()=>{     
        resolve('dada');                   // 성공적으로 마무리했을때 resolve에 가공된 데이터 전달해서 호출
        //reject(new Error('no network')); // Error발생했을경우
    },2000)
    
}); // -> 사용자가 요구했을 때 실행되도록 만들어야한다면 다음과 같은 상태는 불필요한 통신을 야기할 수 있음

 

2. Consumer (소비자)

• then, catch, finally를 통해서 값을 받아 올 수 있음
• promise object 만들때 비동기적으로 수행하고 싶은 내용들을 안에 적어준 후 성공적이면 resolve호출 실패면 reject(이유)호출
• 그 후 이 프로미스를 이용해서 then, catch로 성공값, 에러를 받아와서 원하는 방식으로 처리해주면 된다.

promise
.then((value)=>{             //이때 value는 resolve가 전달한 인자를 받는다.
    console.log(value);
}) 
.catch(error =>{             //이때는 reject의 전달해준 에러 전달
    console.log(error);
});
.finally(()=>{               //finally는 성공실패 여부 상관없이 마지막에 기능 수행
    console.log('finally'); 
})
// => chaining 이용

3. Promise chaining(연결하기)

• then에선 값을 바로 전달 할 수 도 있고, 리턴으로 Promise를 전달해도 된다.

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

fetchNumber
.then(num => num*2)                             // 2전달 (1*2)
.then(num => num*3)                             // 6전달 (2*3)
.then(num => {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>resolve(num-1),1000);    // 5전달 (6-1)
    });
})
.then(num => console.log(num));                 // 출력시 약 2초소요 (위의 1000 밑의 1000)

 

4. Error handling

• catch 로 error를 헨들링 할 수 있다
• error가 발행해도 catch를 이용하면 전체적인 Promise 체인에 문제가 발생하지 않도록 빵꾸처리를 할 수 있다.

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

getHen()
.then(hen => getEgg(hen))           //hen: 🐔
.catch(error =>{                    //catch가 바로 에러처리해서 체인이 빵꾸나지 않게 대체해줌
    return '🥨';
})      
.then(cook)                        //! 콜백함수 전달시 받아오는 값으로 함수 호출하는것에 하나 넣는경우는 생략O
.then(meal => console.log(meal))   
.catch(console.log);

then에서 받아오는 value를 바로 cook이라는 함수로 암묵적 전달 (하나만 바로 전달할 경우 생략해서 간단한 처리도 가능함)