【js】FetchAPIってのがあるらしい

javascript

ajaxといえばXMLHttpRequest
でも直接触りたくないからそれを使うためだけにjqueryを入れる
でもそれだけのためにjquery入れるのは辛いのでaxiosを入れてみる
でもaxiosはまだv0.18だしなぁ
じゃぁXMLHttpRequest直接触る？
うーーん
いつも↑このループに入る

そんな中ServiceWorkerで遊んでたらFetchAPIが出てきて「これajaxじゃん！！」て思ったので調べた

FetchAPI

Fetch API には（ネットワーク越しの通信を含む）リソース取得のためのインターフェイスが定義されています。XMLHttpRequest と似たものではありますが、より強力で柔軟な操作が可能です。

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

要するにさらばXMLHttpRequestてことだな

jsonを取得してみる

fetch('sample.json').then(res => res.json()).then(t => console.log(t))

非同期処理なのでpromiseで書きます
繋げてかけるのでネスト地獄にならなくて済むのがイイ

resからbodyを取るメソッド

json()以外にもいろいろある

  • arrayBuffer(): 音楽や動画
  • blob(): 画像とか
  • json(): jsonをmapにしたもの
  • text(): string
  • formData(): FormData型

まとめ

FetchAPIイイ！
これでajaxだけのためにjqueryを入れなくてよくなる
さらばjquery