FetchAPI

FrontEnd

FetchAPIについて、まだ詳しくは理解していないが試してみたので備忘録として記録することとする。

個人的な理解はこう。

FetchAPIはjQueryを使わずにAjax通信を行える優れもん

今回は、従来のjQueryを使ったAjax通信と比較して書こうと思う

ちなみに、FetchAPIは全ブラウザで完全サポートされてないっぽいので使うときは対応ブラウザ(バージョン)に注意が必要。

ではでは、まずは従来のjQuery使ったパターンでやってみよう!

index.htmlファイルを作成する。ソースはこんな感じ。

まずは、GETリクエストをやってみた。

参照するファイルはローカルのindex.htmlファイルと同じディレクトリ内に「data.json」ファイルを作成。

中身はこんな感じ

早速、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をターミナルから下記コマンドで起動すれば行けた

ちな、私はmacの環境でやったのでwindowsの人はググってください笑

多分、chromeを右クリックしてプロパティを開いて、「-allow-file-access-from-files」をパスかなんかの最後につけたらいけんちゃうかな?

すみません。詳細はわからないので試してみてください。

おし、これでjQueryを使ったAjax通信のGETは完了!

POST版に移る前にFetchAPIを使った場合のGETを試してみたいと思う

index.htmlファイルを下記のように修正した。

FetchAPIを使った場合、chromeの起動オプションに「-allow-file-access-from-files」をつけても、URLスキームに「file://」はサポートしてまへんよーって怒られたので、

臨時の策として「jsonplaceholder.typicode.com」サイトを利用した笑

「fetch GET」ボタンをクリックするとコンソールに100件ほどのjsonデータが取得表示されるはずだ。

これで、fetchAPIを使ったGETも完了だ!

次はPOSTですなー

例にならってjQueryを使ったものからやってきます。

index.htmlを下記のように修正

今回も「jsonplaceholder.typicode.com」のサイトを使ってPOSTを実現した。

jQuery POSTボタンをクリックするとコンソールが下記のように表示されるはず。

このサイトにはすでに100件のデータが存在するため、idプロパティが101となって取得できるはずだ。

これでjQueryを使ったPOSTはOK

最後にFetchAPIを使ってのPOSTリクエストだ

index.htmlを下記のように修正する

「fetch POST」ボタンをクリックするとjQueryを使ったPOSTリクエスト時と同じ結果がコンソールに出力されるはずだ。

ふー。以上でjQueryを使った版とfetchAPIを使った版でのAjax通信は完了でーす。

んーどっちがいいんやろ。。個人的にはどっちでもいいんかなー

最近だとjQuery使うの普通やし、jQuery使わんでいいってだけがfetchAPIのメリットかどうかはわからんから、今後も要勉強って感じですな。

今はSPAのWebアプリ開発にハマってるんで、Ajax通信は必須の技術となるためいい勉強になりましたー。

ではでは!

コメント

タイトルとURLをコピーしました