jQuery DeferredsとPromisesを使いこなす: .then() vs .done() の違い

2024-04-02

jQuery DeferredsとPromises：.then() vs .done()

オブジェクトの生成

Deferred: jQuery.Deferred()を使って生成
Promise: new Promise()を使って生成

状態遷移

Deferred: 3つの状態を持つ (pending, resolved, rejected)
Promise: 2つの状態を持つ (pending, settled)

コールバックの登録

Deferred:
- .done(): 成功時のコールバック
- .always(): 常に実行されるコールバック
Promise:
- .then(): 成功時と失敗時の両方のコールバック

.then() vs .done()

機能	.then()	.done()
処理結果	受け取れる	受け取れない
失敗時の処理	記述できる	記述できない
チェーン化	可能	可能

使い分け

.then(): 処理結果を受け取り、複雑な処理を記述したい場合
.done(): 処理完了のみを検知したい場合

例

// Deferred
$.ajax({
  url: "https://example.com/api"
}).done(function(data) {
  // 成功時の処理
}).fail(function(error) {
  // 失敗時の処理
});

// Promise
fetch("https://example.com/api")
.then(function(response) {
  return response.json();
})
.then(function(data) {
  // 成功時の処理
})
.catch(function(error) {
  // 失敗時の処理
});

jQuery DeferredsとPromisesは非同期処理を扱うためのツール
Deferredsは3つの状態、Promisesは2つの状態を持つ
Deferredsは3種類のコールバック、Promisesは2種類のコールバック
.then()は処理結果を受け取れる、.done()は受け取れない
処理結果を受け取り、複雑な処理を記述したい場合は.then()、処理完了のみを検知したい場合は.done()

Deferred

// Deferredオブジェクトを作成
var deferred = $.Deferred();

// 非同期処理を実行
setTimeout(function() {
  // 処理完了
  deferred.resolve("成功");
}, 1000);

// 処理完了時のコールバック
deferred.done(function(data) {
  console.log("成功:", data);
});

// 失敗時のコールバック
deferred.fail(function(error) {
  console.log("失敗:", error);
});

Promise

// Promiseオブジェクトを作成
var promise = new Promise(function(resolve, reject) {
  // 非同期処理を実行
  setTimeout(function() {
    // 処理完了
    resolve("成功");
  }, 1000);
});

// 処理完了時のコールバック
promise.then(function(data) {
  console.log("成功:", data);
});

// 失敗時のコールバック
promise.catch(function(error) {
  console.log("失敗:", error);
});

.then() vs .done()

// .then()
$.ajax({
  url: "https://example.com/api"
}).then(function(data) {
  // 処理結果を受け取る
  console.log("成功:", data);
  
  // 次の処理を実行
  return data.id;
}).then(function(id) {
  // 前回の処理結果を受け取る
  console.log("ID:", id);
}).catch(function(error) {
  // 失敗時の処理
  console.log("失敗:", error);
});

// .done()
$.ajax({
  url: "https://example.com/api"
}).done(function(data) {
  // 処理完了のみを検知
  console.log("成功");
});

上記コードは、それぞれの機能を理解する助けになるでしょう。

jQuery DeferredsとPromisesを扱うその他の方法

$.ajax() メソッドは、非同期通信を行うための便利な方法です。このメソッドは、Deferredオブジェクトを返します。

$.ajax({
  url: "https://example.com/api"
}).done(function(data) {
  // 成功時の処理
}).fail(function(error) {
  // 失敗時の処理
});

$.when() メソッドは、複数のDeferredオブジェクトをまとめて処理するための方法です。すべてのDeferredオブジェクトが完了した時点で、コールバックが実行されます。

var deferred1 = $.Deferred();
var deferred2 = $.Deferred();

$.when(deferred1, deferred2).done(function() {
  // すべてのDeferredオブジェクトが完了
});

// 非同期処理を実行
setTimeout(function() {
  deferred1.resolve();
}, 1000);

setTimeout(function() {
  deferred2.resolve();
}, 2000);

var promise1 = new Promise(function(resolve, reject) {
  // 非同期処理を実行
  setTimeout(function() {
    resolve();
  }, 1000);
});

var promise2 = new Promise(function(resolve, reject) {
  // 非同期処理を実行
  setTimeout(function() {
    resolve();
  }, 2000);
});

Promise.all([promise1, promise2]).then(function() {
  // すべてのPromiseオブジェクトが完了
});

async / await は、非同期処理をより簡単に記述するための構文です。

async function getData() {
  const response = await fetch("https://example.com/api");
  const data = await response.json();
  return data;
}

getData().then(function(data) {
  // 処理結果を受け取る
  console.log("成功:", data);
}).catch(function(error) {
  // 失敗時の処理
  console.log("失敗:", error);
});