ログで関数に会話させたら jQuery の Deferred が分かった

はじめに

非同期通信をやろうと思ている人。
私と同じように非同期通信を関数化しようとしてこけた人。
もしかしたら少しわかるようになるかもしれません。

>動機を飛ばして本題へ<

動機

普段開発では Django を使っており、テンプレートエンジンが優秀？便利？なのでそれに頼ってフロントエンドを作成していた。
そんなある日、ボタン操作で毎回画面をロードするのは恥ずかしく、逐一データ取得をしたいので Ajax に手を出さなければならなくなった。
せっかく作るなら、関数化させて処理を分かりやすくさせてみよう！と思ったのもつかの間、Ajax からの返り値が取れない。。。
どうやら Deferred さんを使わなければならないようだ。
私の足りない脳みそを補うためにコンソールログで会話してもらった。

会話させてみた

スクリプト

kaiwa.js

function getDataWithAjax() {
    console.log("A:お約束作成するね");
    var d = $.Deferred();
    $.ajax({
        'url': "/hoge",
        'type': 'GET',
        'dataType': 'json',
    }).done(function (data) {
        d.resolve(true));  // 説明のために返り値を bool にしています
        console.log("A:待っててくれてありがとう");
    }).fail(function () {
        d.reject(false);  // 説明のために返り値を bool にしています
        console.log("A:待っててくれてありがとう");
    })
    console.log("A:お先に返しておきます");
    return d.promise();
}

$(document).ready(function () {
    console.log("B:Ajaxよぶよ");
    $.when(getDataWithAjax()).done(function (data) {
        console.log("B:結果ありがとう");
        console.log("data:", data);
    }).fail(function (data) {
        console.log("B:結果ありがとう");
        console.log("B:でも失敗しちゃったね");
        console.log("data:", data);
    })

});

実行結果

成功時

B:Ajaxよぶよ
A:お約束作成するね
A:お先に返しておきます
A:待っててくれてありがとう
B:結果ありがとう
data: true

失敗時

※ URL を正しくないものに書き換えて実施

B:Ajaxよぶよ
A:お約束作成するね
A:お先に返しておきます
GET http://hoge.com/hogege 404 (Not Found)
A:待っててくれてありがとう
B:結果ありがとう
B:でも失敗しちゃったね
data: false

おわりに

不慣れな分野なので間違っていたり、修正箇所、追加情報あればコメントいただけますと幸いです。

参考