宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

whatwg-fetch【JSライブラリ】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する


本日は、whatwg-fetchのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。
GitHub - github/fetch: A window.fetch JavaScript polyfill.

Philosophy、Motivation、Back Story

なし

実際に使ってみる

今回のライブラリは、axiosと似たような機能を持っているようです。

以下のサイトによると、若干whatwg-fetchの方が使われているみたいですね。
www.npmtrends.com

こんな記事も見つけました。
「axiosとfetch()どっちを使うべきか?」
Axios or fetch(): Which should you use? - LogRocket Blog

The fetch() API is perfectly capable of reproducing the key features of Axios, and it has the added advantage of being readily available in all modern browsers.

fetch()の方は、ライブラリではなく”API”という扱いのようです。
Axiosの方が使いやすいけど、fetch()はAxiosの主要な機能を再現できる上に、モダンなブラウザ環境でも使用できると書いてあります。
逆にいうと、Axiosの方が古いブラウザに対応しているため、「幅広いブラウザをサポートしている」と言えます。 
fetch()でも、Polyfillが入っているとIEで使えるようです。

また、Axiosは自動でJSON形式に変換する機能を持ちますが、fetch()は手動で行わなければなりません。
って書くとAxiosがよく聞こえるんですけど、大規模なアプリを作っていたら勝手にJSONにされたら困る場面もありますよね、きっと。

結論、ほとんど機能は同じで、手軽なのはAxios。fetch()を使うときは快適かどうかで決めましょうということが書いてありました。(多分、使い方や導入環境が快適ならって意味だと思います。)

わからなかったところ

弊社でこちらが導入されたのは、Axiosよりfetch()の方がモダンな非同期通信のライブラリだったからでしょうか?

3行でまとめる

whatwg-fetchを導入すると、

  • 非同期通信が行えるようになる

以上です!