배열을 실행하는 Promise를 직렬로 연결하는 방법

개시하다

배열된 PromisePromise.all를 병렬로 실행하면 좋겠다고 생각했지만, 순서대로 실행하려면 어떻게 해야 할지 고민이 좀 됩니다.한꺼번에 조사할 때 좋은 정보를 찾지 못해서 총결산을 했습니다.
병렬 실행

const waitTimes = [300, 100, 200, 500, 400];

function wait(waitTime: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`${waitTime}ms waited.`);
      resolve();
    }, waitTime);
  });
}

(async () => {
  // Promise.allで並列に実行される
  await Promise.all(
    waitTimes.map(async (waitTime) => {
      await wait(waitTime);
    })
  );
})();

Promise를 직렬로 실행하는 방법

가장 간단한 방법 (for 순환)

뚜껑이 없는 말이지만 for링에 await를 쓰면 순서대로 실행할 수 있습니다.
다만 최근map과filter 등 연속적으로 배열 운영체제를 사용하는 방법으로는 for링을 사용하고 싶지 않아 다른 방법도 고려했다.
간단한 방법으로 직렬 집행하다

(async () => {
  for (let i = 0; i < waitTimes.length; i++) {
    await wait(waitTimes[i]);
  }
})();

그나저나 forEach에 쓰면 안 돼요.함수를 교부했기 때문에, async-await의 문법이 다시 그 안에 들어갔다.항목별로 기다리지만 전체적인 처리는 영향을 받지 않는다.행위가 병행 집행에 가깝지만 Promise.all와는 달리 모든 집행이 끝났는지 확인하지 않아 좋지 않다.

// 全部の項目が先に実行されてしまう
waitTimes.forEach(async (waitTime) => {
  // 関数内部のawaitは適用される
  await wait(waitTime);
});

그룹 운영체제의 방법을 통해 실현 (reduce를 통해 접기)

Proomise는 다음과 같은 연결.then()을 통해 순서대로 실행할 수 있다.

Promise.resolve()
  .then(() => wait(100))
  .then(() => wait(200));

어레이 운영체제의 방법으로 이것을 잘 할 때reduce.두 번째 매개 변수Promise.resolve()에서 Resolve의 Proomise에 초기 값으로 건네주고 매번 실행promise.then()할 때마다 되돌아와서 연결한다.
reduce 직렬 실행

(async () => {
  await waitTimes.reduce((promise, waitTime) => {
    return promise.then(async () => {
      await wait(waitTime);
    });
  }, Promise.resolve());
})();

끝맺다

다음은 Promise를 직렬로 실행하는 방법입니다.개인적으로는 운영체제를 배열하는 방법을 사용하는 것이 모든 요소에 동일한 처리 의도를 가지고 있기 때문에 이쪽 방법을 쓰려고 하지만 이번 상황은 상당히 복잡해져 고민이다.for 순환은 압도적으로 이해하기 쉬워요.멋있게 하고 싶으신 분들은 꼭 Reduce를 해보세요.
이번 샘플 코드는 아래에서 확인할 수 있으니 관심 있는 분은 보세요.
https://www.typescriptlang.org/play?#code/MYewdgzgLgBA7gQwJZQCpILYFMIwLwwDaAzAAykA0MAjOVQEx0wCsTALOQLoDcAULwDMArmGBQk4eMigAKRCnTYAXDDBCMAIywAnAJQwA3rxgxtWKEO1hVWODAAK2kBiQQsAHgBuIJABMAfDIyZhAgADaeWPp4-obGJjBuaJhYIEKyMtGxRgkJoJDhWAB0YSAA5jIABgAkBvLJ2AC+GLj1WL5Flbp8uSYh4ZGZPQmNVPWKUcON3byN-DIIEACeojCZ+NnxAPRbMIBkcoDoSoD52oAyEfH5oWHFpRUA5AAOCNoIYVdhMAhiEpBFtzMmCHqDicLjcRReYRk8RM4xSECKGAQ9wWy1WcmkEyycV6HyB9XRChS-xGuniM22u0AL27HM4mC6FErlGS3NzaJAvD5fcDwv7DAQgbRrK6wJD4GCkbgwUXuKSE7Dwq5gMpQAAWkqQAGoNfocglAdJZbJYfLCEhOMS5uduQybszWez3p9xNz6L9ifqUIaJvCzL4hMAsEF7iDXFgxhiiRtsQkzBYrDBg85Q0VVVgwCiVsA1ljdbkPbB8cbJtCYNMplRHEmwf0IoHdDNpkN4kA