Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@mounntainn

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

More than 1 year has passed since last update.

まだ、業務で使ったことがないのですが
少し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 基礎の基礎

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mounntainn
備忘録を記事にしています。たまにtipsなど。経験は↓リンクのresumeを参照。 好きな言語はC#とTypeScript。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?