LoginSignup
10

More than 3 years have passed since last update.

jQuery Mockjax で Web API 非同期通信のシミュレート

Last updated at Posted at 2017-03-10

概要

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

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
10