【初級者向け】fetchとaxiosの違い
こんにちは！現在独学でフロントエンドの勉強をしている駆け出しエンジニアのjaymzzz37です。
JavaScriptの学習は始めたときは、外部リソースを取得する際にfetchを頻繁に使っていました。Reactの学習を始めてからはaxiosを使う方が多いなという印象を受けました。
どちらも同じようなことができるけど何が違うの？どっちらを使うべきなの？という疑問が湧いたの自分なりに調べてまとめてみました。
もしこれは違うのでは？こうなのでは？というご意見があればどしどしコメントをお送りください。
fetchとaxiosとは
どちらも使うときのモチベーションは、非同期的に外部リソースからデータを取得するためです。
そしてどちらもPromiseオブジェクトを返却します。
fetchとaxiosの違い
提供形態
fetch: ブラウザに標準で組み込まれているネイティブAPIです。つまりライブラリなどのインストールは必要ありません。
axios: サードパーティライブラリのため、プロジェクトで利用するためにはインストールが必要です。
取得したデータへのアクセス方法
fetch: response.json()でレスポンスをJSON形式にパースする必要があります。そのため、例えばusernameの値を取得したい場合は以下のようなコードになります。
const fetchData = () => {
fetch("/api/userdata")
.then((response) => response.json())
.then((user) => console.log(user.username)
}
axios: response.dataでJSONデータを取得することができます。usernameの取得は以下のコードのようになります。
const fetchData = () => {
axios.get("/api/userdata")
.then((response) => console.log(response.data.username))
}
エラーハンドリング
fetch: catchだけでは400系や500系のHTTPステータスコードはエラーとして拾えないです。そのため、もしエラーとして扱いたい場合は以下のようにresponse.okをチェックするロジックを入れる必要があります。
const fetchData = () => {
fetch("/api/userdata")
.then((response) => {
if (!response.ok) {
throw new Error('エラーが発生しました');
}
return response.json();
})
.then((user) => console.log(user.username)
.catch((error) => console.error(error));
}
axios: response.dataでJSONデータを取得することができます。usernameの取得は以下のコードのようになります。
const fetchData = () => {
axios.get("/api/userdata")
.then((response) => console.log(response.data.username))
.catch((error) => console.error(error));
}
※説明をシンプルにするためにcatch内の処理は簡易的なものにしています。
どちらを使えばいいの？
個人的な意見になりますが、私はaxios派です。使うときのモチベーションは同じにも関わらず、JSON形式にパースをするためのコードを書く必要がなかったり、response.okのチェックを省いてもエラーハンドリングができたりと直感的に使いやすいのはaxiosだと思います。
学習を更に進めていくなかでfetchの方が良いケースがあればまた共有ができればと思います。
参考文献
Discussion