Promise 이해하기 2

Promise 의 상태

1. pending - 작업이 수행중, 즉 작업을 끝마치지 않은 상태 

2. fulfilled - 작업을 성공적으로 마친 상태

3. rejected - 작업에 오류가 발생한 상태

 

 

Producer, Consumer

Producer(resolve, reject)

원하는 기능을 수행하여 데이터를 생성합니다.

const promise = new Promise((resolve, reject) => {
  resolve('successful message');
  reject(new Error('failed message'));
})

 

Comsumer(then, catch, finally)

데이터를 요구, 사용합니다.

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

//result: successful message

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

//result: Error: failed message

promise
  .then((value) => {
    console.log(value);
  })
  .catch((err) => {
    console.error(err);
  })
  .finally(() => {
    console.log('finally');
  })
  //finally는 promise의 결과가 성공이든 실패든 무조건 값을 내놓는다.

 

 

예제 만들어보기

Error Handling

아침 10시 청소당번인 조지를 불러봅니다.

(setTimeout은 비동기 처리결과를 확인하려고 넣었을 뿐입니다)

const task = new Promise((res, rej) => {
  setTimeout(() => res('cleaning'), 3000);
});

const who = (task) => new Promise((res, rej) => {
  setTimeout(() => res(`George, do ${task}`), 2000);
});

const when = (taskAssigned) => new Promise((res, rej) => {
  setTimeout(() => res(`${taskAssigned} at 10:00 AM`), 1000);
});

task
.then(who)
.then(when)
.then(console.log)
.catch(console.error);

//result: George, do cleaning at 10:00 AM

 

헌데 만약 중간에 에러가 생긴다면?

아래는 cleaning을 맡은 조지가 도망가버려 급하게 대체자 릭을 부르는 상황입니다.

const task = new Promise((res, rej) => {
  setTimeout(() => res('cleaning'), 2000);
});

const who = (task) => new Promise((res, rej) => {
  setTimeout(() => rej(`Woops! an assigned worker ran away!`), 1000);
});

const when = (taskTime) => new Promise((res, rej) => {
  setTimeout(() => res(`${taskTime} 10:00 AM`), 3000);
});

task
.then(who)
.catch(error => {
  return 'Rick';
})
.then(when)
.then(console.log)
.catch(console.error);

//result: Rick 10:00 AM

에러가 발생한 Promise인 who 이전의 값은 찍히지 않습니다.

하지만 그 이후의 값은 온전히 에러를 출력하지 않고 resolve됩니다.