FetchAPIについて、まだ詳しくは理解していないが試してみたので備忘録として記録することとする。
個人的な理解はこう。
FetchAPIはjQueryを使わずにAjax通信を行える優れもん
今回は、従来のjQueryを使ったAjax通信と比較して書こうと思う
ちなみに、FetchAPIは全ブラウザで完全サポートされてないっぽいので使うときは対応ブラウザ（バージョン）に注意が必要。
ではでは、まずは従来のjQuery使ったパターンでやってみよう！
index.htmlファイルを作成する。ソースはこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <button id="jquery-get">jQuery GET</button> <script> $('#jquery-get').on('click', () => { //ajax通信開始 sendRequest({ url: "./data.json", type: "GET" }).done(function(data){ // 成功時の処理 console.log("success") console.log(data) }).fail(function(error){ // 失敗時の処理 console.log("error") console.log(error) }); }) // Ajax通信 function sendRequest(request){ var deferred = new $.Deferred; $.ajax(request) //ajax通信成功時 .done((success) => { deferred.resolve(success); }) //ajax通信失敗時 .fail((error) => { deferred.reject(error); }); return deferred.promise(); } </script> </body> </html> |
まずは、GETリクエストをやってみた。
参照するファイルはローカルのindex.htmlファイルと同じディレクトリ内に「data.json」ファイルを作成。
中身はこんな感じ
|
1 2 3 4 5 6 7 8 9 |
{ "head" : { "status" : 200 }, "body" : { "name" : "soloware", "url" : "https://solo-ware.com" } } |
早速、index.htmlファイルをブラウザで開いてボタン「jQuery GET」をクリックしてみる
コンソールに「data.json」ファイルの内容が出力されるはずだ。
なお、今回はChromeで実施したが
おそらく「Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.」が出たと思う。
参照するファイル「data.json」がローカルのファイルのため、URLスキームが「file://」となるため、リソースのオリジンポリシー制約に引っかかってしまってるために起きるエラーだそうな
回避するには、Chromeをターミナルから下記コマンドで起動すれば行けた
|
1 |
sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args -allow-file-access-from-files |
ちな、私はmacの環境でやったのでwindowsの人はググってください笑
多分、chromeを右クリックしてプロパティを開いて、「-allow-file-access-from-files」をパスかなんかの最後につけたらいけんちゃうかな？
すみません。詳細はわからないので試してみてください。
おし、これでjQueryを使ったAjax通信のGETは完了！
POST版に移る前にFetchAPIを使った場合のGETを試してみたいと思う
index.htmlファイルを下記のように修正した。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="fetch-get">fetch GET</button> <script> document.getElementById('fetch-get').addEventListener('click', getFetch); function getFetch(){ fetch('https://jsonplaceholder.typicode.com/posts') .then((res) => res.json()) .then((data) => { console.log("success") console.log(data) }) .catch((err) => { console.log("error") console.log(err) }) } </script> </body> </html> |
FetchAPIを使った場合、chromeの起動オプションに「-allow-file-access-from-files」をつけても、URLスキームに「file://」はサポートしてまへんよーって怒られたので、
臨時の策として「jsonplaceholder.typicode.com」サイトを利用した笑
「fetch GET」ボタンをクリックするとコンソールに100件ほどのjsonデータが取得表示されるはずだ。
これで、fetchAPIを使ったGETも完了だ！
次はPOSTですなー
例にならってjQueryを使ったものからやってきます。
index.htmlを下記のように修正
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <button id="jquery-post">jQuery POST</button> <script> $('#jquery-post').on('click', () => { //ajax通信開始 sendRequest({ url: "https://jsonplaceholder.typicode.com/posts", type: "POST", data: {firstname : "Hello", lastname: "World" }, timeout:3000, }).done(function(data){ // 成功時の処理 console.log("success") console.log(data) }).fail(function(error){ // 失敗時の処理 console.log("error") console.log(error) }); }) // Ajax通信 function sendRequest(request){ var deferred = new $.Deferred; $.ajax(request) //ajax通信成功時 .done((success) => { deferred.resolve(success); }) //ajax通信失敗時 .fail((error) => { deferred.reject(error); }); return deferred.promise(); } </script> </body> </html> |
今回も「jsonplaceholder.typicode.com」のサイトを使ってPOSTを実現した。
jQuery POSTボタンをクリックするとコンソールが下記のように表示されるはず。
このサイトにはすでに100件のデータが存在するため、idプロパティが101となって取得できるはずだ。
これでjQueryを使ったPOSTはOK
最後にFetchAPIを使ってのPOSTリクエストだ
index.htmlを下記のように修正する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="fetch-post">fetch POST</button> <script> document.getElementById('fetch-post').addEventListener('click', postFetch); function postFetch(){ fetch('https://jsonplaceholder.typicode.com/posts', { method:"POST", headers:{ "Accept":"application/json, text/plane, */*", "Content-type":"application/json" }, body:JSON.stringify({firstname : "Hello", lastname: "World" }) }) .then((res) => res.json()) .then((data) => { console.log("success") console.log(data) }) .catch((err) => { console.log("error") console.log(err) }) } </script> </body> </html> |
「fetch POST」ボタンをクリックするとjQueryを使ったPOSTリクエスト時と同じ結果がコンソールに出力されるはずだ。
ふー。以上でjQueryを使った版とfetchAPIを使った版でのAjax通信は完了でーす。
んーどっちがいいんやろ。。個人的にはどっちでもいいんかなー
最近だとjQuery使うの普通やし、jQuery使わんでいいってだけがfetchAPIのメリットかどうかはわからんから、今後も要勉強って感じですな。
今はSPAのWebアプリ開発にハマってるんで、Ajax通信は必須の技術となるためいい勉強になりましたー。
ではでは！
コメント