认识jQuery的Promise的具体使用方法

jQuery中的Promise：Deferred对象

随着对ES6 Promise对象的深入了解，我们来进一步jQuery中的Promise，也就是jQuery的Deferred对象。

打开浏览器的控制台，我们创建一个Deferred对象。

```javascript

var defer = $.Deferred();

console.log(defer);

```

运行结果展示了一个与ES6的Promise对象相似的结构，jQuery的Deferred对象也拥有resolve、reject、then等方法，同时还有done、fail、always等独特方法。jQuery使用这个Deferred对象来注册异步操作的回调函数，并修改传递异步操作的状态。

接下来，我们来玩一下Deferred对象。创建一个runAsync函数，模拟异步操作：

```javascript

function runAsync(){

var defer = $.Deferred();

//模拟异步操作

setTimeout(function(){

console.log('执行完成');

defer.resolve('异步请求成功之后返回的数据'); //解决promise状态，并传递数据给then方法处理

}, 1000); //延迟一秒钟解决promise状态，模拟异步操作耗时一秒钟完成

return defer; //返回deferred对象实例，便于调用链式方法处理异步操作状态与数据

}

runAsync().then(function(data){ //使用then注册回调处理异步操作完成后需要执行的逻辑处理函数，这里接收resolve方法传递的数据参数

console.log(data); //打印接收到的数据参数

});

```

运行后，通过Deferred对象的resolve方法将参数传递到then方法中接收并打印出来。这和ES6的Promise很相似，但也存在微妙的差别。接下来对比看一下ES6的Promise是如何实现的： 创建一个新的Promise对象实例并传入一个匿名函数作为参数，在这个匿名函数中定义异步操作以及resolve和reject回调。对比之下我们可以发现一些差异： Deferred对象创建时无需传入匿名函数，且其resolve方法是直接可用的；而Promise对象的resolve方法是在内部调用的。这意味着Deferred对象本身就有resolve方法，而Promise对象则是在构造器中通过执行resolve方法来改变状态。这种差异带来了一些潜在的问题：由于Deferred对象的resolve方法可以在外部直接调用，其状态可能会受到外部干预，可能导致意外的结果。例如，在异步操作尚未完成的情况下，外部直接调用resolve方法结束了异步操作的状态。这种设计有其优点也有其潜在的风险，需要根据实际的使用场景进行权衡和选择。jQuery的Deferred对象和ES6的Promise都提供了一种组织和管理异步代码的方式，使得代码更加清晰和易于维护。但在使用时需要注意理解它们之间的差异和使用场景，以便更好地利用它们来管理异步操作。重述文章如下：

关于jQuery中的Deferred对象，这是一个处理异步操作的重要工具。Deferred对象有一个promise方法，它返回一个受限的Deferred对象。所谓的受限，是指这个对象无法在外界改变其状态。

在jQuery中，Deferred对象的then方法具有强大的功能。除了接受执行完成和执行失败的回调函数外，还可以接受一个表示pending状态时的回调函数。这种语法糖形式的调用让代码更加简洁明了。

举个例子，我们有一个异步操作，生成一个1到10之间的随机数。如果数字小于或等于5，我们解决（resolve）这个Deferred对象；如果数字太大，我们拒绝（reject）这个对象。然后，我们可以链式调用then方法，分别处理解决和拒绝的情况。

除了then方法，还有done和fail语法糖，它们分别用于指定执行完成和执行失败的回调函数。这与直接调用then方法并传入两个回调函数是等效的。

Deferred对象还有一个always方法，无论操作是成功还是失败，都会执行。这与ajax中的complete方法有些类似。

在jQuery中，还有一个重要的方法是$.when。这个方法可以实现Promise，与ES6中的all方法功能相同。它用于并行执行异步操作，只有在所有异步操作完成后，才会执行回调函数。

当我们JavaScript中的异步处理时，不得不提及jQuery中的Deferred对象。关于其中的$.when方法，它并非定义在$.Deferred中，而是一个独立存在的方法。从名字上就可以猜测，它可能是用来等待多个异步操作完成的方法。与ES6中的all方法有所不同，它接受的并不是数组，而是多个Deferred对象。让我们通过一个简单的例子来了解一下它的工作原理。

想象一下你在运行一段脚本，其中有三个异步操作需要执行。你可以使用$.when来同时启动这三个操作，并在它们都完成后执行一个回调函数。请看下面的代码：

```javascript

function runAsync() {

var def = $.Deferred();

// 执行一些异步操作

setTimeout(function() {

var num = Math.ceil(Math.random() 10); // 生成一个1到10之间的随机数

def.resolve(num); // deferred对象，表示异步操作已完成

}, 2000); // 设置延迟2秒执行异步操作

return def.promise(); // 返回promise对象，以便使用then方法处理结果

}

$.when(runAsync(), runAsync(), runAsync())

.then(function(data1, data2, data3) {

console.log('所有操作已完成'); // 输出提示信息

console.log(data1, data2, data3); // 输出每个异步操作的结果

});

```

现在让我们回到jquery的世界，是否有一个与ES6中的race方法相似的功能呢？那就是以最快完成的那个异步操作为准触发回调的方法。答案是，jquery并没有这样的方法。但jquery的Deferred对象确实为我们提供了强大的异步处理能力。我们可以使用链式调用连续发送多个请求。请看下面的例子：

```javascript

function req() {

return $.ajax(/ 请求配置 /); // 返回ajax请求返回的promise对象

}

req1().then(req2).then(req3).done(function() { console.log('请求发送完毕'); }); // 连续发送三个请求并在完成后输出提示信息

```在这里我们可以看到，每个ajax请求返回的都是一个promise对象，它们可以像Deferred对象一样进行链式调用。这样我们可以轻松地在多个请求之间传递数据并执行回调函数。现在让我们进一步了解其他常用方法。这三个方法是我们在使用ajax时经常遇到的语法糖：suess、error和complete。这些方法可以简化我们的代码并提供更好的可读性。当使用$.ajax发起请求时，我们可以使用这些方法来处理成功、失败和完成事件。这些方法的正确使用对于编写健壮的异步代码至关重要。希望这些解释能帮助你更好地理解jquery中的Deferred对象和ajax方法的工作原理。