JavaScriptである処理を順番に実行したい時にはPromiseを使った書き方をすると簡単に実装することができます。PromiseとはES6で新たに追加された機能で、非同期処理の結果をPromiseオブジェクトとして返してくれます。ですので、非同期処理を制御するのにとても便利です。今回はPromiseを使った非同期の直列処理で順番にプログラムを実行する例をまとめていきたいと思います。    

非同期処理とは？

プログラムの基本は前の処理があり、次の処理が続いていくという形になります。これを同期処理といい、前の処理が終わると次の処理が始まるという感じです。ただ、前の処理が終わらないと次の処理が始まらないという場合には、前の処理を待たずに処理を実行する必要があります。このような形の処理を非同期処理といいます。    

コールバック関数で非同期処理を順番に実行する

ただし非同期処理では、読み込まれて実行されるタイミングが制御できません。そこで非同期処理を順番に実行したい場合にはコールバック関数を続けて書くことで実現することができます。 【javascript】

firstFunction(() => {
  secondFunction(() => {
    thirdFunction(() => {
      fourthFunction(() => {
        fifthFunction(() => {
          .........
        });
      });
    });
  });
});

  ただ、このようなコールバック関数の入れ子の形ではコード見通しが悪くなるのは見てわかる通りです。そこでこのような事態を解消するために使われるのがPromiseになります。    

Promiseとthenメソッドで非同期処理を連続してつなげていく

Promiseを使うには「new Promise()」でインスタンスを作成し、コールバック関数の引数には「resolve」関数と「reject」関数を入れることができます。resolve()では非同期通信が成功した時に、reject()は失敗した時に引数を値として返すことができます。最初のPromiseでの処理が終わると、resolve()が実行されPromiseオプジェクトが返されます。それをthenメソッド受け取ることでPromiseの処理をつなげていくことができます。以降も同じように処理を続けていくことで順番に直列の処理として扱うことができます。最後にcatch()内でreject()返されて失敗した時の処理を書いておくことができます。 【javascript】

const promise1 = () => {
  return new Promise((resolve, rejeect) => {
    setTimeout(() => {
      console.log("最初の処理（1秒後に実行）");
      resolve();
    }, 1000);
  });
}
const promise2 = () => {
  return new Promise((resolve, rejeect) => {
    setTimeout(() => {
      console.log("2番目の処理（2秒後に実行）");
      resolve();
    }, 1000);
  });
}
const promise3 = () => {
  return new Promise((resolve, rejeect) => {
    setTimeout(() => {
      console.log("3番目の処理（3秒後に実行）");
      resolve();
    }, 1000);
  });
}
const promise4 = () => {
  return new Promise((resolve, rejeect) => {
    setTimeout(() => {
      console.log("4番目の処理（4秒後に実行）");
      resolve();
    }, 1000);
  });
}
const promise5 = () => {
  return new Promise((resolve, rejeect) => {
    setTimeout(() => {
      console.log("5番目の処理（5秒後に実行）");
      resolve();
    }, 1000);
  });
}
const promise6 = () => {
  return new Promise((resolve, rejeect) => {
    setTimeout(() => {
      console.log("最後の処理（6秒後に実行）");
      resolve();
    }, 1000);
  });
}

promise1().then(() => {
  return promise2();
}).then(() => {
  return promise3();
}).then(() => {
  return promise4();
}).then(() => {
  return promise5();
}).then(() => {
  return promise6();
}).catch((error) => {
  console.log(error);
});

  ここではPromise内でsetTimeoutを使って1秒後に処理が実行されるような例を挙げています。つまり、1秒ごとにそれぞれの処理が順番に実行されるような形になります。ブラウザのデベロッパーツールで見てみると、想定していた動きが確認できました。    

async awaitでもっとシンプルなコードに

Promiseとthen()を使うことで、非同期の直列処理もコードのネストが深くならずに書くことができましたが、まだコードの可読性でいうとやや気になる印象もあります。そこで「async await」をつかうことでもっとシンプルにすることができます。上記の処理はPromiseオブジェクトをthen()メソッドで受け取る形で繋いでいましたが、下記のように置き換えることができます。

async function asynchronyFunction() {
  await promise1();
  await promise2();
  await promise3(); 
  await promise4(); 
  await promise5(); 
  await promise6(); 
}
asynchronyFunction();

  今回の記事のコードについては処理が確認できるよう実際のサンプルはこちらに用意してみました。    

IE11への対応

このPromiseですが、残念ながらIE11には対応していません。そのため「Promise is undefined」という形でエラーとなってしまいます。その場合にはPolyfillにて対応が必要となります。下記のコードを読み込むことで対応できます。

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>

  フロントエンドで、処理の中に含まれるデータを扱うときなどは、前の処理を待ってから処理を実行したいケースもあるかと思います。そんな時にはPromiseを使ってわかりやすく非同期の直列処理が実現できるので積極的に使っていきたいですね。