この記事では Web API との通信を行う際によく使われる axios
と fetch
の違いについてご紹介します!
初心者から中級者のプログラマー向けに、各章で具体的なコード例を交えながらわかりやすく解説していきます。
まず最初に、この記事の最初に結論をお話します。
axios
は 機能豊富で便利なライブラリ ですが、追加でインストールする必要 があります。
逆に fetch
は ブラウザに組み込まれている ため、シンプルなAPI呼び出しに適していますが エラーハンドリングなどが少し面倒 です。
どちらを使うかは、プロジェクトの要件や好みによって選んでいきましょう!
それでは、それぞれの特徴と違いについてみていきましょう。
それでは、まず axios
について詳しく解説していきます。
axios
は 自動で JSON データを変換 してくれるため、APIから受け取ったレスポンスをすぐに使えます。
axios.get("https://api.example.com/data")
.then(response => {
console.log(response.data); // 既に JSON 形式に変換されている
});
インターセプターとは通信を行う際にリクエストやレスポンスの前後で実行されるカスタムロジックを定義するための機能です。
例えば、認証情報の追加、エラーハンドリング、ログ出力などがインターセプターで実現できます。
axios
では、リクエストやレスポンスを送信・受信する前にカスタムロジックを実行 できます。
これにより、認証トークンの追加やエラーロギングなどの 共通の処理を一元管理 できます。
// リクエストインターセプター
axios.interceptors.request.use(config => {
config.headers.Authorization = "Bearer " + localStorage.getItem("token");
return config;
}, error => {
return Promise.reject(error);
});
// レスポンスインターセプター
axios.interceptors.response.use(response => {
return response;
}, error => {
console.error("Error occurred:", error);
return Promise.reject(error);
});
他にも axios
では CancelToken
を使ってリクエストをキャンセルできます。
これによって 不要なリクエストの結果を無視 できます。
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get("https://api.example.com/data", { cancelToken: source.token })
.catch(error => {
if (axios.isCancel(error)) {
console.log("Request canceled:", error.message);
} else {
console.error("Error:", error);
}
});
source.cancel("Operation canceled by the user.");
次は fetch
について詳しく解説していきます。
まず、fetch
はブラウザに組み込まれているため 追加のインストールが不要 です。
これによって余計な依存関係を増やさずにAPI 通信ができます。
最初から手軽に使えるのはメリットですよね。
他にも、fetch
は、Service Worker との統合が容易です。
これによってオフライン対応のアプリケーションやプッシュ通知など、Progressive Web Apps (PWA) の開発 がしやすくなります。
// Service Worker 内での fetch イベントの処理
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response; // キャッシュがあれば返す
}
return fetch(event.request); // キャッシュがなければ通常の fetch を実行
})
);
});
このコードは Service Worker 内で fetch
イベントをリッスンし、キャッシュに対応するリクエストが存在すればそれを返し、存在しなければ通常の fetch
を実行しています。
これによってオフライン対応やリソースのキャッシュ管理が可能になりますね。
axios
では CancelToken
を使ってリクエストをキャンセルしていたのに対して、fetch
では AbortController
を使ってリクエストをキャンセルできます。
同様に、リクエストをキャンセルできることで 不要なリクエストの結果を無視 できます。
const controller = new AbortController();
const signal = controller.signal;
fetch("https://api.example.com/data", { signal })
.catch(error => {
if (error.name === "AbortError") {
console.log("Request canceled:", error.message);
} else {
console.error("Error:", error);
}
});
controller.abort(); // リクエストをキャンセル
それでは axios
と fetch
の違いについてもう少し詳しく見ていきましょう。
先程の特徴でも紹介しましたが、axios
は自動で JSON データを変換してくれるため、APIから受け取ったレスポンスをすぐに使えます。
一方 fetch
では手動で .json()
を使って変換する必要があります。
双方のエラーハンドリング方法にも違いがあります。
axios
は .catch()
を使って 簡単にエラーハンドリング ができますが、fetch
ではレスポンスの ok
プロパティをチェックする必要があります。
また、紹介したように axios
ではリクエストとレスポンスのインターセプターを使って 共通のエラーハンドリング を行うことができます。
認証トークン追加やエラーログ収集などの共通の処理を一元管理できるのは便利ですよね。
axios
には、リクエストとレスポンスのインターセプターやタイムアウトの設定など、fetch
にはない機能が多く含まれています。
これによって axios
を使うことでより高度なカスタマイズが可能になります。
axios
は ブラウザと Node.js の両方で動作 しますが、fetch
は ブラウザのみ で動作します。
この違いにより、環境によっては axios
を使う方が便利になることがあります。
axios
と fetch
の違いを詳しく見てきましたが、どちらを使うべきかはプロジェクトの要件や個人の好みによって選ぶのが良いと思います。
fetch
はシンプルな API 呼び出しに最適で、 追加のインストールが不要 なのがメリットです。
ただ、エラーハンドリングや JSON 変換などが手動で行わなければならない点に注意が必要です。
axios
はより 多機能で便利なライブラリ です。
自動で JSON 変換を行ったり、リクエストとレスポンスのインターセプターを使ったカスタマイズが可能ですが追加でインストールが必要です。
最終的にはどちらも Web API との通信を行うことができるので、現在のプロジェクトや個人の使いやすい方を選択をすることが重要です。
この記事では axios
と fetch
の違いについて詳しく解説しました!
それぞれの特徴と違いを理解して、プロジェクトの要件や好みに応じて適切なライブラリを選ぶことが大切です。
この記事が皆さんの選択の参考になれば幸いです。
TypeScriptの短絡評価の使い方「&&」「||」「??」の解説
TypeScriptのタイマー関数setTimeoutとsetIntervalの使い方
TypeScriptの多次元配列の使い方についてわかりやすく解説
TypeScriptでのタプルの使い方と実践テクニックを解説
TypeScriptのimport typeをわかりやすく解説
TypeScriptの配列やオブジェクトのソート完全ガイド
TypeScriptコメントアウトの使い方 完全ガイド
TypeScriptのオブジェクトとプロパティの存在チェック完全ガイド
TypeScriptで即時関数を使う方法を解説!基本から実践的な使い方まで