Spring Boot Ajax/JavaScript/API連携

Ajax通信をPromiseを使って実装してみた

JavaScriptのPromiseは、非同期処理の成功時・失敗時の処理を明示的に書くことができるオブジェクトのことをいい、非同期処理のコールバック関数をエレガントに記述することができる。

今回は、Ajax通信をPromiseを使って実装してみたので、そのサンプルプログラムを共有する。

なお、下記サイトを確認すると、Promiseは、ChromeやEdgeの最新版などには対応しているが、IE11には対応していないことが確認できる。
https://caniuse.com/?search=Promise

前提条件

下記記事の実装が完了していること。

Spring BootでAjaxを利用してみたSpring BootのWEB画面上では、Ajax通信も行うことができる。今回は、jQueryを利用しない形で、Ajax通信を含むサンプ...



サンプルプログラムの作成

作成したサンプルプログラムの構成は以下の通り。
サンプルプログラムの構成
なお、上記の赤枠は、前提条件のプログラムから追加/変更したプログラムである。

JavaScriptのコード内容は以下の通りで、Ajax通信の定義をPromiseを使って記述している。



また、初期表示画面の内容は以下の通りで、検索ボタンのid属性を追加し、検索ボタンが押された時の処理(onclick属性)を削除している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-js-promise/demo



サンプルプログラムの実行結果

サンプルプログラムの実行結果は、前提条件の下記記事と同じ結果となる。

Spring BootでAjaxを利用してみたSpring BootのWEB画面上では、Ajax通信も行うことができる。今回は、jQueryを利用しない形で、Ajax通信を含むサンプ...

要点まとめ

  • JavaScriptのPromiseは、非同期処理の成功時・失敗時の処理を明示的に書くことができるオブジェクトのことをいい、非同期処理のコールバック関数をエレガントに記述することができる。