最近知ったけど、最新のJSだと Fetch API っていうのが使えるみたいです。
使ってみたら、確かに便利ですね。Ajax 的な感覚で使いやすい
ただいくつか注意しなきゃいけないこともありました。
そこで自分の記憶の整理も兼ね、
Fetch API の使い方・コード例とか少し気を付けた方がいいこと をまとめます
このページの目次
今まででも XMLHttpRequest が使えていたが・・・
従来のJSにもHTTP非同期通信ができるAPIはあります。
それが最近聞かなくなった XMLHttpRequest というやつ
これを使えば、旧JSでも非同期通信ができました（というかこれしかなかった）
▼ 簡単なHTTP非同期通信のコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/// インスタンス化 var xhr = new XMLHttpRequest(); xhr.open("GET","https://example.com/hoge.php"); xhr.onload = function () { if (xhr.readyState === xhr.DONE) { if (xhr.status === 200) { console.log('Response : ', xhr.response); console.log('Text : ', xhr.responseText); } } }; /// 後始末 xhr.send(null); |
ただ次のような問題点アリ
- なんかコードが冗長になる
- POST送信とかも超やりにくい
- 通信が完了したかの判別も複雑
- もっとサクッと通信したい
こういう風に不便だったので、 次に紹介する Fetch API が実装されました。
Fetch APIとは？基本的な使い方＆コード例
自分は今まで Ajax ばっかり使ってたんで、これがあると知らなかったです。
この Fetch API の便利なとこは THE シンプル なこと
もちろん Ajax の方がシンプルなんですが、
どうしても純粋なJSしか使えない場面で効果を発揮します。
例えば次、これはあるURLにGET送信してレスポンスを受け取るコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
url = 'https://example.com/hoge.php'; fetch(url,{ method: "GET", redirect: "follow" }) .then(function(resp){ if(resp.ok){ resp.json().then(data => { console.log(data); }); }else{ console.error('通信エラー') } }); |
さっきの XMLHttpRequest と比べて滅茶苦茶シンプルですよね？
ちなみに基本的な手順を箇条書きするなら・・・
- まず fetch メソッドにURLとオプションを渡す
第１引数に呼び出しするURL、その後に method: "GET" とかで色々パラメーターを指定
- then関数でレスポンスを受け取る
レスポンスは連想配列形式で返される。実際のレスポンスのデータ部分は json メソッドから取得可能
他にもいろいろ細かいこともあるけど、基本的なことはこのくらい
Ajaxと同じくらいシンプル＆サクッと非同期通信できます。
Fetch API からPOST送信してレスポンスを受け取るには
ちなみにこの fetch API でPOST送信する場合、パラメーターの渡し方が色々あります。
ヘッダーにMIMEタイプを指定したり、専用のデータ型を使ったり・・・
方法は１つだけじゃありません。
でも手軽にPOSTするなら FormData インターフェースを使うのが一番簡単
この FormData についての説明は次の通りです。
FormData インターフェイスは、XMLHttpRequest.send() メソッドを用いることで簡単に送信が可能な、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは、エンコーディングタイプを "multipart/form-data" に設定した場合にフォームが使用するものと同じ形式を使用します。
引用元 ： https://developer.mozilla.org/ja/docs/Web/API/FormData
POST送信するときは本当はヘッダー指定が必要なんです。（面倒なやつ）
でもこれを使えばヘッダーの content-type を省略して送信できます。
▼ 実際の FormData を使ったコード例は次の通り
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
url = 'https://example.com/hoge.php'; /// POSTパラメーター var formData = new FormData(); formData.append('param1', 'hoge'); formData.append('param2', 'fuga'); fetch( url, { method: "POST", body: formData }) .then(function(resp){ if(resp.ok){ resp.json().then(data => { console.log(data); }); } }); |
▼ このJSから呼び出されるPHPの内容
|
1 2 |
$hoge = $_POST['hoge']; $fuga = $_POST['fuga']; |
実際に $hoge とか $fuga の内容を print_r してみたら、ちゃんと受け取れてました。
Fetch APIを使う時の注意点（対応ブラウザについて）
それでこの Fetch API 、使う上で１つだけ注意点があります。
それが IE や一部モバイルで非対応になってること
IEではどのバージョンでも未対応、
あとAndroid版FireFox や Opera でも一部バージョンで未対応な模様です。
詳しくは次の Can I Use のページ参照
まあ Chrome とか FireFox とか Safari とか・・・
そういうモダンブラウザなら必ず対応しているので過剰に気にする必要はありません。
ただIEにも対応させたいなら、 XMLHttpRequest を使わないと無理っぽいです。
ここまでのまとめ
以上、新しく追加された Fetch API について個人的忘備録でした。
jQuery とか AngularJS とかが使えない場面だと、利用価値があると思います。
