jQuery で$.ajax エラーを処理する

今日の記事では、jQuery の AJAX での失敗リクエストの処理について説明します。

jQuery での $.ajax エラーの処理

jQuery の AJAXpost リクエストは、非同期 HTTP（AJAX）リクエストを実行します。

構文：

jQuery.ajax([settings]).fail((jqXHR, textStatus) => {});
jQuery.ajax(url[, settings]).fail((jqXHR, textStatus) => {});

ここで：

1. URL は、リクエストの送信先となる URL を含む文字列です。
2. settings は、AJAX 要求を構成するキー/値のペアオブジェクトです。すべての設定はオプションです。 $.ajaxSetup() を使用して、オプションごとにデフォルト値を設定できます。

.fail() アプローチは、廃止された .error() アプローチに取って代わります。これは、エラーコールバックオプションの代替構成です。

リクエストが失敗した場合、AJAX 構成内で error コールバックオプションが呼び出されます。jqXHR、エラータイプを示す文字列、および例外オブジェクト（存在する場合）を受け取ります。

一部の組み込みエラーは、abort、timeout、no transport などの文字列を例外オブジェクトとして返します。

$.ajax() は、ブラウザのネイティブ XMLHttpRequest オブジェクトのスーパーセットである jQuery XMLHttpRequest（jqXHR）オブジェクトを返します。

次の例でそれを理解しましょう。

注：次のコードはそのまま実行することはできず、出力されません。出力を表示するには、既存のコードに追加する必要があります。

HTML コード：

<form id="myForm">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" value="Smith" />
  <input type="submit" value="Send" />
</form>

JavaScript コード：

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'United State'},
     error: function(jqXHR, thrownError) {
       alert(jqXHR.status);
       alert(thrownError);
     }
   })
      .done(function(msg) {
        alert('Data Saved: ' + msg);
      })
      .fail((jqXHR, errorMsg) => {alert(jqXHR.responseText, errorMsg)});
})

上記の例では、ユーザーがフォームを送信すると、指定された URL とパラメーターを使用して AJAX 呼び出しがサーバーに送信されます。サーバーが成功したメッセージで戻ってきたら、コンソールにメッセージを印刷するか、適切なメッセージでユーザーに通知することができます。

サーバーがエラーメッセージを返した場合は、エラーハンドラーまたは .fail() を使用してエラーをキャッチし、適切なエラーメッセージをユーザーに通知できます。