jQuery jQuery.Deferred() 方法（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 的异步编程世界中，处理回调函数（Callback）常常会陷入“回调地狱”（Callback Hell）的困境，代码逻辑变得难以维护且可读性极低。jQuery 团队为此引入了 jQuery.Deferred() 方法，它通过Promise 对象的模式，将异步操作的控制权交给开发者，让代码结构更清晰、协作更高效。本文将深入剖析这一方法的核心原理、使用场景及实战技巧，帮助开发者突破异步编程的瓶颈。

一、理解 Deferred 对象：什么是 Promise？

1.1 从“快递物流”看 Promise 的本质

想象你寄出一个包裹后，快递公司会提供一个追踪单号，你可以通过它随时查询包裹状态。Promise 对象就像这个“追踪单号”，它代表一个异步操作的未来结果，包含以下三种状态：

• Pending（进行中）：初始状态，操作尚未完成。
• Resolved（已成功）：操作成功完成。
• Rejected（已失败）：操作因错误终止。

1.2 Deferred 与 Promise 的关系

jQuery.Deferred() 是一个工厂函数，它会返回一个Deferred 对象，而 Deferred 对象同时包含两个接口：

• Deferred 接口：用于控制异步操作的进度（如手动标记成功或失败）。
• Promise 接口：用于观察异步操作的结果（如注册成功或失败的回调函数）。

比喻：Deferred 是快递公司的“内部系统”，可标记包裹状态；而 Promise 是用户手中的“追踪单号”，只能查看状态而无法修改。

二、核心方法详解：如何操作 Deferred 对象？

2.1 创建 Deferred 对象

通过 $.Deferred() 创建一个 Deferred 实例：

const deferred = $.Deferred();

2.2 核心方法列表

2.3 基础用法示例

const deferred = $.Deferred();

// 模拟异步操作（例如 AJAX 请求）
setTimeout(() => {
  if (/* 操作成功 */ true) {
    deferred.resolve("操作成功！");
  } else {
    deferred.reject("操作失败！");
  }
}, 1000);

// 注册回调
deferred
  .done((message) => console.log("成功:", message))
  .fail((error) => console.error("失败:", error));

三、进阶技巧：链式调用与错误处理

3.1 链式调用：组合多个异步操作

通过 then() 的返回值，可以实现异步操作的链式调用，例如：

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

deferred1
  .then(() => {
    console.log("第一个操作完成，开始第二个操作");
    return deferred2.promise(); // 返回下一个 Promise
  })
  .then(() => console.log("所有操作完成！"));
  
// 模拟操作完成
setTimeout(() => deferred1.resolve(), 500);
setTimeout(() => deferred2.resolve(), 1000);

3.2 错误处理：全局捕获异常

通过在链式末尾添加 fail()，可捕获所有未处理的错误：

deferred
  .then(() => {
    throw new Error("模拟错误");
  })
  .fail((error) => console.error("全局错误:", error));

四、实战案例：用 Deferred 简化 AJAX 请求

4.1 传统回调地狱 vs Deferred 风格

传统写法（回调地狱）：

$.ajax({
  url: "/api/data",
  success: function(response) {
    process(response);
    $.ajax({
      url: "/api/another",
      success: function(anotherResponse) {
        combine(response, anotherResponse);
      },
      error: function(error) {
        console.error("第二个请求失败");
      }
    });
  },
  error: function(error) {
    console.error("第一个请求失败");
  }
});

Deferred 改进版：

function fetchData() {
  const dfd = $.Deferred();
  $.ajax({
    url: "/api/data",
    success: (response) => dfd.resolve(response),
    error: (error) => dfd.reject(error)
  });
  return dfd.promise();
}

function fetchAnother() {
  // 类似定义第二个 AJAX 请求的 Deferred
}

fetchData()
  .then(fetchAnother)
  .then(combine)
  .fail((error) => console.error("任意步骤失败:", error));

五、注意事项：避免常见陷阱

5.1 不要重复调用 resolve() 或 reject()

若多次调用 resolve()，后续的回调可能不会触发，需确保每个 Deferred 只被标记一次状态。

5.2 保持 Promise 接口的独立性

通过 deferred.promise() 返回 Promise 对象，避免外部直接调用 resolve() 或 reject()，保证代码的封装性。

5.3 与原生 JavaScript 的 Promise 对象兼容

jQuery 的 Deferred 兼容 ES6 Promise，可通过 then() 方法无缝衔接原生 Promise：

const nativePromise = Promise.resolve("原生 Promise");
nativePromise.then((result) => console.log(result));

六、总结：掌握 Deferred 的核心价值

通过本文的讲解，我们了解到 jQuery.Deferred() 方法 是解决异步编程复杂度的利器。它通过 Promise 模式，将分散的回调函数组织成可读性更强的链式结构，同时支持全局错误处理和灵活的状态控制。对于前端开发者而言，掌握 Deferred 的核心概念和用法，不仅能提升代码质量，还能为后续学习原生 JavaScript 的 Promise 或 async/await 打下坚实基础。

最后提醒：在实际项目中，若需处理更复杂的异步流程（如并行请求或超时控制），可结合 $.when()、$.ajaxSetup() 等 jQuery 工具方法，进一步扩展 Deferred 的能力。