关键词

Jquery 一次处理多个ajax请求的代码

如果需要同时处理多个ajax请求,Jquery提供了一些方便的解决方案。

方案一:使用Jquery的when()方法

当需要同时处理多个ajax请求时,可以使用Jquery的when()方法。该方法接受多个deferred对象,使所有的deferred对象完成时返回一个回调函数。

示例代码:

var jqXHR1 = $.ajax('/api/url1');
var jqXHR2 = $.ajax('/api/url2');
var jqXHR3 = $.ajax('/api/url3');

$.when(jqXHR1, jqXHR2, jqXHR3).done(function(data1, data2, data3) {
  console.log("All requests are done");
  console.log(data1);
  console.log(data2);
  console.log(data3);
})
.fail(function() {
  console.log("One or more requests failed");
});

注释:以上代码中,$.when()方法接受三个deferred对象,当三个对象都完成时,它们的返回值将会被传递到.done()回调中。如果三个请求中有任何一个失败,则会调用.fail()回调。

方案二:使用Jquery的$.ajax()和Promise.all()方法

当需要在多个ajax请求完成后处理数据时,可以使用$.ajax()和Promise.all()方法。

示例代码:

var promise1 = $.ajax('/api/url1');
var promise2 = $.ajax('/api/url2');
var promise3 = $.ajax('/api/url3');

Promise.all([promise1, promise2, promise3]).then(function(responses) {
  console.log('All requests are done');
  console.log(responses);
}).catch(function() {
  console.log('One or more requests failed');
});

注释:以上代码中,$.ajax()方法将产生一个Promise对象,它将在成功时解析结果,或在失败时被拒绝。Promise.all()方法接受一个Promise对象数组,并在所有Promise对象都成功解析后返回结果。

总结:

两种方案都能够同时处理多个ajax请求,并在所有请求完成后执行回调函数。当仅需要监控所有请求是否都已完成时,可以使用方案一;当需要在完成所有请求后对数据进行处理时,可以使用方案二。

本文链接:http://task.lmcjl.com/news/1028.html

展开阅读全文