axiosとfetchは、どちらもJavaScriptでHTTPリクエストを行うための方法です。
axiosとfetchの違い
インターフェース
- fetch
ブラウザの標準APIであり、グローバル関数として提供されます。ネイティブのPromiseベースのAPIであり、fetch()メソッドを使用してHTTPリクエストを行います。 - axios
サードパーティのライブラリであり、独自のAPIを持っています。axiosインスタンスを作成し、そのインスタンスのメソッドを使用してHTTPリクエストを行います。
ブラウザの互換性
- fetch
モダンブラウザで広くサポートされていますが、一部の古いブラウザではポリフィルが必要な場合があります。 - axios
Promiseベースのライブラリであり、すべてのモダンブラウザで動作します。さらに、Node.js環境でも使用できます。
デフォルトの動作
- fetch
クッキーなどの一般的なHTTPリクエストの動作をカスタマイズするために、fetch()メソッドを使用する場合は、設定オプションを手動で指定する必要があります。 - axios
デフォルトでクッキーの処理やリクエスト/レスポンスのインターセプトなど、よく使用されるHTTPリクエストの機能が組み込まれています。
fetchはブラウザの標準機能であるため、単純なHTTPリクエストを行う場合や、フロントエンドのライブラリやフレームワークに依存したくない場合に適しています。
一方、axiosはより高度な機能や拡張性が必要な場合に便利です。
現在どちらの方が使用されているか
現在のトレンドではaxiosが広く使われています。axiosは以下のような理由から人気があります。
使いやすさ
axiosはPromiseベースであり、よりシンプルなAPIを提供しています。fetchは低レベルのAPIであり、クッキーの処理やエラーハンドリングなどの面でaxiosよりも手間がかかる場合があります。
機能性
axiosはデフォルトでHTTPリクエストの機能が豊富であり、クッキーの処理やリクエスト/レスポンスのインターセプトなど、よく使用される機能が組み込まれています。一方、fetchは基本的なHTTPリクエスト機能しか提供していません。
ブラウザとNode.jsの両方で使える
axiosはブラウザとNode.jsの両方で使えるため、クライアントサイドとサーバーサイドの両方で同じライブラリを使用できます。これは、特にサーバーサイドレンダリングやユニバーサルJavaScriptアプリケーションの開発時に便利です。
Reactでaxiosを使用する場合の例
axiosを使用する際には、Promiseチェーンを使用して成功した場合の処理と失敗した場合の処理を指定します。
成功した場合には .then() メソッドを使用し、失敗した場合には .catch() メソッドを使用します。
また、axiosはPromiseベースのライブラリであるため、async/await構文を使用して非同期処理を行うこともできます。
下記の例では、axiosを使用してGETとPOSTリクエストを行っていますが、他のHTTPメソッド（PUT、DELETEなど）も同様に使用できます。
APIエンドポイントや送信するデータに応じて、適切なメソッドを使用してください。
axiosをインストール
npm install axios
GETリクエストを送信する例
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
// リクエスト成功時の処理
console.log(response.data);
})
.catch(error => {
// リクエスト失敗時の処理
console.error('Error fetching data:', error);
});
POSTリクエストを送信する例
import axios from 'axios';
const dataToSend = {
name: 'testname',
email: 'testemail@example.com',
};
axios.post('https://api.example.com/create', dataToSend)
.then(response => {
// リクエスト成功時の処理
console.log('Data created:', response.data);
})
.catch(error => {
// リクエスト失敗時の処理
console.error('Error creating data:', error);
});
その他
fetchもモダンブラウザで広くサポートされており、特に単純なHTTPリクエストを行う場合には便利です。また、fetchは追加のポリフィルを使用すれば古いブラウザでも使用できるようになります。
総じて、axiosが使いやすさや機能性の面で優れているため、多くの開発者がaxiosを好んで使用しています。