以jQuery中$.Deferred对象为例讲解promise对象是如何处

Promises 是 JavaScript 中一种优雅的异步处理抽象，被视为下一个重要的编程范式。一个 Promise 代表一个任务的结果，无论该任务是否已完成。特别是在现代浏览器中原生的 Promise 对象，遵循 Promise/A+ 标准，使得异步处理更加便捷。在 jQuery 1.5+ 版本中，提供的 $.Deferred 对象可以转化为 promise 对象，被广泛应用于处理异步问题。

让我们以 jQuery 中的 $.Deferred 对象为例，看一下 promise 对象如何处理异步问题。我们可以使用 promise 对象来封装异步操作，例如加载图片。这种方式相比于传统的回调函数方式，更加干净、清晰。更重要的是，promise 对象具有连接性，可以串联多个操作。

以下是加载图片的示例代码：

```javascript

// 加载图片函数

var loadImg = function(url) {

var img = new Image(), deferred = $.Deferred();

img.src = url;

img.onload = function() {

// 成功则触发 deferred.resolve

deferred.resolve(this);

};

img.onerror = function(e) {

// 失败则触发 deferred.reject

deferred.reject(e);

};

// 返回 promise 对象

return deferred.promise();

};

// 请求图片

var request = loadImg('

// 请求成功时的回调

request.done(function(img) {

// code

});

// 可以注册多个回调，当请求成功时，会按注册的顺序执行

request.done(function(img) {

// code

});

// 请求失败时的回调

request.fail(function() {

// code

});

// 请求完成（无论成功还是失败）的回调

request.always(function() {

// code

});

```

在异步编程的世界中，Promise作为一种核心机制，帮助我们管理和组织异步操作。我们将通过加载图片的代码示例，深入理解Promise的连接。

一、Promise的连接基础

我们来看一个简单的加载图片的代码示例。使用Promise连接，我们可以将一个异步操作串联起来。看以下代码：

```javascript

var request = loadImg(' // 初始请求

request.then(function(img) {

// request执行成功时连接request1

var request1 = loadImg('

return request1;

}, function(e) {

// request执行失败时连接request2

var request2 = loadImg('

return request2;

}).then(function(result) {

// 在这里处理request或request1的结果，可能是图片数据或其他返回值。

});

```

在这个例子中，我们使用了Promise的then方法。这个方法接受两个回调函数参数：一个是成功时的回调onResolve，另一个是失败时的回调onReject。我们可以在这些回调函数中返回一个新的Promise，从而连接多个异步操作。通过这种方式，我们可以将多个异步操作串行执行。

二、使用jQuery的$.when连接多个Promise

除了串行执行，我们还可以并行执行多个Promise，并使用jQuery的$.when函数来连接它们。看下面的代码：

```javascript

var request = loadImg('

var request1 = loadImg('

var request2 = $.when(request, request1); // 并行执行两个请求

request2.done(function(img, img) { // 两个请求的返回值作为参数传入

// 处理两个请求的结果，可能是两张图片的数据或其他返回值。

});

```

jQuery中的$.when函数可以接受多个Promise对象作为参数，它将等待所有的Promise都完成（无论成功还是失败），然后执行done函数中的回调。这种方式允许我们并行执行多个异步操作。

三、结束与附加信息

这里的代码示例主要围绕加载图片进行，但其实同样的做法可以应用到其他的异步操作中。例如，在jQuery中使用的$.ajax、$.fn.animate等都返回Promise。在Node.js端，我们也可以把一些异步操作（如读数据库、读文件等）封装成Promise，然后使用上述方法对多个Promise进行合并操作，实现串行或并行执行。

除了用于转化Promise对象外，deferred对象本身也很有用。它提供了像Promise对象那样的方法和属性，还有notify和progress等额外功能。在实现进度条和瀑布流等场景时，这些功能特别有用。例如，resolve和done函数可以用于定义进度条读取完成或数据加载完成的触发时机和逻辑；notify和progress函数可以用于在进度读取中或数据加载中的触发时机和逻辑。通过这些功能，我们可以构建出丰富的交互体验。