0Pricing
jQuery Academy · 课时

理解 Deferred 对象

掌握 jQuery Deferred 对象的核心概念，理解它们如何表示异步操作，以及挂起、已解决和已拒绝等状态。

理解 Deferred 对象 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

异步操作与回调

在 Web 开发中，许多任务不会立即完成。例如，从服务器获取数据，或等待用户点击。这些都属于异步操作。

传统上，我们会使用回调：只有在异步任务完成后才运行的函数。但嵌套回调可能导致“回调地狱”，使代码难以阅读和维护。

认识 jQuery Deferred

这正是 jQuery 的 Deferred 对象大显身手的地方！Deferred 对象是一种更整洁地管理异步操作的强大方式。

它就像未来结果的占位符。您可以为它附加函数，在操作完成时运行这些函数，无论操作成功还是失败，并且不会阻塞主代码。

Deferred 的三种状态

Deferred 对象有三种状态，分别反映它所代表的异步任务的状态：

  • 等待中：初始状态。操作尚未完成。
  • 已解决：操作已成功完成。
  • 已拒绝：操作失败或遇到错误。

Deferred 对象一旦进入已解决或已拒绝状态，就不能再更改状态。

创建 Deferred 对象

您可以使用 $.Deferred() 创建新的 Deferred 对象。该对象初始处于等待中状态。

它提供了用于更改状态，以及注册在状态变化时执行的回调函数的方法。

请尝试创建一个：

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

发出成功信号：.resolve()

异步操作成功完成后，请对 Deferred 对象调用 .resolve() 方法。

这会将其状态从等待中改为已解决。传递给 .resolve() 的任何参数，都会继续传递给成功回调。

观察状态变化：

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

发出失败信号：.reject()

如果异步操作失败，请调用 .reject() 方法。

这会将 Deferred 的状态从等待中改为已拒绝。传递给 .reject() 的参数会发送给失败回调，通常是错误消息。

看看拒绝操作的效果：

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

使用 .done() 处理成功

要对成功的操作做出响应（即 Deferred 处于已解决状态时），请使用 .done() 方法附加回调函数。

只有在调用 .resolve() 后，该函数才会执行，并接收传递给 .resolve() 的所有参数。

让我们处理一些数据：

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

使用 .fail() 处理失败

同样地，要处理错误（即 Deferred 处于已拒绝状态时），请使用 .fail() 方法。

传递给 .fail() 的回调函数只有在调用 .reject() 后才会执行，并接收传递给它的参数。

让我们模拟一个错误：

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

始终执行：.always()

有时，无论异步操作成功还是失败，某些代码都必须运行。这正是 .always() 的用途。

使用 .always() 附加的回调函数，无论 Deferred 处于已解决还是已拒绝状态，都会执行。

请使用 .always() 执行清理操作或进行最终的界面更新：

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

使用 .promise() 保护对象

当您从函数返回 Deferred 对象时，可能不希望外部代码能够更改它的状态（例如直接调用 .resolve() 或 .reject()）。

.promise() 方法会返回 Deferred 对象的“只读”版本。它只公开用于附加回调的方法（例如 .done()、.fail() 和 .always()），不提供更改状态的方法。

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

检查您的知识掌握情况

如果要注册一个仅在 Deferred 对象成功完成其异步操作时执行的回调，您会使用以下哪种方法？

回顾：Deferred 基础

做得很好！在本课中，您已经掌握了 jQuery Deferred 对象的核心概念：

  • 它们用于管理异步操作，避免回调地狱。
  • 它们有等待中、已解决或已拒绝三种状态。
  • 成功时使用 .resolve()，失败时使用 .reject()。
  • 使用 .done()（成功）、.fail()（失败）和 .always()（两者）附加回调。
  • .promise() 返回一个只读对象，以防止状态被修改。

接下来，我们将学习如何链接和组合这些功能强大的对象！

常见问题解答

「理解 Deferred 对象」课时是免费的吗？

是的 — 「理解 Deferred 对象」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「理解 Deferred 对象」这节课中我会学到什么？

掌握 jQuery Deferred 对象的核心概念，理解它们如何表示异步操作，以及挂起、已解决和已拒绝等状态。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。

「理解 Deferred 对象」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 理解 Deferred 对象
  2. 串联与组合 Promise
  3. 处理多个异步任务
← 返回 jQuery Academy