はじめに
この記事は株式会社ダイヤモンドファンタジー Advent Calendar 2024の25日目の記事です。
この記事では、Axiosがどのようなものなのか、どのように使うのか、そして実際にAxiosを使ってAPIリクエストを送る方法について解説します。
フロントエンド開発において、バックエンドとのデータ通信は欠かせません。通常、APIリクエストを送る際に、JavaScriptではfetchやXMLHttpRequestを使用しますが、これらには煩雑な設定が必要なことがあります。そこで、簡単にHTTPリクエストを送るために使用されるのがAxiosです。
1. Axiosとは？
Axiosは、JavaScriptのHTTPクライアントライブラリで、Promiseを使って非同期リクエストを扱います。特に、ブラウザとNode.jsの両方で使用可能で、APIとの通信を簡単に行えるように設計されています。
主な特徴としては以下の通りです。
- Promiseベース: 非同期処理を簡単に扱えます
- ブラウザとNode.jsで動作: フロントエンドとバックエンドの両方で使用可能
- エラーハンドリング: 明確なエラーハンドリングが可能
- リクエストとレスポンスのインターセプター: リクエスト前、レスポンス後にカスタム処理を挟むことが可能
- 自動的なJSON変換: レスポンスがJSON形式の場合、自動で変換をしてくれる
2. Axiosのインストールとセットアップ
Axiosを使うために、まずはプロジェクトにインストールする必要があります。
以下は、npmを使ったインストール方法です。
1. npmでインストール
$ npm install axios
これで、Axiosがプロジェクトにインストールされます。
2. インポート
インストールが完了したら、JavaScriptファイルにAxiosをインポートして使用できます。
import axios from 'axios';
3. Axiosの基本的な使い方
Axiosでは、主にGETリクエストやPOSTリクエストを送信します。
これらを実際のコードでどのように使用するか見ていきましょう。
1. GETリクエストでデータを取得
APIからデータを取得する最も基本的な方法は、axios.get()を使用することです。
AxiosでGETリクエストを送信
import axios from 'axios';
axios.get('API_URL')
.then(response => {
console.log(response.data); // レスポンスデータをコンソールに出力
})
.catch(error => {
console.error('Error fetching data:', error); // エラーが発生した場合
});
-
axios.get(url): 指定したURLにGETリクエストを送信 -
then: リクエストが成功した場合に呼ばれ、レスポンスデータにアクセスできる -
catch: エラーが発生した際に呼ばれ、エラーメッセージを処理できる
2. POSTリクエストでデータを送信
POSTリクエストは、サーバーに新しいデータを送信する際に使用します。
AxiosでPOSTリクエストを送信
import axios from 'axios';
const userData = {
name: 'Alice',
email: 'alice@example.com'
};
axios.post(API_URL, userData)
.then(response => {
console.log('User created:', response.data); // 作成したユーザーの情報
})
.catch(error => {
console.error('Error posting data:', error); // エラー処理
});
-
axios.post(url, data): 指定したURLにPOSTリクエストを送信し、dataにはリクエストデータをオブジェクトとして渡します
4. エラーハンドリング
Axiosでは、エラーが発生した場合に明確な方法でエラーハンドリングができます。例えば、APIから予期しないレスポンスが返された場合や、リクエストが失敗した場合にエラーを処理できます。
axios.get(API_URL)
.then(response => {
console.log(response.data); // 正常なレスポンス
})
.catch(error => {
if (error.response) {
// サーバーがレスポンスを返したが、ステータスコードが範囲外
console.error('Response error:', error.response.status);
} else if (error.request) {
// リクエストは送信されたが、レスポンスが受け取れなかった
console.error('Request error:', error.request);
} else {
// 他のエラー
console.error('Error:', error.message);
}
});
-
error.response: サーバーがエラーレスポンスを返した場合（例えば、404や500） -
error.request: サーバーからレスポンスが返されなかった場合 -
error.message: その他のエラー（例外エラーなど）
5. リクエストインターセプターとレスポンスインターセプター
Axiosには、リクエストを送信する前や、レスポンスを受け取った後に処理を挟むためのインターセプター機能があります。これにより、共通のヘッダー設定やエラーハンドリングを一元管理できます。
1. リクエストインターセプター
axios.interceptors.request.use(config => {
const token = localStorage.getItem('authToken');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});
request.use: リクエストが送信される前に処理を挟むことができる。
例えば、認証トークンを追加するなどの処理が可能
2. レスポンスインターセプター
axios.interceptors.response.use(response => {
// レスポンスを変更する場合
return response;
}, error => {
// エラーを一元的に処理
return Promise.reject(error);
});
response.use: レスポンスを受け取った後に処理を挟むことができる
6. まとめ
現プロジェクトでaxiosを使用しているが、基本的にコンポーネント化などされて一部分くらいしか実際は触っていないため改めて基礎をしっかりと学習してみました。
APIをクライアントと統合するときにaxiosは必要になってくるため自分でしっかりと理解して使用できるようにしなきゃですね。
2024年もお疲れ様でした〜