Question

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

有时success功能效果很好，有时则不行。

如何为此ajax请求设置超时？例如，3秒，如果时间结束，则显示错误。

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

Answer 1

请阅读$.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参数来查看引发的错误类型。选项包括“超时”，“错误”，“中止”和“parsererror”。

Answer 2

以下是一些示例，演示了如何在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＆lt; = 1.7.2

$.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（in   jQuery 1.4.x，XMLHttpRequest）对象，描述类型的字符串   发生的错误和可选的异常对象（如果发生）。   第二个参数的可能值（除了null）是“超时”，   “错误”，“中止”和“parsererror”。发生HTTP错误时   errorThrown接收HTTP状态的文本部分，例如   “未找到”或“内部服务器错误”。截至jQuery 1.5，错误   设置可以接受一系列功能。每个函数都会被调用   反过来。注意：不会为跨域脚本调用此处理程序   JSONP请求。

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

Answer 3

您可以使用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处理程序：）

Answer 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);
        }
    }
});

Answer 5

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

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

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

设置ajax（jQuery）的超时

5 个答案: