概要

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 の準備ができて、結合で一発で決まったらとても気持ちが良い。