[JavaScript_study] Promise static method

[ Promise static method ] 

• [ 참고 사이트 ] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

* promise.all()

• 병렬적으로 한번에 모든 Promise들을 실행!
• error가 폼한된것까지 묶어서 Promise.all()을 할 경우 error가 발생하면서 출력이 되지 않는다.

* promise.race()

• 주어진 Promise중에 제일 빨리 수행되는 값이 출력된다.

* promise.allSettled()

• 성공하든 실패하든 그 결과를 배열로 묶어서 출력해준다.
• 배열 indexing를 이용하여 원하는 값을 선택하여서 출력해줄 수 있다.
  • ex) fruits[0].status, fruits[0].value

 

Promise를 쓰면 callback함수를 사용하지 않고 조금 더 깔끔하게 처리를 할 수 있다는 장점이 있다.
하지만 then을 계속 사용하여서 callback만큼이나 헷갈린다. 특히 then안에 then을 쓰는 경우 더 헷갈린다.
그래서 동기적인 코드처럼 보이지만 비동기코드를 작성할 수 있는 async에 대해서도 알아볼것이다.

---

* Promise static method사용 예시 코드

function getBanana() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('바나나');
    }, 1000);
  });
}

function getApple() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('사과');
    }, 3000);
  });
}

function getOrange() {
  return Promise.reject(new Error('no orange'));
}

// 바나나과 사과를 같이 가지고 오기
// getBanana의 then괄호 안에서 .then을 이어간다. 밖으로 나갈경우 getBanana resolve값을 받아오지 못하기 때문이다.
// 아래와 같이 로직을 구성하면 getBanana에서 1초, getApple에서 3초가 걸려서 4초가 걸린다.
// 이렇게 구성하면 시간이 오래걸리기 때문에 병렬적으로 실행을 하도록 구성한다.
getBanana().then((banana) =>getApple().then((apple) => [banana, apple])).then(console.log);

// Promise.all 병렬적으로 한번에 모든 Promise들을 실행!
// 병렬적으로 동시에 실행을 하여서 총 3초 뒤에 출력이 된다.
Promise.all([getBanana(), getApple()]) //
  .then((fruits) => console.log('all', fruits));

// Promise.race 주어진 Promise중에 제일 빨리 수행된것이 이김!
// 제일 빨리 수행된 값만 출력된다.
Promise.race([getBanana(), getApple()]) //
  .then((fruit) => console.log('race', fruit));

// error가 포함된것까지 묶어서 Promise.all을 하는경우
// error가 발생하면서 출력이 되지 않는다.
// Promise.all([getBanana(), getApple(), getOrange()]) //
//   .then((fruits) => console.log('all-error', fruits))
//   .catch(console.log);

// 성공하든 실패하든 그 결과를 배열로 묶어서 출력해준다.
// 배열 indexing를 이용해서 원하는 값을 선택해서 출력해줄 수 있다. // fruits[0].status // fruits[0].value
Promise.allSettled([getBanana(), getApple(), getOrange()]) //
  .then((fruits) => console.log('all-settle', fruits))
  .catch(console.log);