概要
JQuery を使用した UI 開発で、非同期通信で、Web API サーバにアクセスし、
レスポンス戻り値によって、画面表示を切り替える機能などを実装したいが、しばらく WEB API の準備が間に合わないらしい。
そのような状態で、UI開発を進める必要があった場面で、出会った jQuery Mockjax という、便利なプラグインのメモ。
jquery-mockjax
相手先に通信しなくても、ローカルで、非同期通信のリクエストとレスポンスを、シンプルにシミュレートできる。超簡単。便利プラグイン。
jQuery Mockjax: Ajax request mocking
準備
-
上記ライブリのソースをクローンして、distディレクトリに格納された、jquery.mockjax.js をHTML側で読み込む。
-
APIシミュレーション用のファイルを作成し、シミレート用のAPIを実装し、そのファイルをHTML側で読み込む。
api_test.js
//API テスト
$.mockjax({
url: 'http://localhost/heyapi',
//正常な場合
status: 200,
responseText: {
data1: "hello",
data2: 5,
},
});
index.html
<label>HEY : <input type="text"></label>
<button id="sendApi">送信</button>
<h1>結果 : </h1>
<script src="js/lib/jquery-3.1.1.js"></script>
<script src="js/lib/jquery.mockjax.js"></script>
<script src="js/test/api_test.js"></script><!--TODO APIの準備ができたらお疲れ様-->
<script src="index.js"></script>
- 画面用の ajax 通信処理を実装する。
index.js
//送信ボタン押下時の処理
$("button#sendApi").click(function () {
let apiUrl = "http://localhost/heyapi";
$.ajax(apiUrl, {
type: 'GET',
data: "heyhey"
}).done(function (data) {
console.log(data);
$("h1").append("OK!");
}).fail(function () {
$("h1").append("Error....");
});
});
- モックのレスポンスを変更し、正常系、異常系、値によっての画面更新処理などを実装していく。
api_test.js
//API テスト
$.mockjax({
url: 'http://localhost/hey',
//正常な場合
/*
status: 200,
responseText: {
data1: "aaa",
data2: 5,
},
*/
//エラーの場合
status: 401,
responseText: {
msg: "権限がありません。。"
}
});
- サーバサイドで API が準備できたら、APIシミュレーション用ファイル (api_test.js)の読み込み部分を削除
以上
感想
シンプル。実際の WEB API の準備ができて、結合で一発で決まったらとても気持ちが良い。