DefferやらPromiseやらを使ってJqueryでAjax

JqueryでAjaxってたんですがどうやら古い書き方と新しい書き方があるらしいので調べて書き換えてみました。

JavaScriptは書き方がありすぎてどれが正解なのかわからないね〜

古い方

#

$(function ($) {
    $('#main-form').submit(function (event) {
        // HTMLでの送信をキャンセル
        event.preventDefault();

        // 操作対象のフォーム要素を取得
        var $form = $(this);
 　　　　　　
　　　　　　　//ボタンを無効化するために取得
        var $button = $form.find('#search-button');

        // 送信
        $.ajax({
            url: 'urlだよ',
            type: 'GET',
            data: $form.serialize(),
            dataType: 'json',
            timeout: 10000,  // 単位はミリ秒

            // 送信前
            beforeSend: function (xhr, settings) {
                // ボタンを無効化し、二重送信を防止
                $button.prop('disabled', true);
            },
            // 応答後
            complete: function (xhr, textStatus) {
                // ボタンを有効化し、再送信を許可
                $button.prop('disabled', false);
            },

            // 通信成功時の処理
            success: function (result, textStatus, xhr) {
                //なんかする
                console.log(result);
            }
        });
    });

})

main-formのformボタンで通信を発生させる場合のやつ。

ボタンを無効化して通信が終わったら有効化。通信成功したらなんかします。

普通に動くんだけど古いんですって。

古いだけなら別にいいんですが同じAPIを叩いて成功時の処理だけ変えたいとかいう時に同じのを書かなきゃいけない感じがあってちょっと不便そうですよね。

新しいらしい方

#

$(function ($) {
    $('#main-form').submit(function (event) {
        // HTMLでの送信をキャンセル
        event.preventDefault();

        // 操作対象のフォーム要素を取得
        var $form = $(this);

        //ボタンを無効化
        var $button = $form.find('#search-button');
        $button.prop('disabled', true);

        API.search($form.serialize())
        .done(
            (result, textStatus, xhr) => {
                //なんかする
                console.log(result);
            }
        )
        .always(
            (xhr, textStatus) => {
                // ボタンを有効化し、再送信を許可
                $button.prop('disabled', false);
            },
        )
        .fail(
            () =>{
                //エラー処理
                console.log("失敗");
            }
        )
    });
})

//JavaScript
var API = {
    search: function(data : string) {
        var defer = $.Deferred();
        // 送信
        $.ajax({
            url: 'urlだよ',
            type: 'GET',
            data: data,
            dataType: 'json',
            timeout: 10000,  // 単位はミリ秒
            success: defer.resolve,
            error: defer.reject

        });
        return defer.promise();
    }
};

//TypeScriptならこっちの方がより良い感じ
// class API{
//     static search(data : string) {
//         var defer = $.Deferred();
//         // 送信
//         $.ajax({
//             url: 'getSearch',
//             type: 'GET',
//             data: data,
//             dataType: 'json',
//             timeout: 10000,  // 単位はミリ秒
//             success: defer.resolve,
//             error: defer.reject
//         });
//         return defer.promise();
//     }
// };

すっきりですね！

これで同じAPIを叩く時はdoneとfailとalwaysの中を書き換えるだけでいいので便利ですね。

読みやすいし。

TypeScriptだとなおわかりやすい。気がします。

以上です。

以下を参考にさせていただきました。

jQueryのDeferredを用いたモダンなAjax処理の書き方

jQueryのDeferredとPromiseで応答性の良いアプリをー基本編

Defferなどの細かいことはこちら二つを読むととてもよくわかるとおもいます。

JavaScriptの進化は早いですね。

ではまた。