ES6:: Promise란?(특징, 체이닝, 에러 처리 예시 등)

Promise란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다.

Promise의 특징

프로미스의 특징은 3가지 상태(state)를 갖고있다는 점이다. 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

그리고 Producer와 Consumer가 있다는 점이다.

• Producer

const promise = new Promise((resolve, reject) => {  
    // doing some heavy work (network, read files)
    console.log('doing something...');
    
    // 시간에 딜레이를 줌
    setTimeout(() => {
        // resolve('ellie');
        reject(new Error('no network'));
    }, 2000)
});

promise를 만드는 순간 전달한 excutor라는 콜백함수가 바로 실행되어 시간이 걸리는 일들은 promise를 만들어서 비동기적으로 처리하는 것이 좋다.

• Consumer: then, catch, finally를 이용해서 값을 받아올 수 있다.

promise
    .then((value) => { // 성공했을 경우, value에는 ellie가 들어옴
        console.log(value);
    })
    .catch(error => { // 실패했을 경우, 잡은 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) // 값이나 promise를 전달
.then(num => num *3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num - 1), 1000);
    });
})
.then(num => console.log(num));

결과로 2초 후 5가 뜬다.
* then은 값 뿐만 아니라 프로미스도 전달한다.

Error Handling(프로미스 에러 처리)

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

getHen() //
    .then(getEgg)
    .catch(error => {
        return 'bread';
    })
    .then(cook)
    .then(console.log)
    .catch(console.log);

닭에서 계란이, 계란에서 계란후라이가 나오는 프로미스를 정의했다. 그리고 체이닝을 통해 닭에서 요리가 되는 과정을 진행하였는데 여기서 원하는 부분에 catch로 에러를 처리할 수 있다.



Github:
https://github.com/seoh2k/javascript/commit/e8b151e633e96c103c5f4c232052e521cef6702d

Promise 개념 및 예제 · seoh2k/javascript@e8b151e

참조:
https://www.youtube.com/watch?v=JB_yU6Oe2eE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=12

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기