LoginSignup
1
0

More than 1 year has passed since last update.

JavascriptのPromiseを理解して、非同期処理を読み解く

Last updated at Posted at 2021-10-25

はじめに

最近、ブロックチェーンプラットフォームのHyperledger Fabricを勉強しています。

そこで、勉強のためにNode.jsで書かれているサンプルコードを読んでいたのですが、コードの端々に出てくる「await」って奴が何か分からず、調べてみることにしました。

ちなみに読んでいたのはサンプルコード「Fabcar」の「query.js」です。
URL:https://github.com/hyperledger/fabric-samples/blob/release-1.4/fabcar/javascript/query.js

awaitとは何か?

まずは簡単にググってみると、どうやらPromiseによる非同期処理をより簡潔に記述できる方法らしいのです。

ふーん、なるほど!

って、恥ずかしながらPromiseがなんなのかを知りません。これはPromiseを理解する必要がありそうですね。

promiseとはなにか?

まずJavaScriptには非同期処理といって、前の処理の終了を待たずに次の処理が動くという性質があります。

でもそれでは都合の悪い場合もあるので、「非同期じゃなくて、この順序通りにやってほしい」という場合には、コールバック関数というものを使っていました。

ところがコールバック関数で記述すると、どんどん処理がネストしていっちゃって、物凄く読みにくいんですよね。

そんな困った問題を解決してくれたのが、Promiseという訳です。

と、ここまでは良かったのですが、実際の記述については、ネットではなかなかまとまった情報が見つからず苦戦しました。そんな中で、以下のサイトは群を抜いて分かりやすく体系的な説明がされていて、とても参考になりました。おすすめです!

Javascript Promiseの本
https://azu.github.io/promises-book/#chapter1-what-is-promise

以下で、大事そうなところを、自分なりにまとめてみます。

Promiseの特徴

Promiseオブジェクトを使用して非同期処理を書くことで、コールバック関数を使用した非同期処理よりも、すっきりと直感的に同期処理を記述できる。

Promiseを使った処理の流れ

  1. コンストラクタで、Promiseオブジェクトを作成する(オブジェクト内に非同期処理を記述)
  2. 作成したPromiseオブジェクトに対し、.thenメソッドで正常処理を記述する(異常処理は.chatchメソッドで記述できる)

Async Function

Async Functionは通常の関数とは異なり、必ずPromiseインスタンスを返す関数を定義する構文です。Async Functionは次のように関数の前にasyncをつけることで定義できます。

つまり、asyncを関数の頭につけると、関数の戻り値はかならずPromiseインスタンスでなくてはならない。またresolveでなく、returnで値を返却することができる。

wait式

wait式は右辺のPromiseインスタンスがFulfilledまたはRejectedになるまで、その行(文)で非同期処理の完了を待ちます。 そしてPromiseインスタンスの状態が変わると、次の行(文)から処理を再開します。

つまり、完了するまで次の行を実行して欲しくない場合に、awaitをつければ良い。

結論

非同期がらみの部分って複雑で、今まで敬遠してしまっていましたが、Awaitを使えば直感的にコードを書けるようになりそうです。

また、当初の問題だった「Fabcar」の「query.js」も、PromiseとAwaitを理解したら、きちんと読めるようになりました!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0