【JavaScript】Promise で非同期処理を記述する
2021.12.20
はじめに～同期処理と非同期処理について～
本記事では JavaScript の非同期処理を扱うための Promiseという仕組みについて取り上げます。
JavaScript、とくにサーバーサイドで利用されるNode.js では非同期処理を利用するAPIが多数出てきます。
Promise の仕組みを理解しておくとプログラムの作成がはかどるはずです。
まず本題へ入る前に『同期処理』と『非同期処理』について説明させていただきます。
JavaScript の同期処理
同期処理とは上から順番に処理されていくことです。
処理が終了するのを待ってから、次の処理を実行します。
1 2 3 | console.log(1); console.log(2); console.log(3); |
[結果]
1
2
3
JavaScript の非同期処理
非同期処理とは、1つの処理が終了するのを待たずに、次の処理を実行することです。
終了を待たないので処理を終了する順番が、上下することがあります。
ファイルの読み込み、ネットワークの通信処理、データベースアクセスなどは非同期処理で行うことが多いです。
なぜ非同期処理は必要なの？
同期処理は上から順番に実行してくれますし、感覚的にもわかりやすいです。
ですが、同期処理だと時間のかかってしまう処理が終了するまでは次の処理を行うことができません。
たとえばサーバーと通信するとき、サーバーから応答が帰ってくるのに数秒かかる時があります。
その間、処理が止まっていては問題です。
その対策として、非同期処理があります。
非同期処理を用いた例
非同期関数のsetTimeout(function callback() {} , delay)は指定時間（ms) だけ処理を遅らせてから、callback 関数を実行します。
今回は callback 関数に console.log(2) を指定しました
1 2 3 4 5 | console.log(1); setTimeout(function() { console.log(2); }, 1000); console.log(3); |
[結果]
1
3
2
console.log(2) が呼ばれる前に、console.log(3)が呼ばれます。
setTimeout()は非同期関数のため、処理が止まることもなく続行されたためです。
Promise とは
前置きが長くなりましたが、ここからが本題です。
Promise とは、非同期処理の状態をあわらすオブジェクトです。
Promise の構文は以下のようなものです。
1 | new Promise( /* executor */ function(resolve, reject) { ... } ); |
Promise 関数の対応状況
Chrome, Firefox, Edge, Safariといった最新のブラウザでは標準で対応しています。
IE 11 は対応していないので、 polyfill で対応する必要があります。
こんな方にオススメの記事
- JavaScript を学習中の方
- 非同期処理、同期処理がいまいちわからない方
- Promise を理解したい方
Promise の利用
Promise を利用する場合、関数の return にnew Promise() を指定し、コールバック関数を Promise に登録します。
コールバック関数には、処理が成功したときには resolveを呼び、処理が失敗したときは rejectを呼ぶように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 | function promiseFunc(pay) { // Promise を返す return new Promise(function(resolve, reject) { if ( /*関数の成功条件*/ ) { // 成功したとき resolve() } else { // 失敗したとき reject() } }); } |
注目してほしいのは以下の箇所です。
1 | return new Promise((resolve, reject) => { ... } |
関数の return にnew Promise(function()) と記述しています。Promise インスタンスを返却するように記述すると、Promiseが利用できます。
たとえば、購入処理に約0.5秒かかってしまうbuy()関数なんてものを作ろうと思ったら、このような記述になります。
お金が足りていたら、お釣りの金額を引数としたresolve(/*お釣り*/)を呼び、お金が足りていなければreject(/*メッセージ*/)を呼ぶ関数としています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function buy(pay) { // Promise を返す return new Promise(function(resolve, reject) { setTimeout(function() { if (pay >= 100) { console.log("100円で購入しました"); // 成功時 resolve(pay - 100); } else { // 失敗時 reject("お金が足りないよ"); } }, 500); }); } |
Promise の状態
さて、さきほどPromise とは状態を表すオブジェクトといいました。
具体的には以下の状態があります。
pending：初期状態、実行中。成功も失敗もしていない。
fulfilled：処理が成功した状態。
rejected：処理が失敗した状態。
- resolve() が呼ばれると、
fulfilledの状態になります。 - rejected() が呼ばれると、
rejectedの状態になります。
Promise の then()
Promise の処理が終了したのち、結果を取得するにはthen()を利用します。
then() は、 Promise のインスタンスの状態がfulfilled となったときに実行する関数を登録できるインスタンスメソッドです。
以下のような構文となっています。
1 | promise.then(onFlufilled, onRejected) |
onFulfilled ： fulfilled の状態のとき（resolveが呼ばれたとき）に実行される関数
onRejected ： rejected の状態のとき（rejectが呼ばれたとき）に実行される関数
resolve(/*引数*/) の引数部分が、onFulfilled やonRejected のところで登録する関数の引数となります。
たとえば先程のbuy関数のお釣りを引数として受け取るには、以下のようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 関数定義 function buy(pay) { return new Promise(function(resolve, reject) { setTimeout(function() { if (pay >= 100) { console.log("100円の商品を購入しました"); resolve(pay - 100); } else { reject("お金が足りないよ"); } }, 500); }); } // 実行部分 と then 部分 console.log(1); buy(300) .then(function(change) { console.log(`お釣りは${change}円です`) }) console.log(3); |
[結果]
1
3
100円の商品を購入しました
お釣りは200円です
実行結果を確認すると、「お釣りは 200円です」と表示されており、resolve()の引数を受け取れていることが確認できるとわかります。
さて、さらにここで注目していただきたいのは順番です。
ソースコードの記述の順番と実行結果のメッセージの順番が異なっていることです。
1 2 3 4 5 6 | console.log(1); // 1番目 buy(300) // buy は2番目に呼ばれている。 .then(function(change) { console.log(`お釣りは${change}円です`) }) console.log(3); // 3番目 |
[結果]
1
3
100円の商品を購入しました #結果は3番目
お釣りは200円です
buyは、 Promiseを利用して非同期関数となっており、処理が終了するまでそこでコードの実行が止まることはないからです。
console.log(1), console.log(3) は即時に実行されるますが、buy(300)の処理は約 0.5秒かかってしまうので、実行結果のような表示になります。
Promise の catch()
Promise のインスタンスのエラー処理には catch()を利用します。
catch() とは Promise のインスタンスの状態がrejected となったときに実行する関数を登録するインスタンスメソッドです。
それではあえて処理を失敗させて reject() を発生してみましょう。
buy()の引数に 100以下を指定します。（簡略化のためにアロー関数を利用しています）
1 2 3 4 5 6 | // 関数定義は省略 // 100 以下を指定してエラーを表示させる。 buy(50) .then(change => console.log(`お釣りは${change}円です`)) .catch((error) => console.error(error)); |
[結果]
お金が足りないよ
then()が呼び出されずにcatch()だけが呼び出されてエラー処理されているのがわかります。
このように、Promise を利用したコードは then() とcatch()で正常処理、エラー処理を切り替えることができます。
Promise のメソッドチェーン
このthen(),catch() はつなげて利用することもできます。
つなげて利用する場合、Promise が終了するのを待ってから、次のthen() が呼ばれます。
それでは、連続で商品を購入してみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | function buy(pay) { return new Promise((resolve, reject) => { setTimeout(function() { if (pay >= 100) { console.log("100円の商品を購入しました"); resolve(pay - 100); } else { reject(Error("error")); } }, 500); }); } buy(550) .then(change => { console.log(`お釣りは${change}円です`); return buy(change); }) .then(change => { console.log(`お釣りは${change}円です`); return buy(change); }) .then(change => { console.log(`お釣りは${change}円です`); return buy(change); }) .then(change => { console.log(`お釣りは${change}円です`); return buy(change); }) .then(change => { console.log(`お釣りは${change}円です`); return buy(change); }) .then(change => { console.log(`お釣りは${change}円です`); return buy(change); }) .then(change => { console.log(`お釣りは${change}円です`); return buy(change); }) .catch(() => console.log("お金が足りないよ")); |
[結果]
100円の商品を購入しました
お釣りは450円です
100円の商品を購入しました
お釣りは350円です
100円の商品を購入しました
お釣りは250円です
100円の商品を購入しました
お釣りは150円です
100円の商品を購入しました
お釣りは50円です
お金が足りないよ
実行してみると約 0.5 秒間隔で文字が表示されていくと思います。
前述しましたが、このようにPromise のthen()を利用することで、連続して非同期処理を記述できます。
また、ソースコード中では buy() を 8回も呼んでいますが、購入処理が行われたのは 5回だけです。
お金が足りなくなったので途中の buy() の中でreject() が呼び出されたからです。
それ以降の then() の処理が行われることはなく、catch()でエラー処理されるからです。
then () のなかの関数の return の値が Promise インスタンスじゃなかったときは？
then() の引数として渡された関数がPromise を返すのではありません。
値を返した場合は、Promise.resoleve(<関数が返した値>)が自動的に実行され Promise でラップされます。
.catch() のあとの .then()
Promise のメソッドチェーンで .catch()のあとに.then()でチェーンすることも可能です。
これによってエラー処理が失敗したあとでも新しい動作を定義できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | asyncThing1() .then(function() { return asyncThing2(); }) .then(function() { return asyncThing3(); }) .catch(function(err) { return asyncRecovery1(); }) .then( function() { return asyncThing4(); }, function(err) { return asyncRecovery2(); } ) .catch(function(err) { console.log("Don't worry about it"); }) .then(function() { console.log("All done!"); }); |
フローチャート
すこし複雑ですが、上記のようなメソッドチェーンのフローチャートは以下の図のようになります。
実線が正常処理の流れ、点線が失敗時の流れです。
図を見ると、asyncRecovery1 でエラー処理を行った後に、正常処理のasyncThing4 に戻るフローがあるとわかります。
Promise で非同期処理の処理を包む
Promise は便利ですが、古い API は Promiseのインターフェイスを提供しておらず、callback 関数のみの時があります。
具体的な例としては setTimeout() が当てはまります。
1 | setTimeout(func, 1000); |
setTimeout() を Promise に対応させてみましょう。
1 2 3 4 5 6 7 8 9 10 | // setTimeout を Promise で包む const wait = function(milliSeconds) { return new Promise(function(resolve) { setTimeout(resolve, milliSeconds); }); }; // 省略バージョン const wait = milliSeconds => new Promise(resolve => setTimeout(resolve, milliSeconds)); |
呼び出し方法
1 2 3 | wait(1000).then(() => { console.log("hello"); }); |
このように Promise で APIをラップしたのち、それ以降は二度と直接呼ばないようにするとよいです。
さいごに
以上、非同期処理の Promise についてでした。
最後に、まとめて終わりにしたいと思います。
- Promise を利用することによって非同期処理を記述できます。
- 正常時には
resolve()を呼び、エラー時にはreject()を呼びます。 then()で処理をつなげることができます。catch()でエラー処理を記述できます。
Promiseの仕組みを理解しておくとプログラムの作成がはかどるので、ぜひ使いこなせるように勉強しましょう！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
