프로미스란?

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. 이러한 비동기 처리응 이한 또 다른 패턴으로 프로미스(Promise)를 도입햇다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다.

const f1 = callback => {
  setTimeout(function () {
    console.log('1번 주문');
    callback();
  }, 1000);
};

const f2 = callback => {
  setTimeout(function () {
    console.log('2번 주문');
    callback();
  }, 3000);
};
const f3 = callback => {
  setTimeout(function () {
    console.log('3번 주문');
    callback();
  }, 2000);
};


console.log('시작');
f1(function () {
  f2(function () {
    f3(function () {
      console.log('done');
    });
  });
});

Promise 는 프로미스가 생성된 시점에는 알여지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속(프로미스)'을 반환한다.

Promise 는 다음 중 하나의 상태를 가진다.

• 대기(Pending): 이행하지도, 거부하지도 않은 초기 상태
• 이행(fullfilled): 연산이 성공적으로 완료됨
• 거부(rejected): 연산이 실패함

대기 중인 프로미스는 값과 함께 이행할 수고, 어떤 이유(오류)로 인해 거부될 수도 있다. 이행이나 거부될때, 프로미스의 then 메서드에 의해 대기열(큐)에 추가된 처리기들이 호출됩니다.

생성자

Promise()

새로운 Promise 객체를 생성합니다. 주로 프로미스를 지원하지 않는 함수를 감쌀 때 사용합니다.

const f1 = () => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      rej(new Error('실패'));
    }, 1000);
  });
};

const f2 = message => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res('2번 주문');
    }, 3000);
  });
};

const f3 = message => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res('3번 주문');
    }, 2000);
  });
};


// 프로미스 체이닝

console.log('시작');
  f1()
 .then(res => f2(res))
 .then(res => f3(res))
 .then(res => console.log(res))
 .catch(console.log)
 .finally(() => {
  console.log('끝');
 });

정적 메서드

Promise.resolve/Promise.reject

Promise.resolve와 Promise.reject 메소드는 존재하는 값을 Promise로 래핑하기 위해 사용한다.
정적 메소르 Promise.resolve 메소드는 인자로 전달된 값을 resolve하는 Promise를 생성한다.

Promise.all

주어진 모든 프로미스가 이행하거나, 한 프로미스가 거부될 때까지 대기하는 새로운 프로미스를 반환한다.
반환하는 프로미스가 이행한다면, 매개변수로 베공한 프로미스 각각의 이행 값을 모두 모아 놓은 배열로 이행한다.
반환하는 프로미스가 거부된다면, 매개변수의 프로미스 중 거부된 첫 프로미스의 사유를 그대로 사용한다.

Promise.all([f1(), f2(), f3()]).then(res => {
   console.log(res);
});

한꺼번에 작업이 이행되고 값을 받을 수 있다. 시간도 절약이 가능, 하나의 정보라도 누락(실패) 될 경우 에러가 발생한다.그래서 하나의 정보라도 누락되면 페이지를 보여주면 안되는 경우 사용 가능하다.

Promise.race

주어진 모든 프로미스 중 하나라도 처리될 때까지 대기하는 프로미스를 반환합니다.
반환하는 프로미스가 이행한다면, 매개변수의 프로미스 중 첫 번째로 이행한 프로미스의 값으로 이행합니다.
반환하는 프로미스가 거부된다면, 매개변수의 프로미스 중 거부된 첫 프로미스의 사유를 그대로 사용합니다.

Promise.race([f1(), f2(), f3()]).then(res => {
  console.log(res);
});

하나라도 1등으로 완료될 경우 종료된다.

참고
코딩앙마 프로미스 https://www.youtube.com/watch?v=3Ao3OroqQLQ
MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
poiemweb https://poiemaweb.com/es6-promise