0%

Programmingプログラミングナレッジ

Posted:2019.09.06

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

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を使ってわかりやすく非同期の直列処理が実現できるので積極的に使っていきたいですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】