jQuery ajax（jsonp）忽略超时，不会触发错误事件 [英] jQuery ajax (jsonp) ignores a timeout and doesn't fire the error event

问题描述

要添加一些基本的错误处理，我想重写一段代码，使用jQuery的$ .getJSON从Flickr中拉出一些照片。这样做的原因是$ .getJSON不提供错误处理或超时工作。

由于$ .getJSON只是围绕$ .ajax的包装器，我决定重写事情和惊喜惊喜，它的作品是完美无缺的。

当我故意造成404（通过更改URL）或导致网络超时（通过不被连接到interwebs），错误事件根本不会触发。我失败了，我做错了什么。帮助非常感激。

这里是代码：

  $文件）.ready（function（）{
 
 // var jsonFeed =http://api.flickr.com/services/feeds/photos_public.gne; //正确的URL 
 var jsonFeed =http://api.flickr.com/services/feeds/photos_public.gne_______; //这应该抛出一个404 
 
 $ .ajax（{
 url：jsonFeed ，
 data：{lang：en-us，
format：json，
tags：sunset
}，
 dataType：jsonp，
 jsonp：jsoncallback，
 timeout：5000，
 success：function（data，status）{
 $ .each（data.items， function（i，item）{
 $（< img>）。attr（src，（item.media.m）.replace（_ m。，_ s。））
 .attr（alt，item.title）
 .appendTo（ul＃flickr）
 .wrap（< li>< a href = \链接+\>< / a>< / li>）; 
 if（i == 9）return false; 
}）; 
}，
 error：function（XHR，textStatus，errorThrown）{
 alert（ERREUR：+ textStatus）; 
 alert（ERREUR：+ errorThrown）; 
} 
}）; 
 
}）; 
  

我想补充一点，当jQuery在版本1.4.2时， p>

解决方案

jQuery 1.5及更高版本更好地支持JSONP请求的错误处理。但是，您需要使用 $。ajax 方法而不是 $。getJSON 。对我来说，这样做是有用的：

  var req = $ .ajax（{
 url：url，
 dataType：jsonp，
 timeout：10000 
}）; 
 
 req.success（function（）{
 console.log（'Yes！Success！'）; 
}）; 
 
 req.error（function（）{
 console.log（'哦，noes！'）; 
}）; 
  

超时似乎是这样的技巧，并调用错误处理程序，当没有成功的请求后10秒。

我做了一点点 blogpost 。

To add some basic error handling, I wanted to rewrite a piece of code that used jQuery's $.getJSON to pull in some photo's from Flickr. The reason for doing this is that $.getJSON doesn't provide error handling or work with timeouts.

Since $.getJSON is just a wrapper around $.ajax I decided to rewrite the thing and surprise surprise, it works flawlessly.

Now the fun starts though. When I deliberately cause a 404 (by changing the URL) or cause the network to timeout (by not being hooked up to the interwebs), the error event doesn't fire, at all. I'm at a loss as to what I'm doing wrong. Help is much appreciated.

Here's the code:

$(document).ready(function(){

    // var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL
    var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404

    $.ajax({
        url: jsonFeed,
        data: { "lang" : "en-us",
                "format" : "json",
                "tags" : "sunset"
        },
        dataType: "jsonp",
        jsonp: "jsoncallback",
        timeout: 5000,
        success: function(data, status){
            $.each(data.items, function(i,item){
                $("<img>").attr("src", (item.media.m).replace("_m.","_s."))
                          .attr("alt", item.title)
                          .appendTo("ul#flickr")
                          .wrap("<li><a href=\"" + item.link + "\"></a></li>");
                if (i == 9) return false;
            });
        },
        error: function(XHR, textStatus, errorThrown){
            alert("ERREUR: " + textStatus);
            alert("ERREUR: " + errorThrown);
        }
    });

});

I'd like to add that this question was asked when jQuery was at version 1.4.2

解决方案

jQuery 1.5 and higher have better support for error handling with JSONP requests. However, you need to use the $.ajax method instead of $.getJSON. For me, this works:

var req = $.ajax({
    url : url,
    dataType : "jsonp",
    timeout : 10000
});

req.success(function() {
    console.log('Yes! Success!');
});

req.error(function() {
    console.log('Oh noes!');
});

The timeout seems to do the trick and call the error handler, when there is no successful request after 10 seconds.

I did a little blogpost on this subject as well.

这篇关于jQuery ajax（jsonp）忽略超时，不会触发错误事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！