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