为ajax设置超时（jQuery）答案

【问题标题】：Set timeout for ajax (jQuery)为ajax设置超时（jQuery）
【发布时间】：2011-07-10 16:22:33
【问题描述】：

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

有时success 函数运行良好，有时不行。

如何设置这个 ajax 请求的超时时间？例如，3 秒，如果超时，则显示错误。

问题是，ajax 请求会冻结块直到完成。如果服务器宕机一段时间，它永远不会结束。

【问题讨论】：

您需要在} 之后添加一个,。
看看这个>stackoverflow.com/questions/12930759/…
jQuery $.ajax timeout setting的可能重复

标签： javascript jquery html css ajax

【解决方案1】：

这里有一些示例演示了在 jQuery 的新旧范例中设置和检测超时。

Live Demo

承诺与 jQuery 1.8+

Promise.resolve(
  $.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == 'timeout')
  {     
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8+

$.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {     
        alert('Failed from timeout'); 
        //do something. Try again perhaps?
    }
});

jQuery

$.ajax({
    url: '/getData',
    error: function(jqXHR, textStatus){
        if(textStatus === 'timeout')
        {     
             alert('Failed from timeout');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

请注意，textStatus 参数（或 jqXHR.statusText）会让您知道错误所在。如果您想知道失败是由超时引起的，这可能很有用。

错误（jqXHR，textStatus，errorThrown）

一个函数被调用，如果请求失败。该函数接收三个参数： jqXHR（在 jQuery 1.4.x, XMLHttpRequest) 对象，一个描述类型的字符串发生的错误和可选的异常对象（如果发生）。第二个参数的可能值（除了 null）是“超时”， “错误”、“中止”和“解析器错误”。发生 HTTP 错误时， errorThrown 接收 HTTP 状态的文本部分，例如 “未找到”或“内部服务器错误”。从 jQuery 1.5 开始，错误 setting 可以接受一个函数数组。每个函数都会被调用反过来。注意：跨域脚本不调用此处理程序，并且 JSONP 请求。

src：http://api.jquery.com/jQuery.ajax/

【讨论】：

$.ajax().fail()和$.ajax().error()有什么区别？
@GarciaWebDev - 见Call to jquery ajax - .fail vs. :error
+1 用于包含 jQuery 1.8+。大多数其他类似问题的答案仅包括来自 <.> 的成功/错误
我试图复制 JQuery 1.8+ 的解决方案，但它的末尾有一个不可见字符，它在浏览器上编译时出现语法错误。

【解决方案2】：

您可以在 ajax 选项中使用 timeout 设置，如下所示：

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

在此处阅读有关 ajax 选项的所有信息：http://api.jquery.com/jQuery.ajax/

请记住，当发生超时时，会触发 error 处理程序而不是 success 处理程序 :)

【讨论】：

【解决方案3】：

请阅读$.ajax documentation，这是一个涵盖的主题。

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

您可以通过访问error: function(jqXHR, textStatus, errorThrown) 选项的textStatus 参数来查看引发的错误类型。选项有“timeout”、“error”、“abort”和“parsererror”。

【讨论】：

关于捕获超时错误stackoverflow.com/questions/3543683/…
只是似乎对我不起作用，超时：1，确认它正在通过，只是永远不会超时
确保使用 try/catch 包装整个 $.ajax 调用。中止不会被 jQuery 捕获，并且会在 $.ajax 调用之外被抛出。

【解决方案4】：

使用功能齐全的.ajax jQuery 函数。以https://stackoverflow.com/a/3543713/1689451 为例进行比较。

无需测试，只需将您的代码与引用的 SO 问题合并：

target = $(this).attr('data-target');

$.ajax({
    url: $(this).attr('href'),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});

【讨论】：

H-Bahrami 和 Rudolf Mühlbauer 感谢您的回复，但我是 ajax 新手，所以请通过我的代码澄清...因为我已经看到了这些答案，但我不知道发生了什么......所以请帮助我...
我怎么能通过 .load() ？有没有可能？
@S.S，尝试在加载文档中查找超时：api.jquery.com/load——我的代码中有错字，已更正。

【解决方案5】：

如果您的请求通过 NginX，请不要忘记检查 NginX 设置。

Ajax options.timeout 是一回事，但 nginx 请求超时可能也需要调整。

见https://ubiq.co/tech-blog/increase-request-timeout-nginx/

【讨论】：

【解决方案6】：

您的请求应如下所示。

client.ajax({
               url:'web-url',
               method: 'GET',
               headers: 'header',
               timeout: 3000
          });

【讨论】：