jQuery Deferred和Promise创建响应式应用程序详细介绍

什么是jQuery Deferred和Promise

jQuery Deferred提供了一种方便的方法来跟踪异步函数的状态，Deferred有三种状态：pending、resolved、rejected。Promise则是Deferred的一个快照，只有查看的权限，不能把Promise转换为其他状态。

如何使用jQuery Deferred和Promise

创建Deferred对象

可以通过$.Deferred()方法来创建Deferred对象。Deferred通常有以下几种用法：

等待异步过程完成

function fetchData() {
    var defer = $.Deferred();
    $.ajax({
        url: 'http://example.com/data',
        success: function(data) {
            defer.resolve(data);
        },
        error: function(error) {
            defer.reject(error);
        }
    });
    return defer.promise();
}

var promise = fetchData();
promise.then(function(data) {
    console.log(data);
}, function(error) {
    console.error('Something went wrong:', error);
});

这个例子中，我们创建了一个名为fetchData的函数，它使用了jQuery的AJAX能力来获取数据。我们通过$.Deferred()创建了一个Deffered对象，该对象有以下状态：

• 如果AJAX调用成功，我们会调用defer.resolve(data)将Deffered的状态改为resolved。
• 如果AJAX调用失败，我们会调用defer.reject(error)将Deffered的状态改为rejected。

在函数最后，我们返回了Deffered对象的Promise快照，并在全局作用域中保存它。promise.then()方法被调用，如果调用成功，就会执行回调函数function(data) {...}并传递参数data，如果调用失败，就会执行回调函数function(error) {...}并传递参数error。这个例子展示了如何等待异步过程完成。

等待多个异步操作都完成

function fetchAll() {
    var dataA = $.Deferred();
    var dataB = $.Deferred();
    var dataC = $.Deferred();
    setTimeout(function() {
        dataA.resolve('Data A');
    }, 2000);
    setTimeout(function() {
        dataB.resolve('Data B');
    }, 3000);
    setTimeout(function() {
        dataC.resolve('Data C');
    }, 1000);
    return $.when(dataA, dataB, dataC);
}

fetchAll().then(function(dataA, dataB, dataC) {
    console.log('Data from A:', dataA);
    console.log('Data from B:', dataB);
    console.log('Data from C:', dataC);
});

这个例子中，我们使用了$.when()方法来等待多个异步操作都完成。我们首先创建了三个Deferred对象，并在三个不同的时间点上分别将它们的状态改为resolved。在创建完这三个Deferred对象后，我们使用了$.when()方法来等待这三个异步操作都完成，然后在它们都完成后执行回调函数。回调函数会接收三个参数，分别对应三个不同的异步操作的结果。

Deferred队列

可以使用$.Deferred.queue()方法来创建Deferred队列。队列会确保任务分组，并且可以被连续调用。此外，它也可以让你处理异步任务错误时发生的回调函数。

function fetchDataOne() {
    var defer = $.Deferred();
    setTimeout(function() {
        defer.resolve('Data from One');
    }, 1000);
    return defer.promise();
}
function fetchDataTwo() {
    var defer = $.Deferred();
    setTimeout(function() {
        defer.reject('Error from Two');
    }, 2000);
    return defer.promise();
}
function fetchDataThree() {
    var defer = $.Deferred();
    setTimeout(function() {
        defer.resolve('Data from Three');
    }, 500);
    return defer.promise();
}

function executeQueue() {
    var queue = $.Deferred.queue();

    queue
        .defer(fetchDataOne)
        .done(function(data) {
            console.log(data);
        })
        .fail(function(error) {
            console.error('Something went wrong:', error);
        });

    queue
        .defer(fetchDataTwo)
        .done(function(data) {
            console.log(data);
        })
        .fail(function(error) {
            console.error('Something went wrong:', error);
        });

    queue
        .defer(fetchDataThree)
        .done(function(data) {
            console.log(data);
        })
        .fail(function(error) {
            console.error('Something went wrong:', error);
        });

    queue
        .defer(function() {
            console.log('All done!');
        });

    queue.start();
}

executeQueue();

这个例子中，我们创建了三个异步的函数，并将它们作为参数传递给$.Deferred.queue()方法。我们使用了queue.defers()方法来添加异步任务，并分别为每个异步任务绑定了done()和fail()回调函数。在这个例子中，我们使用了console.error()来打印错误消息，但你可以根据实际情况做出自己的响应。

我们使用queue队列对象的queue.start()方法来启动队列任务。在所有任务完成后，我们添加了一个defer()方法，用于执行console.log('All done!')语句。

总结

jQuery Deferred和Promise可以让你更好地处理异步任务，并确保在等待任务结束时代码能够高效地运行。可能有些学习曲线，但是一旦熟悉了这些概念和方法，就可以轻松地使用它们来创建响应式应用程序。