jQuery中借助deferred来请求及判断AJAX加载的实例讲解

在使用jQuery进行AJAX请求的时候，我们经常需要确定一个请求是否完成，并且能够在请求完成后执行某些操作，比如修改DOM、更新数据等。 基于这个需求，jQuery提供了一个非常有用的工具Deferred对象，它可以使用类似Promise的链式语法来管理AJAX请求的回调函数并决定它们的执行顺序。

什么是deferred

Deferred对象是jQuery中非常重要的一个类，它对异步代码量进行了封装，实现了异步代码的顺序执行。简单理解deferred就是一个回调函数的集合管理器，主要是解决回调地狱问题。

如何使用deferred

在jQuery的AJAX请求中，$.ajax()方法返回的就是一个Deferred对象，我们可以在请求完成时使用这个对象来执行一些额外的代码。

比如，下面的代码演示了如何使用Deferred对象在AJAX请求完成时更新DOM元素。

var deferred = $.ajax({
   url: "example.php",
   type: "GET"
});

deferred.done(function( data ) {
    $('#result').html(data);
});

deferred.fail(function() {
    $('#result').html("请求失败，请稍后再试！");
});

在这个例子中，我们首先使用$.ajax()方法创建了一个Deferred对象，并通过done()和fail()方法分别指定了请求成功和请求失败时的回调函数。在请求完成时，我们就可以根据请求结果来更新DOM元素了。

除此之外，Deferred对象还有其他几个方法：always()、then()和promise()，下面我们详细介绍它们的用法。

Deferred相关的方法

always()方法

always()方法用来指定在Deferred对象不论是成功还是失败时都要执行的回调函数。它类似于 JavaScript 中的finally语句。

$.ajax({
    url: 'example.php',
    success: function() {
        console.log('请求成功!');
    },
    error: function() {
        console.log('请求失败!');
    }
}).always(function() {
    console.log('请求完成!');
});

在这个例子中，我们使用always()方法指定了在$.ajax()方法返回的Deferred对象完成时一定要执行的回调函数。

then()方法

then()方法可以接受两个参数：一个成功回调函数和一个失败回调函数。它与done()方法和fail()方法的区别在于，它能够根据成功或失败的返回结果来决定下一步该执行哪个回调函数，从而实现链式调用。

$.ajax({
    url: 'example.php'
}).then(function(data) {
    console.log('请求成功!');
    // 处理data数据，并返回一个新的Deferred对象
    return $.ajax('http://xxx.com');
}).then(function(data) {
    console.log('第二次请求成功!');
}).fail(function() {
    console.log('请求失败!');
});

在这个例子中，第一个.then()方法返回了另一个Deferred对象，第二个.then()方法就会等待这个Deferred对象完成后再执行。如果前面的请求失败了，就会跳过第二个.then()方法，直接执行.fail()方法。

promise()方法

promise()方法用于判断Deferred对象是否完成，它返回一个新的Promise对象，这个对象将只提供Promise原型上的方法，即then()、catch()和finally()三个方法，而不包含Deferred原型上的方法。

var dfd = $.Deferred();
var promise = dfd.promise();

promise.then(function() {
    console.log('Promise已完成!');
});

dfd.resolve();

在这个例子中，我们使用Deferred对象的promises()方法获取一个新的Promise对象，然后使用这个对象的.then()方法监听Deferred对象的完成事件。

示例

接下来，我们来看一个完整的例子来演示如何使用deferred。

1. 发送一个GET请求获取API接口数据；

function getData() {
  var deferred = $.ajax({
    url: 'http://xxx.com/api',
    type: 'GET',
  });

  return deferred;
}

1. 在成功响应中打印数据，并在失败响应中提示用户；

getData().done(function(response) {
  console.log(response.data);
}).fail(function(error) {
  console.log('请求失败，请稍后再试！');
});

在这个例子中，我们使用$.ajax()方法创建了一个Deferred对象，并通过.done()和.fail()方法分别指定了请求成功和请求失败时的回调函数，从而实现了错误处理和数据显示。

1. 当请求完成时，禁用按钮

$('button').click(function() {
    // 禁用按钮
    $(this).prop('disabled', true);

    // 发送Ajax请求
    $.ajax({
        url: 'example.php',
        success: function() {
            alert('请求完成!');
        },
        error: function() {
            alert('请求失败!');
        }
    }).always(function() {
        // 启用按钮
        $('button').prop('disabled', false);
    });
});

在这个例子中，我们使用fe_always()方法指定了在$.ajax()方法返回的Deferred对象完成时一定要执行更新按钮状态的回调函数。

综上所述，通过使用Deferred对象，我们可以很好地管理AJAX请求以及处理请求完成时的回调函数，从而大大简化了异步代码的编写和维护工作。