小粋空間  -  a cheap joke and a play on words site

jQueryのgetJSON()でエラーをハンドリングする

jQuery.getJSON()でエラーをハンドリングする方法を紹介します。

１．はじめに

JSONの取得でエラーをハンドリングにはjQuery.ajax()を利用するか、googleで公開されているjquery-jsonpプラグインを利用するといった先入観がありましたが、公式サイトのドキュメントを読むと1.5からサポートされているようで、まったく気がついてませんでした。

jQuery.getJSON()

As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.getJSON() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). For convenience and consistency with the callback names used by $.ajax(), it provides .error(), .success(), and .complete() methods. These methods take a function argument that is called when the request terminates, and the function receives the same arguments as the correspondingly-named $.ajax() callback.

jQuery関連の書籍を購入すればこういう情報は既知の内容かもしれませんが、ネットでは日本語リファレンス系サイトのコンテンツが古かったりなど、今回紹介するような情報がうまくみつけられません。

２．エラーをハンドリングする

ということで、getJSON()でエラーをハンドリングするサンプルを掲載しておきます。ハンドリングのお作法はjQuery.ajax()と同じです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$.getJSON("example.json", function() {
    console.log("実行");
})
.success(function(json) {
    console.log("成功");
})
.error(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー：" + textStatus);
    console.log("テキスト：" + jqXHR.responseText);
})
.complete(function() {
    console.log("完了");
});
</script>

サンプルコードでお分かりのとおり、エラーだけでなく、成功時・完了時もjQuery.ajax()と同様、ハンドリングすることが可能です。

成功時のFirefoxコンソールログ

失敗時のFirefoxコンソールログ（jqXHR.responseTextは省略）

1.6以降であれば、done()、fail()、always()が適用可能です。

$.getJSON("example.json", function() {
    console.log("実行");
})
.done(function(json) {
    console.log("成功");
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー：" + textStatus);
    console.log("テキスト：" + jqXHR.responseText);
})
.always(function() {
    console.log("完了");
});

getJSON()の第2パラメータのコールバックは、上のスクリーンショットでお分かりのとおり、エラー時には実行されません。不要であれば以下でもよいかと思います。

$.getJSON("example.json")
.done(function(json) {
    //... 
})
.fail(function(jqXHR, textStatus, errorThrown) {
    //...
})
.always(function() {
    //...
});

３．getJSON()の結果をjqXHRに保存する

getJSON()の結果を変数jqXHRに保存して、ハンドラメソッドを独立して定義することも可能です。

var jqXHR = $.getJSON("example.json", function() {
    console.log("実行");
});
jqXHR.done(function(json) {
    console.log("成功");
});
jqXHR.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("エラー：" + textStatus);
    console.log("テキスト：" + jqXHR.responseText);
});
jqXHR.always(function() {
    console.log("完了");
});

１項と同様、getJSON()の第2パラメータのコールバックはエラー時に実行されません。不要であれば以下でもよいかと思います。

var jqXHR = $.getJSON("example.json");
…後略…

４．参考サイト

参考サイトは以下です。ありがとうございました。

Error handling in getJSON calls