OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Promise&thenを使って非同期の直列処理で順番に実行する

最終更新日:2019.10.26 Update!!
JavaScriptである処理を順番に実行したい時にはPromiseを使った書き方をすると簡単に実装することができます。PromiseとはES6で新たに追加された機能で、非同期処理の結果をPromiseオブジェクトとして返してくれます。ですので、非同期処理を制御するのにとても便利です。今回はPromiseを使った非同期の直列処理で順番にプログラムを実行する例をまとめていきたいと思います。  
非同期処理とは?
プログラムの基本は前の処理があり、次の処理が続いていくという形になります。これを同期処理といい、前の処理が終わると次の処理が始まるという感じです。ただ、前の処理が終わらないと次の処理が始まらないという場合には、前の処理を待たずに処理を実行する必要があります。このような形の処理を非同期処理といいます。  
コールバック関数で非同期処理を順番に実行する
ただし非同期処理では、読み込まれて実行されるタイミングが制御できません。そこで非同期処理を順番に実行したい場合にはコールバック関数を続けて書くことで実現することができます。 【javascript】
firstFunction(() => {
 secondFunction(() => {
  thirdFunction(() => {
   fourthFunction(() => {
    .........
   });
  });
 });
})
  ただ、このようなコールバック関数の入れ子の形ではコード見通しが悪くなるのは見てわかる通りです。そこでこのような事態を解消するために使われるのがPromiseになります。  
Promiseとthenメソッドで非同期処理を連続してつなげていく
Promiseを使うには「new Promise()」でインスタンスを作成し、引数には「resolve」関数と「reject」関数を入れることができます。resolve()では非同期通信が成功した時に、reject()は失敗した時に返すことができます。最初のPromiseでの処理が終わると、resolve()が返された時に、thenメソッドでPromiseの処理をつなげていくことができます。同じくPromiseの中で処理を実行し、どんどん次の処理へと続いていきます。最後にcatch()内でreject()返されて失敗した時の処理を書いておくことができます。 【javascript】
function asynchronyFunction() {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   console.log("最初の処理(1秒後に実行)");
   resolve();
  }, 1000);
 })
 .then(() => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    console.log("2番目の処理(2秒後に実行)");
    resolve();
   }, 1000);
  })
 })
 .then(() => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    console.log("3番目の処理(3秒後に実行)");
    resolve();
   }, 1000);
  })
 })
 .then(() => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    console.log("4番目の処理(4秒後に実行)");
    resolve();
   }, 1000);
  })
 })
 .then(() => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    console.log("5番目の処理(5秒後に実行)");
    resolve();
   }, 1000);
  })
 })
 .then(() => {
  return new Promise((resolve, reject) => {
   setTimeout(() => {
    console.log("最後の処理(6秒後に実行)");
    resolve();
   }, 1000);
  })
 })
 .catch((reason) => {
  console.log(reason.messege);
 });
}
asynchronyFunction();
  ここではPromise内でsetTimeoutを使って1秒後に処理が実行されるような例を挙げています。つまり、1秒ごとにそれぞれの処理が順番に実行されるような形になります。ブラウザのデベロッパーツールで見てみると、想定していた動きが確認できました。 Promise&thenを使って非同期の直列処理で順番に実行する   また、上記のコードを少し変更していますが、動きが確認できるよう実際のサンプルはこちらに用意してみました。  

See the Pen Promise&then sample by designsupply (@designsupply) on CodePen.

 
IE11への対応
このPromiseですが、残念ながらIE11には対応していません。そのため「Promise is undefined」という形でエラーとなってしまいます。その場合にはPolyfillにて対応が必要となります。下記のコードを読み込むことで対応できます。
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
  フロントエンドで、処理の中に含まれるデータを扱うときなどは、前の処理を待ってから処理を実行したいケースもあるかと思います。そんな時にはPromiseを使ってわかりやすく非同期の直列処理が実現できるので積極的に使っていきたいですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram