JavaScript

最終更新日:
公開日:

レシピ

Ajax

Fetch APIで受け取ったレスポンスのHTTPステータスコードを取得する

Fetch APIによるAjax通信において、通信先から受け取ったレスポンスからHTTPステータスコードを参照することでリクエストの状態を確認する方法について解説します。

この記事のポイント

  • ResponseオブジェクトstatusプロパティにはHTTPステータスコード(number)が入る
  • ResponseオブジェクトstatusTextプロパティはHTTPステータスに応じたテキスト(string)が入る

Fetch APIで送信したリクエストの結果をHTTPステータスで確認する

Fetch APIで指定した通信先へのリクエストの結果については、レスポンスで受け取るResponseオブジェクトstatusプロパティstatusTextプロパティを参照することで確認することができます。

statusプロパティにはHTTPステータスコード(number)が入っており、もう1つのstatusTextプロパティはHTTPステータスに応じたテキストが入ります。

Note

Fetch APIの通信が成功したかどうかだけを判断したいときは、statusプロパティ以外にokプロパティを使って確認することも可能です。okプロパティを使ったコードについては別記事「Fetch APIを使ってAjaxを実装する」の「Ajaxの通信が成功したか確認する」をご覧ください。

例えば、以下の例で正常にリクエストが処理されたときは、statusプロパティには「200」、statusTextプロパティは「OK」が入ります。

JavaScript コード例

fetch('/ok.json')
.then(res =>  {

  console.log(res.status); // 200
  console.log(res.statusText); // OK

  return res.json();
})
.then(data2 => {
  console.log(data2);
});

もし通信先が見つからなかったときは、各プロパティの値は以下のようになります。

JavaScript コード例

fetch('/notfound.json')
.then(res =>  {

  console.log(res.status); // 404
  console.log(res.statusText); // Not Found

  return res.json();
})
.then(data2 => {
  console.log(data2);
});

HTTPステータスコードを確認することで、以下のコードのように通信が成功したときのみレスポンスデータを使った処理を実行するようにすることができます。

JavaScript コード例

fetch('/text/test.json')
.then(res =>  {

  // 通信が成功したか確認
  if( res.status === 200 ) {
    return res.json();
  }

})
.then(data => {
  console.log(data);
});

Fetch APIでは「test.json」を取得していますが、取得に成功したときのみres.jsonを実行してレスポンスデータからJSONファイルを抽出します。
変数dataには取得できた場合のみ取得したJSONデータが入り、取得できなかったときはundefinedが入ります。

取得できるHTTPステータスコードとメッセージは、HTTPにおけるレスポンスに準拠します。
ステータスコードの種類と状態の一覧は以下のページを参照してください。
HTTP レスポンスステータスコード – MDN

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。