详解JavaScript异步编程中jQuery的promise对象的作用

作者：木棉时间：2026-10-31 00:19:55浏览：517

本文深入解析JavaScript异步编程中的Promise模式，阐述其三种状态及不可变性原理。通过对比原生XMLHttpRequest嵌套回调的复杂性，展示Promise如何简化异步逻辑。文章还从零构建Promise框架，并对比jQuery和Dojo中Deferred对象的具体实现与用法，帮助开发者掌握降低异步代码复杂度的技巧。

Promise对象的基本概念与状态机制

Promise，中文可理解为“愿望”，它代表单个操作完成后的最终结果。一个Promise对象拥有三种状态：unfulfilled（未满足）、fulfilled（满足）和failed（失败）。其中，fulfilled和failed状态均可被监听。Promise的状态只能从未满足转变为满足或失败，一旦进入后两者之一，状态将不可逆转。这种“不可变性”至关重要，它能防止状态监听器修改Promise状态从而引发其他监听器的异常行为。例如，若监听fulfilled状态的回调将状态改为failed，会触发failed监听器；若该监听器又将状态改回fulfilled，则会导致死循环。另一种理解方式是将Promise视为JavaScript中的原始类型（primitive）变量：它可以被传入函数，但不会被被调用的函数所改变。

每个Promise对象都包含一个then(fulfilledHandler, errorHandler, progressHandler)方法，用于监听Promise的不同状态。fulfilledHandler用于处理fulfilled事件，errorHandler用于处理failed事件，progressHandler用于处理progress事件。需要注意的是，Promise并不强制要求实现progress状态的事件监听，例如jQuery的Deferred实现就未包含对progress状态的处理。

then(...)函数中，fulfilledHandler和errorHandler的返回值是一个新的Promise对象，这使得链式调用then(...)成为可能。在正常情况下，每个回调函数返回的是处于fulfilled状态的Promise；如果回调函数返回错误值，则返回的Promise状态将变为failed。

Promise在异步编程中的作用

promise在异步编程中的作用

异步模式在Web编程中日益重要。对于主流语言JavaScript而言，这种模式的实现曾较为繁琐，因此许多JavaScript库（如jQuery和Dojo）引入了称为promise的抽象（有时也称为deferred）。通过这些库，开发者可以在实际开发中使用promise模式。随着Web 2.0技术的发展，浏览器端承担了更多计算压力，“并发”变得极具价值。开发者既要保证页面与用户的交互不受影响，又要协调页面与异步任务的关系，这种非线性执行的要求带来了适应困难。暂且不谈页面交互，异步调用通常需要处理两种结果：成功操作和失败处理。在成功的调用后，我们可能需要将返回结果用于另一个Ajax请求，这会导致“函数连环套”现象，增加编程复杂性。请参考以下基于XMLHttpRequest2的代码示例：


function searchTwitter(term, onload, onerror) {
 
   var xhr, results, url;
   url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
   xhr = new XMLHttpRequest();
   xhr.open('GET', url, true);
 
   xhr.onload = function (e) {
     if (this.status === 200) {
       results = JSON.parse(this.responseText);
       onload(results);
     }
   };
 
   xhr.onerror = function (e) {
     onerror(e);
   };
 
   xhr.send();
 }
 
 function handleError(error) {
   /* handle the error */
 }
 
 function concatResults() {
   /* order tweets by date */
 }
 
 function loadTweets() {
   var container = document.getElementById('container');
 
   searchTwitter('#IE10', function (data1) {
     searchTwitter('#IE9', function (data2) {
       /* Reshuffle due to date */
       var totalResults = concatResults(data1.results, data2.results);
       totalResults.forEach(function (tweet) {
         var el = document.createElement('li');
         el.innerText = tweet.text;
         container.appendChild(el);
       });
     }, handleError);
   }, handleError);
 }

上述代码的功能是获取Twitter中hashtag为IE10和IE9的内容并在页面中显示。这种嵌套的回调函数难以理解，开发者需要仔细分析哪些代码用于业务逻辑，哪些代码处理异步函数调用，导致代码结构支离破碎。错误处理也被分散，需要在各个地方检测错误并作出相应处理。

为了降低异步编程的复杂性，开发者一直在寻找简便的方法来处理异步操作。其中一种处理模式称为promise，它代表了一种可能会长时间运行且不一定必须立即完成的操作的结果。这种模式不会阻塞并等待长时间操作完成，而是返回一个代表承诺（promised）结果的对象。

考虑这样一个例子：页面代码需要访问第三方API，网络延迟可能导致响应时间较长。在这种情况下，采用异步编程不会影响整个页面与用户的交互。promise模式通常会实现一个称为then的方法，用于注册状态变化时对应的回调函数。请参考以下代码示例：


searchTwitter(term).then(filterResults).then(displayResults);

promise模式在任何时刻都处于以下三种状态之一：未完成（unfulfilled）、已完成（resolved）和拒绝（rejected）。以CommonJS Promise/A标准为例，promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象，从而形成promise管道。这种返回promise对象的方式支持开发者将异步操作串联起来，例如then(resolvedHandler, rejectedHandler)。当promise对象进入完成状态时，resolvedHandler回调函数会被触发并传递结果；当处于拒绝状态时，rejectedHandler函数会被调用。

从零构建Promise框架

有了promise模式，我们可以重新实现上述Twitter示例。为了更好地理解实现方法，我们尝试从零开始构建一个promise模式的框架。首先，需要一些对象来存储promise。


var Promise = function () {
    /* initialize promise */
  };

接下来，定义then方法，接受两个参数用于处理完成和拒绝状态。


Promise.prototype.then = function (onResolved, onRejected) {
   /* invoke handlers based upon state transition */
 };

同时还需要两个方法来执行从未完成到已完成和从未完成到拒绝的状态转变。


Promise.prototype.resolve = function (value) {
   /* move from unfulfilled to resolved */
 };
 
 Promise.prototype.reject = function (error) {
   /* move from unfulfilled to rejected */
 };

现在搭建了一个promise的架子，我们可以继续上面的示例，假设只获取IE10的内容。创建一个方法来发送Ajax请求并将其封装在promise中。这个promise对象分别在xhr.onload和xhr.onerror中指定了完成和拒绝状态转变的过程，请注意searchTwitter函数返回的正是promise对象。然后，在loadTweets中，使用then方法设置完成和拒绝状态对应的回调函数。


function searchTwitter(term) {

  var url, xhr, results, promise;
  url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
  promise = new Promise();
  xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onload = function (e) {
    if (this.status === 200) {
      results = JSON.parse(this.responseText);
      promise.resolve(results);
    }
  };

  xhr.onerror = function (e) {
    promise.reject(e);
  };

  xhr.send();
  return promise;
}

function loadTweets() {
  var container = document.getElementById('container');
  searchTwitter('#IE10').then(function (data) {
    data.results.forEach(function (tweet) {
      var el = document.createElement('li');
      el.innerText = tweet.text;
      container.appendChild(el);
    });
  }, handleError);
}

到目前为止，我们可以把promise模式应用于单个Ajax请求，似乎还体现不出promise的优势来。下面来看看多个Ajax请求的并发协作。此时，我们需要另一个方法when来存储准备调用的promise对象。一旦某个promise从未完成状态转化为完成或者拒绝状态，then方法里对应的处理函数就会被调用。when方法在需要等待所有操作都完成的时候至关重要。


Promise.when = function () {
  /* handle promises arguments and queue each */
};

以刚才获取IE10和IE9两块内容的场景为例，我们可以这样来写代码：


var container, promise1, promise2;
container = document.getElementById('container');
promise1 = searchTwitter('#IE10');
promise2 = searchTwitter('#IE9');
Promise.when(promise1, promise2).then(function (data1, data2) {

  /* Reshuffle due to date */
  var totalResults = concatResults(data1.results, data2.results);
  totalResults.forEach(function (tweet) {
    var el = document.createElement('li');
    el.innerText = tweet.text;
    container.appendChild(el);
  });
}, handleError);

分析上面的代码可知，when函数会等待两个promise对象的状态发生变化再做具体的处理。在实际的Promise库中，when函数有很多变种，比如 when.some()、when.all()、when.any()等，读者从函数名字中大概能猜出几分意思来，详细的说明可以参考CommonJS的一个promise实现when.js。

主流框架中的Promise实现对比

除了CommonJS，其他主流的Javascript框架如jQuery、Dojo等都存在自己的promise实现。开发人员应该好好利用这种模式来降低异步编程的复杂性。我们选取Dojo为例，看一看它的实现有什么异同。

Dojo框架里实现promise模式的对象是Deferred，该对象也有then函数用于处理完成和拒绝状态并支持串联，同时还有resolve和reject，功能如之前所述。下面的代码完成了Twitter的场景：


function searchTwitter(term) {

  var url, xhr, results, def;
  url = 'http://search.twitter.com/search.json?rpp=100&q=' + term;
  def = new dojo.Deferred();
  xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onload = function (e) {
    if (this.status === 200) {
      results = JSON.parse(this.responseText);
      def.resolve(results);
    }
  };

  xhr.onerror = function (e) {
    def.reject(e);
  };

  xhr.send();
  return def;
}

dojo.ready(function () {
  var container = dojo.byId('container');
  searchTwitter('#IE10').then(function (data) {
    data.results.forEach(function (tweet) {
      dojo.create('li', {
        innerHTML: tweet.text
      }, container);
    });
  });
});

不仅如此，类似dojo.xhrGet方法返回的即是dojo.Deferred对象，所以无须自己包装promise模式。


var deferred = dojo.xhrGet({
  url: "search.json",
  handleAs: "json"
});

deferred.then(function (data) {
  /* handle results */
}, function (error) {
  /* handle error */
});

除此之外，Dojo还引入了dojo.DeferredList,支持开发人员同时处理多个dojo.Deferred对象，这其实就是上面所提到的when方法的另一种表现形式。


dojo.require("dojo.DeferredList");
dojo.ready(function () {
  var container, def1, def2, defs;
  container = dojo.byId('container');
  def1 = searchTwitter('#IE10');
  def2 = searchTwitter('#IE9');

  defs = new dojo.DeferredList([def1, def2]);

  defs.then(function (data) {
    // Handle exceptions
    if (!results[0][0] || !results[1][0]) {
      dojo.create("li", {
        innerHTML: 'an error occurred'
      }, container);
      return;
    }
    var totalResults = concatResults(data[0][1].results, data[1][1].results);

    totalResults.forEach(function (tweet) {
      dojo.create("li", {
        innerHTML: tweet.text
      }, container);
    });
  });
});

上面的代码比较清楚，不再详述。

说到这里，读者可能已经对promise模式有了一个比较完整的了解，异步编程会变得越来越重要，在这种情况下，我们需要找到办法来降低复杂度，promise模式就是一个很好的例子，它的风格比较人性化，而且主流的JS框架提供了自己的实现。所以在编程实践中，开发人员应该尝试这种便捷的编程技巧。需要注意的是，promise模式的使用需要恰当地设置promise对象，在对应的事件中调用状态转换函数，并且在最后返回promise对象。

作者最新文章

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01