jQuery
async

jQueryのdeferred用いたajaxについての備忘録

まだ、業務で使ったことがないのですが
少しjQueryのajaxの書き方をお勉強しましたのでまとめます。

Defferdオブジェクトを使うことによって
シーケンシャルな非同期処理の実装が可能になります。

Defferd
// 関数定義
function ajaxWithAppendToBody(ajaxOptions){
    var deferred = new $.Deferred;

    $.ajax(ajaxOptions).done(function(data){
        $(data).appendTo("body"); // ajax通信が成功したらbodyにappendする。
        deferred.resolve(data); // resolve()でdoneメソッドを呼び出す

    }).fail(function(data){
        deferred.reject(data);  // reject()でfailメソッドを呼び出す
    });

    return deferred.promise();  // 戻り値はpromiseにする
}

// 利用側
ajaxWithAppendToBody({
    url: "//example.com"

}).done(function(data){
    // 非同期処理が成功時の処理

}).fail(function(data){
    // 非同期処理が失敗時の処理
});

非同期処理の成功時:deferred.resolve,
非同期処理の失敗時:deferred.reject,
非同期処理の戻り値:deferred.promise
とすることで

非同期処理を受け取る側は
成功時:done,
失敗時:fail,
常時:always
で非同期処理を受け取って次の処理へ繋げられます。

尚、ajax()メソッドではDeferredオブジェクトが返ってくるので、
そのままdone, fail, alwaysは使えます。


参考: jQuery Deferred 基礎の基礎