鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

Fetch APIを使ってみた

仕事でFetch APIを使える機会があったので、そのメモ。

Fetch 概説 - Web API インターフェイス | MDN

今回はJSONを受け取ればよかったので、こんな感じです。

fetch(url)
.then(response => {
  return response.json();
}).then(json => {
  console.log(JSON.stringify(json));
})
.catch(error => {
  console.error(error);
});

fetch()の結果はPromiseで返り、resolveにはResponseインスタンスが引数として渡されるので、それをJSONやらBlob,、ArrayBuffer、プレーンテキストにしてあげてゴニョゴニョします。詳しくは上記MDNを。それにしてもMDNってほんと素晴らしいですね。

で、ちょっと気をつけないといけないのがエラーで、fetch()は400系や500系のサーバ側エラーはエラーとして扱わないというところ。エラーになるのはネットワークエラーのみです。

fetch が成功したかチェックする | MDN

そのあたりの対応は上記にも書いてありますが、Response.okプロパティがtrueになっていれば成功扱いしてあげればよいです。

とまあここまではよかったのですが、ちょっとあれれとなったのが204の扱い。

204 No Content - HTTP | MDN

成功してるけどbodyが空なので、最初のやり方だとresponseがなくてエラーになります。今回はresponse.statusが204かどうかをチェックするみたいな方法をとりました。もうちょいうまいやり方もありそうではありますが。