深入理解Promise与Deferred的关系 - 基于promises-book项目的解析

2025-06-28 16:03:05作者：柏廷章Berta

引言

在现代JavaScript异步编程中，Promise已经成为处理异步操作的标准方式。然而，许多开发者常常会遇到另一个相关概念——Deferred。本文将从技术原理层面深入解析Deferred与Promise的关系，帮助开发者更好地理解这两种异步处理模式。

Deferred与Promise的基本概念

什么是Promise？

Promise是表示异步操作最终完成或失败的对象。它有三种状态：

Pending（进行中）
Fulfilled（已成功）
Rejected（已失败）

Promise一旦状态改变就不会再变（从Pending变为Fulfilled或Rejected）。

什么是Deferred？

Deferred是一种更高级的异步控制模式，它没有统一规范，不同库有各自的实现方式（如jQuery.Deferred、JSDeferred等）。Deferred本质上是一个包含Promise并拥有操作该Promise状态特权的对象。

Deferred与Promise的核心关系

结构关系

Deferred和Promise不是竞争关系，而是包含关系：

Deferred对象内部包含一个Promise对象
Deferred拥有操作其内部Promise状态的特权方法（如resolve、reject）

graph TD
    Deferred -->|包含| Promise
    Deferred -->|特权方法| resolve
    Deferred -->|特权方法| reject

控制权差异

Promise：状态控制权在Promise构造函数内部
Deferred：状态控制权外露，可以在任何地方调用resolve/reject

实现对比

基于Promise实现Deferred

以下是典型的Deferred实现方式：

function Deferred() {
    this.promise = new Promise(function(resolve, reject) {
        this._resolve = resolve;
        this._reject = reject;
    }.bind(this));
}
Deferred.prototype.resolve = function(value) {
    this._resolve(value);
};
Deferred.prototype.reject = function(reason) {
    this._reject(reason);
};

实际应用示例

比较Promise和Deferred两种方式实现HTTP请求：

Promise版本：

function getURL(url) {
    return new Promise(function(resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', url, true);
        req.onload = function() {
            if (req.status === 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };
        req.onerror = function() {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}

Deferred版本：

function getURL(url) {
    var deferred = new Deferred();
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onload = function() {
        if (req.status === 200) {
            deferred.resolve(req.responseText);
        } else {
            deferred.reject(new Error(req.statusText));
        }
    };
    req.onerror = function() {
        deferred.reject(new Error(req.statusText));
    };
    req.send();
    return deferred.promise;
}