Fetch APIが使えるか確認する

JavaScriptを実行したブラウザでFetch APIが使えるか確認する

JavaScriptはクライアントサイド（ブラウザ）で使うことが多いですが、ユーザーのブラウザが必ずしも最新版であるとは限りません。
そのため、Fetch APIのような比較的新しい機能はブラウザが対応しているかどうか確認することがあります。

JavaScriptを実行した環境（ブラウザ）でFetch APIが使えるかどうかは、windowオブジェクトにfetchプロパティが宣言されているかで判断することができます。
そのため、以下のようなif文で判定することが可能です。

JS コード例

if( window.fetch ) {
	console.log("OK, available.");
	// ここにFetch APIの処理を書く

} else {
	console.log("Sorry, unavailable.");
	// Fetch APIが使えない場合の処理を書く

}

Fetch APIが使える環境ではif文の上側が実行されるため、ここにFetch APIを使ったAjaxの処理などを書きます。

もしIE11のようなFetch APIが使えない環境の場合はfetchプロパティは宣言されていないため「undefined」になります。
そのときは上記の場合else文が実行されるため、ここにFetch APIが使えないときのコードを書きます。
代替え案として、jQueryのajaxメソッドやXMLHttpRequestを使うことでAjaxを実装することも可能です。

なお、XMLHttpRequestオブジェクトを使ったAjaxの実装については別記事「XMLHttpRequestオブジェクトを使ってAjaxを実装する」をご覧ください。

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

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