[Javascript] Promise

1. Promise

 

Jest를 공부하면서 비동기 처리와 관련한 내용이 나왔다.

 

비동기 처리를 편하게 도와주는 Promise 객체에 대해서 배웠고 활용해 보았다.

 

 

Promise를 활용하는 것에 있어서 중요한 포인트는 2가지다.

• State : 현재 비동기 작업의 진행 상태로 Pending(처리중), Reject(실패), Fufilled(성공)
• Producer와 Consumer : 정보를 제공하는 P와 소비하는 C를 이해해야 한다.

 

// Producer
const promise = new Promise((resolve, reject) => {
    setTimeout(()=> {    # 비동기 함수
        try {
        setTimeout(()=>{
          resolve('Success!');} # 처리에 성공하고 결과값을 반환
                , 3000);
        } catch (error) {
                reject(new Error('Error!')); # 처리에 실패하고 원인을 반환
        }
};

// Consumer
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)
.catch(error => {    // 위에서 에러 생기면 발동
    return '6'
})
.then(num => num * 4)
.then(num => num * 5)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num - 1), 1000);
    });
})
.then(num => console.log(num));

Promise 객체는 선언과 동시에 작업을 처리하니깐 선언되는 위치를 조심해야 한다.

작업을 수행할 것이 확정되는 순간 선언하도록 하자.

 

아래는 구체적으로 promise를 활용하는 사례다.

 

[Jest] Testing Asynchronous Code

 

---