异常教程

jQuery deferred.reject() 方法（长文讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，异步编程是不可或缺的核心技术之一。无论是处理用户交互、网络请求，还是复杂的数据处理，开发者都需要高效管理异步操作的流程与状态。在 jQuery 中，Deferred 对象及其相关方法（如 reject()）为开发者提供了一套结构化、可组合的异步编程工具。本文将深入讲解 jQuery deferred.reject() 方法 的原理、用法及实战案例，帮助读者理解如何通过这一方法优雅地处理异步操作中的失败状态。

一、异步编程与 Deferred 对象基础

1.1 异步编程的挑战

在传统的同步编程中，代码执行是按顺序逐行进行的。但 Web 开发中，许多操作（如 AJAX 请求、文件读取）需要等待外部资源响应，若强行阻塞主线程，会导致页面无响应。因此，异步编程应运而生。然而，异步代码容易引发“回调地狱”（Callback Hell）问题，代码结构混乱，难以维护。

解决方案：Promise 模式与 Deferred 对象
jQuery 的 Deferred 对象是 Promise 模式的具体实现，它将异步任务的状态抽象为三种：

  • Pending（未完成）：初始状态。
  • Resolved（成功完成）：任务成功完成。
  • Rejected（失败完成）：任务因错误终止。

通过 Deferred，开发者可以链式调用 then()、done()、fail() 等方法，清晰地管理异步流程。

1.2 Deferred 对象的核心方法

以下为 Deferred 对象的核心方法：
| 方法名 | 作用 |
|------------------|----------------------------------------------------------------------|
| deferred.resolve() | 将 Deferred 状态设为 Resolved，并触发 done 回调。 |
| deferred.reject() | 将 Deferred 状态设为 Rejected，并触发 fail 回调。 |
| deferred.promise() | 返回一个 Promise 对象，限制外部只能通过 then()、done()、fail() 等方法交互。 |

形象比喻：
可以将 Deferred 对象想象为一家快递公司：

  • resolve() 相当于快递成功送达，触发“签收”通知。
  • reject() 相当于快递因地址错误被退回，触发“退件”通知。
  • promise() 则是快递单据，客户（外部代码）只能通过单据查询物流状态，但无法直接干预快递流程。

二、深入理解 deferred.reject() 方法

2.1 方法定义与语法

deferred.reject() 方法用于手动将 Deferred 对象标记为 Rejected 状态，并立即触发所有已注册的 fail 回调函数。其语法如下：

deferred.reject( any arguments );

参数说明：

  • any arguments：可传递任意参数，这些参数会被传递给 fail 回调函数。

2.2 与 rejectWith() 的区别

Deferred 对象还提供了 rejectWith() 方法，其语法为：

deferred.rejectWith( context, [ arguments ] );

两者的区别在于：

  • reject()：直接传递参数给回调，上下文（this）默认为 Deferred 对象本身。
  • rejectWith()：允许指定回调函数的执行上下文（context），并以数组形式传递参数。

案例对比：

// 使用 reject()  
const deferred = $.Deferred();  
deferred.fail( (err) => console.log("Error:", err) );  
deferred.reject("网络请求失败");  // 输出：Error: 网络请求失败  

// 使用 rejectWith()  
const obj = { name: "快递公司" };  
deferred.rejectWith( obj, ["包裹丢失"] );  
// 回调中的 this 指向 obj，参数为 ["包裹丢失"]

三、实战案例：模拟网络请求失败

3.1 场景描述

假设我们正在开发一个天气查询功能，当用户输入城市名后，前端通过 AJAX 请求获取天气数据。若服务器返回错误状态码（如 404 或 500），我们需要通过 reject() 明确标记请求失败，并触发对应的错误提示。

3.2 代码实现

function fetchWeather(city) {  
    return $.Deferred( function( deferred ) {  
        // 模拟异步请求（2秒后返回结果）  
        setTimeout( () => {  
            if (city === "不存在的城市") {  
                deferred.reject("城市不存在");  
            } else {  
                deferred.resolve({ temp: 25, description: "晴" });  
            }  
        }, 2000 );  
    } ).promise();  
}  

// 使用 fetchWeather  
fetchWeather("不存在的城市")  
    .done( (data) => console.log("天气数据:", data) )  
    .fail( (error) => {  
        console.error("请求失败:", error);  
        alert("无法获取天气信息，请检查城市名称！");  
    } );

3.3 代码解析

  1. 创建 Deferred 对象：在 fetchWeather 函数中，通过 $.Deferred() 创建一个 Deferred 对象。
  2. 模拟异步逻辑：使用 setTimeout 模拟网络延迟。若城市名无效（如“不存在的城市”），调用 deferred.reject() 并传递错误信息。
  3. 暴露 Promise 对象：通过 deferred.promise() 返回一个 Promise 对象，外部只能通过 done()（成功）或 fail()（失败）处理结果。
  4. 错误处理：当调用 fetchWeather("不存在的城市") 时，fail 回调会被触发，显示错误提示。

四、deferred.reject() 与其他方法的协作

4.1 与 then() 方法的结合

then() 方法接受两个参数：成功回调和失败回调，其语法为：

deferred.then(  
    successCallback,  
    failureCallback  
);

等价于：

deferred.done( successCallback ).fail( failureCallback );

案例：

$.Deferred( function( deferred ) {  
    deferred.reject("系统错误");  
} )  
.then(  
    (data) => console.log("成功:", data),  
    (err) => console.error("失败:", err)  // 此回调会被触发  
);

4.2 与 always() 方法的配合

always() 方法会无条件触发，无论 Deferred 是成功还是失败。常用于释放资源或记录日志。

$.Deferred()  
    .reject("错误信息")  
    .fail( (err) => console.error("失败:", err) )  
    .always( () => console.log("操作已结束") );  
// 输出：  
// 失败: 错误信息  
// 操作已结束

五、错误处理的最佳实践

5.1 避免全局错误

在异步操作中，若未正确捕获错误，可能导致程序崩溃。通过 fail() 回调，可以集中处理错误，避免代码失控。

$.ajax({  
    url: "/api/weather",  
    success: (data) => console.log(data),  
    error: (jqXHR, textStatus, errorThrown) => {  
        console.error("请求失败:", textStatus, errorThrown);  
        // 可通过 deferred.reject() 触发更高层的错误处理  
    }  
});

5.2 传递结构化错误信息

通过 reject() 传递对象或自定义错误类型，便于精准处理不同错误场景。

deferred.reject({  
    code: 404,  
    message: "资源未找到"  
});  

// 在 fail() 中处理  
.fail( (error) => {  
    if (error.code === 404) {  
        console.log("资源不存在");  
    } else {  
        console.log("其他错误");  
    }  
} );

六、常见误区与解决方案

6.1 重复调用 resolve/reject

一旦 Deferred 状态变为 Resolved 或 Rejected，后续的 resolve() 或 reject() 将被忽略。开发者需确保仅调用一次。

const deferred = $.Deferred();  
deferred.reject("第一次");  
deferred.reject("第二次");  // 无效，状态已为 Rejected  

deferred.fail( (err) => console.log(err) );  // 输出：第一次

6.2 未处理链式操作中的失败

在复杂的链式调用中，若某一步失败，后续的 then() 成功回调将不再触发，但可以通过 fail() 继续传递错误。

$.Deferred()  
    .reject("错误1")  
    .then(  
        () => console.log("成功1"),  
        (err) => {  
            console.log("处理错误1");  
            return "新值";  
        }  
    )  
    .then(  
        (val) => console.log("成功2:", val),  // 不会触发  
        (err) => console.log("最终错误:", err)  
    );  
// 输出：  
// 处理错误1  
// 成功2: 新值

结论

通过本文的学习，读者应能掌握 jQuery deferred.reject() 方法 的核心原理、使用场景及常见问题解决方案。该方法不仅是管理异步失败状态的关键工具，也是构建可维护、可扩展 Web 应用的重要基础。在实际开发中，结合 Deferred 对象的其他方法（如 resolve()、then()、always()），开发者可以更优雅地控制异步流程，提升代码的健壮性与可读性。

建议读者通过以下步骤深化理解：

  1. 在沙箱环境中尝试编写 Deferred 链式调用案例。
  2. 结合真实项目需求，用 deferred.reject() 处理网络请求或数据校验失败场景。
  3. 阅读 jQuery 官方文档，探索 Deferred 对象的更多高级用法。

掌握 jQuery deferred.reject() 方法，是迈向异步编程进阶之路的重要一步。

最新发布

查看更多文章