자바스크립트 비동기 처리 Promise

 

 

Promise는 콜백함수 대신에 비동기적인 처리를 할 수 있는 것이다.

 

비동기가 무엇인지 모른다면 다음 글을 보자

 

자바스크립트 비동기 [클릭]

 

 

Promise의 중요한 요소는 State와 Producer, Consumer가 있다.

state는 자신의 일이 다 처리되었는지 아닌지의 현재 상태를 나타내 주는 것이고

Producer는 데이터를 제공하는 사람이며

Consumer는 데이터를 소비하는 사람을 일컫는데

개념만 보면 뭔 소리하는지 못 알아듣겠으니 코드를 보자

 

 

 //1. Producer

 const promise = new Promise((resolve, reject) => {
     //여러가지 로직(네트워크 통신 및 파일 처리 등등)
    console.log('doing something...');
    setTimeout(() => {          
        resolve('contact success');       //일이 정상적으로 끝마치게 되면 resolve라는 콜백함수를 호출하면 된다.
        reject(new Error('no network'));  //일이 비정상적으로 끝마치게 되면 reject라는 콜백함수를 호출하면 된다. 이 코드 내에선 무조건 resolve로 가게 되니 이 코드는 실행되지 않는다.
    }, 2000);
 });

//2. Consumers: Producer의 결괏값을 then, catch, finally 형태로 받아올 수 있음
 
promise.then((value) => console.log(value))
// promise가 정상적으로 수행하게되면 호출된다. 
// 여기서 value는 promise에서 정상적으로 받아온 값 'contact success'이다

 .catch((error) => console.log(error))           
 // promise가 비정상적으로 수행하게 then을 넘어가고 catch부터 호출된다. 
 // 여기서 error는 promise에서 받아온 값(Error('no network'))이다.

 .finally(() => console.log('finally'));
 //정상적으로 수행하든 비정상적으로 수행하든 호출되는 것.

// 상황에 따라 여러가지 형태로 사용할 수 있다.
promise.then()
promise.then().catch()
promise.then().catch().finally()

 

Producer의 코드를 보면 작업을 하면 어떤 경우에 성공 케이스라고 정의하고

어떤 경우엔 실패 케이스라고 정의한다.

 

Consumers의 코드는 성공했을 때 어떤 코드를 실행하며

실패했을 때 어떤 코드를 실행하는지를 결정한다.

 

즉 Producer는 Promise가 호출됐을 때 어떤 작업을 하는지를 설계하는 부분이고

Consumers는 그 작업의 결과에 따른 어떤 행동을 대처하는지 설계하는 부분이다.

 

Producer가 resolve와 reject를 결정하며

그 결과에 따라 consumer(then, try, catch)의 행동이 달라지는 것이다.

 

consumer는 then만 설계해도 작동이 된다.

catch와 finally는 필요에 따라 작성을 하면 되는 것이다.

 

Promise의 state 값은 4가지가 있다.

 

 

1. pending : 비동기 처리 수행 전 (resolve, reject가 아직 호출되지 않음)
2. fulfilled : 수행 성공 (resolve가 호출된 상태)
3. rejected : 수행 실패 (reject가 호출된 상태)
4. settled : 성공 or 실패 (resolve나 reject가 호출된 상태, 수행이 이루어지고 결과가 나온 상태) 

 

Promise는 앞에서 말했듯이 비동기적인 처리를 하는 것이며

producer와 consumer가 동시에 일어나지 않는다

보통 producer에 네트워크 접속, 서버에서 데이터 송수신 로직 등 

시간이 많이 걸리는 작업을 만들어서 사용하는 경우일 것이다.