JavaScript promiseの備忘録

目次

この記事の目的

JavaScript(以下js)という言語は並列処理(マルチスレッド)ができない言語です。
ですので、プログラムされた命令を1つずつ処理しています。
この場合、一つ問題が出てきます。

例えば、処理1と処理2、処理3の順番で実行するプログラムがあったとします。
ここで、処理2の処理にすごく時間がかかった場合どうなるでしょうか?

。。。。。

そうです、処理2が完了するまで、処理3に進めません。
病院に例えると、二番目の患者の診察治療が終了するまで、三番目の患者は受付も採血もできないまま待たされると言うことですね。
これでは困ってしまうため、jsでは非同期処理を行っています。
非同期処理では、時間のかかる処理(ここでは処理2)に対してPromiseを返します。
とりあえず時間かかりそうなんで、後で何かしら結果を返すね!という結果を返すのです。
こうすることで、jsはとりあえず処理2でpromiseもらえたので次の処理に移れるのです。

				
					  console.log('処理1');
  var result = new Promise(function(resolve) {
  resolve(new Date);
  });
  console.log(result + 'ここは処理2');
  //new Date()で日付の取得をし、promiseに格納します。
  console.log(’処理3);
				
			

このコードの結果は以下の通りです。

				
					処理1
[object Promise]処理2
処理3
				
			

Promiseの処理

ただ、Promiseが返ってくるのはいいのですが、このままでは中身がわかりません。
病院で例えると、受付をして整理券をもらっただけで、診察をしてもらっておらず結果がわかっていない状態ですね。
最終的な結果を得るためにはさらに、工夫が必要です。
現在の状態は、

処理1

処理2(後で結果を返す約束をしているだけで答えがない)

処理3

ですので、約束を果たしてもらう必要があります。そのためには
promiseの持つ、thenメソッドを使います。

				
					  console.log('処理1');
  var result = new Promise(function(resolve) {
  resolve(new Date);
  });

  console.log(result + 'ここは処理2');
  //↑の時点ではpromiseが返される
 
  result.then(function(res){
  console.log(res)
  )};
  //この処理でpromiseが格納されていた変数resultに結果が返されます。

  console.log(’処理3)
				
			

結果

				
					処理1
[object Promise]処理2
処理3
Sat May 01 2021 01:04:05 GMT+0900 (日本標準時)
				
			

最後の行にSat May 01 2021 01:04:05 GMT+0900 (日本標準時)が表示されています。

まとめ

1.jsには非同期処理がある。
時間のかかる処理はそちら(APIならサーバーなど)に任せてとりあえずpromiseを返して次に行く。

2.promiseはそのままでは中身がわからない。
実際に中身を見るにはthenメソッドでresponseの中身を得る必要があります。

今回の例はコンソールに表示するだけでしたが、DOM操作で要素を生成するなりするとブラウザに表示ができます。