博客

JQuery deferred.then()方法

  • Post category:jquery

JQuery deferred.then()方法

JQuery的deferred.then()方法用于在异步操作执行过程中，注册成功和失败事件的回调函数，并返回一个新的deferred对象，用于链式调用。本文将详细介绍deferred.then()方法的语法和用法，并提供两个示例说明。

语法

以下是deferred.then()方法的基本语法：

deferred.then(doneFilter [, failFilter [, progressFilter]]);

在这个语法中，deferred是一个deferred对象，doneFilter是一个可选的成功事件的回调函数，failFilter是一个可选的失败事件的回调函数，progressFilter是一个可选的进度事件的回调函数。

示例1：链式调用

以下是一个示例，演示如何使用deferred.then()方法进行链式调用：

var deferred = $.Deferred();

deferred
  .then(function(data) {
    console.log("第一个回调函数，数据为：" + data);
    return "第一个回调函数返回的数据";
  })
  .then(function(data) {
    console.log("第二个回调函数，数据为：" + data);
    return "第二个回调函数返回的数据";
  })
  .then(function(data) {
    console.log("第三个回调函数，数据为：" + data);
  });

deferred.resolve("异步操作成功了");

这个示例中，我们创建了一个deferred对象，并使用then()方法注册了三个回调函数。当deferred对象被标记为成功状态时，它将依次调用这三个回调函数，并在控制台输出相应的。

示例2：处理异步操作的成功和失败事件

以下是另一个示例，演示如何使用deferred.then()方法处理异步操作的成功和失败事件：

var deferred = $.Deferred();

deferred
  .then(function(data) {
    console.log("异步操作成功，数据为：" + data);
  }, function(error) {
    console.log("异步操作失败，错误信息为：" + error);
  });

$.ajax({
  url: "https://example.com/api/data",
  success: function(data) {
    deferred.resolve(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    deferred.reject(textStatus);
  }
});

在这个示例中，我们使用$.ajax()方法发起一个异步请求，并使用deferred.then()方法注册了成功和失败事件的回调函数。当异步请求成功时，它将触发成功事件的回调函数，并在控制台输出一条消息。当异步请求失败时，它将触发失败事件的回调函数，并在控制台输出一条错误信息。

综上所述，deferred.then()方法用于在异步操作执行过程中，注册成功和失败事件的回调函数，并返回一个新的deferred对象，用于链式调用。本文详细介绍了deferred.then()方法的语法和用法，并提供了两个示例说明。

Tags: