[ES6] Promise

콜백을 대체해서 어떻게 깔끔하게 정리할까요?

 

Promise는 비동기를 간편하게 처리하도록 도와주는 오브젝트입니다.

정해진 장시간의 기능을 수행하고 나서 정상적이라면 성공의 메시지와 전달 값을 전달해주며

기능을 수행하다 예상치못한 문제가 발생하면 에러를 발생합니다.

 

 

1.state

우리가 지정한 오퍼레이션을 실행 중일때는 pending상태이며 성공적으로 오퍼레이션을 끝냈다면 fulfilled상태이며

문제가 발생하면 rejected상태가됩니다.

 

2.Producer

원하는 기능을 수행해서 해당하는 데이터를 만들어내는 producer = promise 오브젝트

 

3.Consumer

원하는 데이터를 소모하는 consumer

 

프로미스는 클래스이기 때문에 New라는 키워드를 이용해 오브젝트를 생성할 수 있습니다.

const promise = new Promise()

 

 

생성자를 보시면 executor라는 콜백 함수를 전달해주어야하는데요 이 콜백함수에는 또 다른 두가지의 콜백함수를 받습니다.

바로 resolve 기능을 정상적으로 수행해서 마지막에 최종 데이터를 전달하는 콜백 함수와

중간에 수행하다가 문제가 발생하면 호출하게 되는 reject로 나눠져 있는 것을 확인할 수 있습니다.

 

const promise = new Promise((resolve, reject =>{

 //doing some heavy work(network, read files)

});

이러한 promise안에서 헤비 한 일들을 합니다. 그 이유는 시간이 걸리는 기능을 동기적으로 처리하게 되면

다음 라인의 코드가 실행되지 않기에 시간이 좀 걸리는 기능은 비동기적으로 처리하는 것이 좋습니다.

 

promise를 만드는 순간 전달된 executor가 실행됩니다.

따라서 사용자가 요청할 때 비동기 처리를 하기 위해서는 위와 같은 코드로 작성하면 안 됩니다.

 

 

네트워크 통신을 하는 것처럼 코드를 작성해 봅시다.

const promise = new Promise((resolve, reject =>{

 //doing some heavy work(network, read files)
	
    setTimeout(()=>{
    	resolve('hi~');
    },2000);
});

2초 정도 무언가를 하다가 성공적으로 기능을 실행해 hi라는 값을 전달해주는 promise를 만들어봤습니다.

 

 

이제 이용하는 Consumer을 사용합니다. 그때 then, catch, finally를 사용해서 가져옵니다.

 

promise (만약 값이 정상적으로 수행이됬다면 값을받아오는데) .then(value)=>{

 이제 원하는 기능을 수행하는 콜백함수를 전달해주면 됩니다.

  console.log(`say ${value}`);

전달된 값이 파라미터로 전달됩니다.

});

promise
	.then(value => {
    	console.log(value);
    });

 

만약 reject를 사용할 때는 어떻게 될까요?

const promise = new Promise((resolve, reject =>{

 //doing some heavy work(network, read files)
	
    setTimeout(()=>{
    	//resolve('hi~');
        console.log('doing something...');
        reject(new Error('no network'));
        //여기서 Error는 자바스크립트에서 제공하는 오브젝트중 하나입니다.
    },2000);
});

 

 

Uncaught 잡히지 않은 에러가 발생하게 됩니다.

then라는 것을 이용해 성공적인 경우만 다루었기에 잡히지 않은 에러가 발생했는데요.

thenAPI를 이용해 성공적인 케이스를 다뤘다면 catch라는 함수를 이용해서 error가 발생했을 때 어떻게 처리할 것인지 콜백 함수를 작성해주면 됩니다.

 

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

 

 

then결국 같은 promise를 리턴하기 때문에 리턴된 promise의 catch를 등록할 수 있는 것입니다.

 

 

최근에 추가된 문법인 finally()는 성공과 실패와 상관없이 실행되는 함수입니다.

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

 

3. Promise chaining  연결하기

 

const fetchNumber = new Promise((resolve , reject) =>{

   setTimeout(() => resolve(1),1000);

});

1초있다가 1을 전달하고



fetchNumber

.then(num =>num*2) 2를 곱하고

.then(num =>num*3) 다시 2에 3을 곱하고

.then(num =>{  다른 서버로 num을 보내서 1초있다가 1을 빼어서

 return new Promise((resolve , reject) =>{

  setTimeout(()=> resolve(num -1), 1000);

 });

}) 출력합니다.!

.then(num =>console.log(num));

 

then에서는 또 다른 비동기의 promise를 전달해도 되며 값을 전달해도 됩니다.