Promise와 all(), race()

all()

• 파라미터의 모든 Promise 처리를 완료 했을 때
  • then()의 핸들러 함수를 실행한다.
  • Promise.all() 형태로 작성한다.
• 파라미터를 이터러블로 작성한다.
  • 작성한 순서로 Promise 인스턴스 생성
    1. all()의 파라미터를 이터러블로 작성했다.Promise 인스턴스를 생성하여 반환한다.
    2. 파라미터에 작성한 순서로 order() 함수를 호출하여
    3. setTimeout(()⇒ {…}, dealy)지연 시간으로 값의 단위는 밀리초다.
    4. setTimeout()의 두 번째 파라미터 delay는
    5. 따라서 setTimeout()의 지연 시간이 짧은 순서인실행할 때마다 아래의 then()을 호출하지 않고
    6. 3갤르 모두 실행한 후에 then()을 한 번만 호출한다.
    7. 100, 300, 500 순서로 resolve(dealy)를 실행하지만
    8. 이것이 all() 함수의 특징이다.
    9. then((param) => {console.log("then: ", param);});param 파라미터에 설정한다.
    10. 실행결가의 “then”처럼 resolve(delay)의 파라미터 값을 배열로 만들어
    11. 이 때, resolve(delay)가 실행된 순서가 아니라
    12. all()의 파라미터에 작성한 순서로 값을 설정한다.
    13. resolve() 실행 순서는 100, 300, 500이지만
    14. 실행 결과에 [500, 300, 100]이 출력되었다.

    [실행 결과]
    실행자:  100
    실행자:  300
    실행자:  500
    then:  [ 500, 300, 100 ]
    

  • function order(delay) { return new Promise((resolve) => { setTimeout(() => { resolve(delay); console.log("실행자: ", delay); }, delay); }); } Promise.all([order(500), order(300), order(100)]).then((param) => { console.log("then: ", param); });
• 실행자에서 실패가 발생했을 때
  • reject()가 발생한 시점에 then()을 실행

  function order(delay) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("실행자: ", delay);
        delay === 300 ? reject(delay) : resolve(delay);
      }, delay);
    });
  }
  Promise.all([order(500), order(300), order(100)])
    .then((param) => {
      console.log("성공: ", param);
    })
    .catch((reason) => {
      console.log("실패: ", reason);
    });
  

  1. 앞 코드와 같지만 reject()가 있으며
  2. reject()가 발생하면 처리가 앞 코드와 다르다.
  3. delay === 300 ? reject(delay) : resolve(delay);
  4. 설명을 위해 order(300)일 때 reject(delay)가 실행되도록 했다.
  5. 처음 resolve(100)이 실행되며 100이 출력된다.
  6. 이어서 reject(300)이 실행되며 300이 출력된다.
  7. 또한 then의 두 번째 파라미터 함수(현 예제에서는 catch())가 호출되어reject()가 발생했을 때 전체가 끝나지 않는다.
  8. “실패 : 300”이 출력된다.
  9. resolve(500)이 실행되며 500이 출력된다.
  10. 앞 코드에서는 3개가 모두 끝나면 all() 파라미터에 작성한 순서로
  11. 값을 출력했는데 여기서는 출력하지 않았다.
  12. all()은 이렇게 하나라도 reject()가 발생하면
  13. then()의 첫 번째 파라미터 함수를 실행하지 않는다.
  14. 이것이 all()의 또 하나의 특징이다.

race()

• resolve(), reject()에 관계없이
  • 처음 한 번만 then()을 실행하고
  • 더 이상 실행하지 않는다.

  function order(delay) {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("실행자: ", delay);
        resolve(delay);
      }, delay);
    });
  }
  Promise.race([order(500), order(300), order(100)]).then((param) => {
    console.log("성공: ", param);
  });
  

  1. Promise.race([order(500), order(300), order(100)])
  2. race()의 파라미터 순서로 order()를 호출한다.
  3. 그러면 실행 결과처럼 100, 300, 500 순서로 resolve(delay)가 실행된다.
  4. 그런데, order(100)일 때,다음은 실행하지 않는다.
  5. 그래서 “then: 100”만 출력되었다.
  6. 처음 한 번만 then()의 핸들러 함수를 실행하고
  7. 이것이 race()의 특징이다.