【jQuery】Ajaxのエラーレスポンスをパースする方法

jQueryでajaxリクエストを投げ、エラーが返ってきたときに、レスポンスの中身をパースする方法を紹介します。

基本的な使い方

以下のように、xhr.responseTextでレスポンスの中身を取得できるので、そのテキストを引数にして$.parseJSONを呼ぶだけです。

$.ajax({
  ...
  error: function(xhr, textStatus, errorThrown) {
    var res = $.parseJSON(xhr.responseText);
  }
  ...

例えば、レスポンスが、

{"code":"E405-001","message":"許可されていないメソッドです。"}

だとしたら、res.codeで「E405-001」、res.messageで「許可されていないメソッドです。」を取得できます。

例外を考慮

レスポンスが空のときに$.parseJSON(xhr.responseText)を使うと例外が発生します。そうすると、parseJSON以降の処理が実行されなくなってしまいます。

それを防ぐには、以下のようにtry-catchで囲んであげます。

$.ajax({
  ...
  error: function(xhr, textStatus, errorThrown) {
    var res = {}
    try {
        res = $.parseJSON(xhr.responseText);
    } catch (e) {
    }
  }
  ...

これで、パースに失敗しても後続の処理が実行されるようになりました。

サンプル

以下に、レスポンスをパースするサンプルを掲載します。

「パース成功」をクリックするとパースが成功するケースを確認できます。「パース失敗」をクリックすると、パースが失敗するケースを確認できます。

サンプルコード

サンプルで使用したコードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
$(function() {
  $('button').click(function() {
    var url = '/psamples/' + $(this).attr('data-name') + '.php';
    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: url,
      error: function(xhr, textStatus, errorThrown) {
        var res = {}
        try {
            res = $.parseJSON(xhr.responseText);
        } catch (e) {
        }
        $('#code').text(res.code || 'パース失敗');
        $('#message').text(res.message || 'パース失敗');
      }
    });
  });
});
    </script>
  </head>
  <body>
    <dl>
      <dt>コード</dt>
      <dd id="code"></dd>
      <dt>メッセージ</dt>
      <dd id="message"></dd>
    </dl>
    <button type="button" data-name="error_405">パース成功</button>
    <button type="button" data-name="error_unexpected">パース失敗</button>
  </body>
</html>

サンプルで使用したURL

サンプルでは、以下の2種類のURLを叩いています。

$ curl https://remotestance.com/psamples/error_405.php
{"code":"E405-001","message":"u8a31u53efu3055u308cu3066u3044u306au3044u30e1u30bdu30c3u30c9u3067u3059u3002"}
$ curl https://remotestance.com/psamples/error_unexpected.php
※レスポンスなし

この記事が役に立った場合、シェアしていただけると励みになります!!