1. ホーム
  2. jquery

[解決済み] jQuery ajax (jsonp)がタイムアウトを無視してエラーイベントを発生させない件

2023-04-05 15:30:43

質問

基本的なエラー処理を追加するために、Flickrから写真を取り込むためにjQueryの$.getJSONを使用するコードの一部を書き直したいと思っています。これを行う理由は、$.getJSONがエラー処理またはタイムアウトでの作業を提供しないことです。

$.getJSONは$.ajaxの単なるラッパーなので、私はそれを書き直すことにしました。そして、驚くべきことに、それは完璧に動作します。

しかし、楽しいことが始まります。私が意図的に404を引き起こすか(URLを変更することによって)、ネットワークがタイムアウトする(インターネットに接続されていないことによって)とき、エラーイベントはまったく、発生しません。何が間違っているのか、途方に暮れています。ヘルプは非常にありがたいです。

以下はそのコードです。

$(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);
        }
    });

});

この質問は、jQueryがバージョン1.4.2であったときにされたものであることを付け加えておきます。

どのように解決するのですか?

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('Oh noes!');
});

タイムアウトは、10秒後に成功したリクエストがない場合、エラーハンドラを呼び出すというトリックを実行するようです。

私は少し ブログ記事 を書きました。