【JavaScript】Fetch APIの使い方とか注意点とか、、、

最近知ったけど、最新のJSだと Fetch API っていうのが使えるみたいです。

使ってみたら、確かに便利ですね。Ajax 的な感覚で使いやすい

ただいくつか注意しなきゃいけないこともありました。

そこで自分の記憶の整理も兼ね、
Fetch API の使い方・コード例とか少し気を付けた方がいいこと をまとめます

今まででも XMLHttpRequest が使えていたが・・・

従来のJSにもHTTP非同期通信ができるAPIはあります。

それが最近聞かなくなった XMLHttpRequest というやつ

 

これを使えば、旧JSでも非同期通信ができました(というかこれしかなかった)

▼ 簡単なHTTP非同期通信のコード例

ただ次のような問題点アリ

  • なんかコードが冗長になる
  • POST送信とかも超やりにくい
  • 通信が完了したかの判別も複雑
  • もっとサクッと通信したい

こういう風に不便だったので、 次に紹介する Fetch API が実装されました。

Fetch APIとは?基本的な使い方&コード例

自分は今まで Ajax ばっかり使ってたんで、これがあると知らなかったです。

この Fetch API の便利なとこは THE シンプル なこと

もちろん Ajax の方がシンプルなんですが、
どうしても純粋なJSしか使えない場面で効果を発揮します。

 

例えば次、これはあるURLにGET送信してレスポンスを受け取るコード例

さっきの XMLHttpRequest  と比べて滅茶苦茶シンプルですよね?

ちなみに基本的な手順を箇条書きするなら・・・

  1. まず fetch メソッドにURLとオプションを渡す
    第1引数に呼び出しするURL、その後に method: "GET"  とかで色々パラメーターを指定
  2. then関数でレスポンスを受け取る
    レスポンスは連想配列形式で返される。実際のレスポンスのデータ部分は json  メソッドから取得可能

他にもいろいろ細かいこともあるけど、基本的なことはこのくらい

Ajaxと同じくらいシンプル&サクッと非同期通信できます。

Fetch API からPOST送信してレスポンスを受け取るには

ちなみにこの fetch API でPOST送信する場合、パラメーターの渡し方が色々あります。

ヘッダーにMIMEタイプを指定したり、専用のデータ型を使ったり・・・

方法は1つだけじゃありません。

 

でも手軽にPOSTするなら FormData インターフェースを使うのが一番簡単

この FormData についての説明は次の通りです。

FormData インターフェイスは、XMLHttpRequest.send() メソッドを用いることで簡単に送信が可能な、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは、エンコーディングタイプを "multipart/form-data" に設定した場合にフォームが使用するものと同じ形式を使用します。

引用元 : https://developer.mozilla.org/ja/docs/Web/API/FormData

POST送信するときは本当はヘッダー指定が必要なんです。(面倒なやつ)

でもこれを使えばヘッダーの content-type  を省略して送信できます。

 

▼ 実際の FormData を使ったコード例は次の通り

▼ このJSから呼び出されるPHPの内容

実際に $hoge  とか $fuga  の内容を print_r  してみたら、ちゃんと受け取れてました。

Fetch APIを使う時の注意点(対応ブラウザについて)

それでこの Fetch API 、使う上で1つだけ注意点があります。

それが IE や一部モバイルで非対応になってること

IEではどのバージョンでも未対応、
あとAndroid版FireFox や Opera でも一部バージョンで未対応な模様です。

 

詳しくは次の Can I Use のページ参照

まあ Chrome とか FireFox とか Safari とか・・・
そういうモダンブラウザなら必ず対応しているので過剰に気にする必要はありません。

ただIEにも対応させたいなら、 XMLHttpRequest  を使わないと無理っぽいです。

ここまでのまとめ

以上、新しく追加された Fetch API について個人的忘備録でした。

jQuery とか AngularJS とかが使えない場面だと、利用価値があると思います。

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください