Deferred オブジェクトと Promise を使って jQuery.ajax の処理継続をスマートに実装

2024-04-11

jQuery.ajax の処理継続応答: "success:" と ".done" の違い

"success:" コールバックは、従来の方法で処理継続を記述する方法です。以下のコード例のように、通信成功時に実行したい処理を記述します。

$.ajax({
  url: "/api/data",
  success: function(data) {
    // データ処理
  }
});

".done" メソッドは、jQuery 1.8 以降で導入された新しい方法です。以下のコード例のように、"success:" コールバックと同等の処理を記述できます。

$.ajax({
  url: "/api/data"
}).done(function(data) {
  // データ処理
});

"success:" コールバックと ".done" メソッドはどちらも処理継続に使用できますが、".done" メソッドの方がいくつかの利点があります。

簡潔な記述: ".done" メソッドは、"success:" コールバックよりも簡潔に記述できます。
Deferred オブジェクトとの連携: ".done" メソッドは、Deferred オブジェクトと連携して、より複雑な処理を記述できます。
エラー処理との統合: ".done" メソッドは、".fail" メソッドと組み合わせて、エラー処理と処理継続を統合できます。

一般的には、".done" メソッドの使用が推奨されます。ただし、既存のコードベースで "success:" コールバックを使用している場合、無理に変更する必要はありません。

"success:" コールバック

<div id="data-container"></div>

<script>
$(function() {
  $.ajax({
    url: "/api/data",
    success: function(data) {
      $("#data-container").html(data);
    }
  });
});
</script>

".done" メソッド

<div id="data-container"></div>

<script>
$(function() {
  $.ajax({
    url: "/api/data"
  }).done(function(data) {
    $("#data-container").html(data);
  });
});
</script>

説明

上記のコードでは、/api/data エンドポイントからデータを取得し、#data-container 要素に表示しています。

"success:" コールバック: 通信成功時に、data パラメータに格納されたデータを取得し、#data-container 要素に挿入します。
".done" メソッド: ".done" メソッドを使用して、"success:" コールバックと同等の処理を記述しています。

実行結果

ブラウザで上記のコードを実行すると、#data-container 要素にサーバーから取得したデータが表示されます。

jQuery.ajax 処理継続のその他の方法

Promise

jQuery 1.8 以降では、Deferred オブジェクトを使用して Promise を生成できます。Promise は、非同期処理の完了を待つための便利な方法です。

const promise = $.ajax({
  url: "/api/data"
});

promise.then(function(data) {
  // データ処理
});

async/await

JavaScript ES2017 以降では、async/await を使用して非同期処理を記述できます。async/await は、Promise よりも簡潔で読みやすいコードを書けるという利点があります。

async function getData() {
  const data = await $.ajax({
    url: "/api/data"
  });

  // データ処理
}

getData();

**3. .when()∗∗複数のDeferredオブジェクトの完了を待つ必要がある場合、.when() メソッドを使用できます。

const promise1 = $.ajax({
  url: "/api/data1"
});

const promise2 = $.ajax({
  url: "/api/data2"
});

$.when(promise1, promise2).then(function(data1, data2) {
  // データ処理
});

使用する方法は、開発者の好みや状況によって異なります。