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

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

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

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

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

JS コード例

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

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

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

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

JS コード例

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

JS コード例

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

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

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