LoginSignup
11
10

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

Last updated at Posted at 2017-11-21

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

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

Deferred
// 関数定義
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 基礎の基礎

11
10
0

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
11
10