我如何在jQuery.Ajax中处理时间响应(DataType:JSON）

How I Handle the time response in jQuery.Ajax (DataType: JSON)?

本文关键字：响应 DataType JSON 时间 处理 jQuery Ajax      更新时间：2023-09-26

我有四个函数。他们每个人都在工作。

$.ajax({
         url: sectoresURL,
         context: document.body,
         timeout: 10000 // 1000 MS = 10 Seconds
       }).done(function(jsonSectores) {
           // Blablabla...
       });

但当我必须在屏幕上显示每一个函数时，最后一个函数显示得比第一个函数先。。。（是的，这是正确的，因为它需要更少的时间）。

例如：

Get Http://... 200 ms
Get Http://... 150 ms
Get Http://... 100 ms
Get Http://... 50 ms

那么，如何处理呢？我想在屏幕上显示第一个函数，然后，第二个函数。。。，等等

考虑使用$.when()。

根据文档，当接受多个promise并返回类似promise的对象时。传递给.then()的成功回调将在所有承诺都已解析后使用传递给.when()的承诺的值进行调用。

为了完整性，我说$.when()返回一个类似promise的对象，因为成功处理程序为提供给$.when()的每个promise都取一个参数。真正的承诺只有一个价值。

无论如何，这里有一个例子：

$.when(
 $.ajax({
  url: url,
  context: document.body,
  timeout: 10000
 }),
 $.ajax({
  url: url,
  context: document.body,
  timeout: 10000
 })
).then(
 function (first, second) {
  console.log("The first result is: " + first[0]);
  console.log("The second result is: " + second[0]);
 },
 function(e) {
  console.log("Something happened: " + e);
 }
);

这种方法比链接更可取，因为AJAX请求将并行运行。

jQuery的延迟本质上是一种承诺。利用这个事实。

您希望所有的ajax方法都能尽早执行，以便给用户带来最小的延迟：

var p1, p2, p3, p4;
p1 = $.ajax(...);
p2 = $.ajax(...);
p3 = $.ajax(...);
p4 = $.ajax(...);

但是，您还需要它们的回调来等待，直到之前的ajax请求也完成。

您可以使用$.when:进行此操作

var p1Done, p2Done, p3Done, p4Done;
p1Done = p1.then(function (p1Resolution) {...});
p2Done = $.when(p1Done, p2).then(function (p1Resolution, p2Resolution) {...});
p3Done = $.when(p2Done, p3).then(function (p2Resolution, p3Resolution) {...});
p4Done = $.when(p3Done, p4).then(function (p3Resolution, p4Resolution) {...});

提醒：

如果您以这种方式构建代码，并且任何承诺都被拒绝，请确保适当地处理失败状态。只需要一点网络延迟，请求就会超时，整个承诺链就会失败。

根据您想要的序列创建依赖的ajax调用，如

$.ajax({
        url: sectoresURL, //First Call
        context: document.body,
        success: function(data){
            $.ajax({
                url: "example/",// Second call
                data: 'page='+a,
                success: function(data){
                      //Call your 3rd function if you want and so on
               });
});
相关文章：