はじめに
アドベントカレンダー12/19 = 19記事目
Web アプリケーションでバックエンド API にリクエストを送るとき、認証トークンやクエリパラメータ、追加オプションを一緒に送る必要があります。
そのために便利なのが Axios — JavaScript/TypeScript (広く使われる HTTP クライアントライブラリ
)
この記事では、axios.get(...) に渡す config オプション の意味や使い方、よくある「params と body」の混同について、わかりやすく解説します。
Axios での基本 GET リクエスト — config とは何か
async fetchReport () {
const config = {
headers: {
'Authorization': sessionStorage.getItem('token')
}
}
const url = `front/auth/daily_reports/me?date=${this.Today}`
try {
const res = await axios.get(url, config)
this.report = res.data
…
-
configは オプション設定のオブジェクト -
axios.get(url, config)は「この URL に対して GET リクエストを送る。さらに config に書かれたオプション（例：ヘッダーやクエリパラメータなど）を一緒に送る」という意味 - この例では、
headers: { Authorization: ... }を設定していて、「ログイン中ユーザーのトークン」を認証ヘッダーとして含めて送信している
config に指定できる主なオプション
Axios の config オブジェクトでは、次のような設定をまとめて指定できます。
| オプション名 | 内容 |
|---|---|
headers |
認証トークンや API キーなど、HTTP ヘッダー情報 |
params |
GET リクエストのクエリパラメータ（例: ?id=123&sort=asc） |
timeout |
リクエストのタイムアウト時間（ミリ秒） |
responseType |
レスポンスの形式（例: JSON, Blob など） |
たとえば、以下のように使います
axios.get('/api/data', {
headers: { Authorization: token },
params: { userId: 1, sort: 'desc' },
timeout: 5000,
responseType: 'json'
})
params と body（データ本体）の違い — GET と POST の使い分け
- GET リクエストでは、URL の末尾に
?key=value&...のような クエリパラメータ を付ける形が標準。Axios ではこれをconfig.paramsで指定します。 - POST／PUT／PATCH のように「リクエストボディ」を送る必要がある場合は、Axios の第2引数（通常
data）にオブジェクトを渡します。 GET では body を使わないのがベストプラクティス。 - ここを混同してしまうと、意図したデータが送信されなかったり、バックエンドが正しく受け取れなかったりするので注意が必要です
実務でありがちなミス — 「params」と「自分のデータ変数名」の混同
「params」は Axios の設定用の名前だけど、自分のコード中でも同じ名前を使って“送信するデータ”として使ってしまう — するとわかりにくい。
この混乱を避けるために：
- Axios の設定用のオプション と 送信／受信するデータそのもの は別の名前で区別する
- GET では
paramsオプション、POST ではdataを使うという慣習を守る
ことで、コードの可読性と意図が伝わりやすくなります。
おわりに
この記事では、Axios を使った GET リクエストにおける config の意味、使えるオプション、そしてよくある params と body の混同について、初心者向けに整理しました。
-
configはリクエストの設定情報のオブジェクト - GET で送るデータは
params、認証情報などはheaders、ボディは POST など別メソッドで - 命名を注意して、混乱しないように書くのが大切