jquery异步

jQuery 异步操作概述

jQuery 提供了多种方法用于处理异步操作，主要包括 AJAX 相关函数和 Deferred/Promise 对象。这些方法简化了异步编程，尤其是在处理 HTTP 请求和异步任务时。

AJAX 相关方法

jQuery 的 AJAX 方法允许通过 HTTP 请求与服务器进行异步通信。以下是常用的 AJAX 方法：

$.ajax() 最基础的 AJAX 方法，提供高度可定制的选项。

$.ajax({
  url: 'api/data',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error(error);
  }
});

$.get() 简化版的 GET 请求。

$.get('api/data', function(data) {
  console.log(data);
});

$.post() 简化版的 POST 请求。

$.post('api/save', { name: 'John' }, function(data) {
  console.log(data);
});

Deferred 和 Promise

jQuery 的 Deferred 对象用于管理异步操作的状态，Promise 则是 Deferred 的只读版本。

基本用法

function asyncTask() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task completed');
  }, 1000);
  return dfd.promise();
}

asyncTask().done(function(result) {
  console.log(result);
});

链式调用

$.when($.get('api/data1'), $.get('api/data2'))
  .then(function(res1, res2) {
    console.log(res1, res2);
  });

异步队列处理

jQuery 允许通过队列管理多个异步任务。

顺序执行

var promise = $.Deferred().resolve();
promise
  .then(function() {
    return $.get('api/step1');
  })
  .then(function(data1) {
    return $.get('api/step2');
  })
  .done(function(data2) {
    console.log(data2);
  });

错误处理

jQuery 提供了多种错误处理方式。

AJAX 错误处理

$.ajax({
  url: 'api/data',
  method: 'GET',
  dataType: 'json'
}).done(function(data) {
  console.log(data);
}).fail(function(xhr, status, error) {
  console.error(error);
});

Promise 错误处理

asyncTask()
  .done(function(result) {
    console.log(result);
  })
  .fail(function(error) {
    console.error(error);
  });

全局 AJAX 事件

jQuery 允许绑定全局 AJAX 事件处理器。

示例

$(document).ajaxStart(function() {
  console.log('Request started');
}).ajaxComplete(function() {
  console.log('Request completed');
});

注意事项

• 在 jQuery 3.0+ 中，Deferred 对象兼容 Promise/A+ 标准
• AJAX 方法返回的是 jqXHR 对象，实现了 Promise 接口
• 使用 $.when() 可以等待多个异步操作完成
• 避免在回调函数中直接修改 DOM，应考虑使用 .then() 链式调用

这些方法为处理异步操作提供了灵活且强大的工具集，适用于各种前端开发场景。