使用JSONP时,如何捕获jQuery $ .getJSON(或数据类型设置为'jsonp'的$ .ajax)错误？

Question

在jQuery中使用JSONP时是否可以捕获错误？我已经尝试了$ .getJSON和$ .ajax方法,但都没有捕获我正在测试的404错误.这是我尝试过的(请记住,这些都可以成功运行,但我想在失败时处理这种情况):

jQuery.ajax({
    type: "GET",
    url: handlerURL,
    dataType: "jsonp",
    success: function(results){
        alert("Success!");
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
        alert("Error");
    }
});

并且:

jQuery.getJSON(handlerURL + "&callback=?", 
    function(jsonResult){
        alert("Success!");
    });

我也尝试添加$ .ajaxError,但这也不起作用:

jQuery(document).ajaxError(function(event, request, settings){
   alert("Error");
});

在此先感谢您的回复!

Answer 1

以下是我对类似问题的广泛回答.

这是代码:

jQuery.getJSON(handlerURL + "&callback=?", 
    function(jsonResult){
        alert("Success!");
    })
.done(function() { alert('getJSON request succeeded!'); })
.fail(function(jqXHR, textStatus, errorThrown) { alert('getJSON request failed! ' + textStatus); })
.always(function() { alert('getJSON request ended!'); });

Answer 2

似乎JSONP请求不返回成功的结果从不触发任何事件,成功或失败,并且显然是设计上的好坏.

在搜索他们的bug跟踪器之后,有一个补丁可能是使用超时回调的可能解决方案.查看错误报告#3442.如果您无法捕获错误,则可以在等待合理的成功时间后至少超时.

Answer 3

检测JSONP问题

如果您不想下载依赖项,则可以自己检测错误状态.这很简单.

您只能通过使用某种超时来检测JSONP错误.如果在某个时间内没有有效响应,则假定出错.但错误基本上可以是任何错误.

这是一个检查错误的简单方法.只需使用一个success标志:

var success = false;

$.getJSON(url, function(json) {
    success = true;
    // ... whatever else your callback needs to do ...
});

// Set a 5-second (or however long you want) timeout to check for errors
setTimeout(function() {
    if (!success)
    {
        // Handle error accordingly
        alert("Houston, we have a problem.");
    }
}, 5000);

作为评论中提到的dawnrider,您也可以使用clearTimeout:

var errorTimeout = setTimeout(function() {
    if (!success)
    {
        // Handle error accordingly
        alert("Houston, we have a problem.");
    }
}, 5000);

$.getJSON(url, function(json) {
    clearTimeout(errorTimeout);
    // ... whatever else your callback needs to do ...
});

为什么？继续阅读......

以下是JSONP的工作原理:

JSONP不像常规AJAX请求那样使用XMLHttpRequest.相反,它会<script>在页面中注入一个标记,其中"src"属性是请求的URL.响应的内容包含在Javascript函数中,然后在下载时执行.

例如.

JSONP请求: https://api.site.com/endpoint?this=that&callback=myFunc

Javascript会将此脚本标记注入DOM:

<script src="https://api.site.com/endpoint?this=that&callback=myFunc"></script>

将<script>标记添加到DOM 时会发生什么？显然,它会被执行.

因此,假设对此查询的响应产生了一个JSON结果,如:

{"answer":42}

对于浏览器来说,这与脚本的源代码相同,因此它会被执行.但是当你执行这个时会发生什么:

<script>{"answer":42}</script>

好吧,没什么.这只是一个对象.它不会被存储,保存,也没有任何反应.

这就是JSONP请求将其结果包装在函数中的原因.必须支持JSONP序列化的服务器会看到callback您指定的参数,并返回此参数:

myFunc({"answer":42})

然后执行此操作:

<script>myFunc({"answer":42})</script>

......这更有用.在这种情况下,代码中的某个地方称为全局函数myFunc:

myFunc(data)
{
    alert("The answer to life, the universe, and everything is: " + data.answer);
}

而已.这就是JSONP的"神奇".然后构建一个超时检查非常简单,如上所示.发出请求后立即开始超时.在X秒后,如果您的标志仍未设置,则请求超时.

Answer 4

我知道这个问题有点老了,但我没有看到答案给出一个简单的问题解决方案所以我想我会分享我的'简单'解决方案.

$.getJSON("example.json", function() {
      console.log( "success" );
}).fail(function() { 
      console.log( "error" ); 
}); 

我们可以简单地使用.fail()回调来检查是否发生了错误.

希望这可以帮助 :)