非同期処理を直列で実行する（ES2017以前）

はじめに

現場での業務でJavaScriptを使用しているのですが、昔からあるシステムの改修でJavaScriptのバージョンがES2015を使って仕事しています。ES2015ではasync/awaitは使用できないため他の方法で代用しました。他現場でも使用するかもしれないので、備忘録としてメモ程度に残しておきます。

ソースコード

// setTimeoutを使用して、非同期処理にする（実際はDB処理などを行う）
// 引数として渡された値（秒数）を待機時間とし値を出力
function promiseFunc(timeoutSeconds) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      clearTimeout(timer);
      console.log(timeoutSeconds);
      resolve();
    }, timeoutSeconds * 1000);
  });
}

const timeoutSecondsList = [1, 2, 1, 3, 5];
timeoutSecondsList.reduce(
  (pv, cv) => pv.then(_ => promiseFunc(cv), e => Promise.reject(e)),
  // 1回目のループは正常とする
  Promise.resolve()
).then(
  // 最後のメッセージを出力する
  _ => {
    console.log('Complete!!');
  },
  e => {
    console.log(e);
  }
);

Array.reduceを利用することで前回の実行結果（Promise）を待って実行することができます。今回は値を配列にし、それぞれの値を関数に与えて実行する形でしたが、Promiseを返す関数の配列でも使用できると思います。

おわりに

async/awaitを使うことができればこんなことには…
ただ今までreduceについてはあまり使ったことがなく、理解もしていなかったのですが、今回の件で使い方および仕様の理解が深まったのはいい結果でした。
常に最新の技術を仕事で使用できるわけではないので、使えるもので創意工夫を凝らしていきたいですね。