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

javascript 2019.09.06

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

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

この記事を書いた人

オガワ シンヤ

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

  • Twitter

コメントフォーム

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

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?