axios（外部ライブラリ）の基本 — axios.get(url).then(r => r.data)
axios は人気のある HTTP クライアントライブラリで、ブラウザや Node.js で使えます。fetch よりもシンプルに JSON を扱え、リクエストやレスポンスの処理をまとめて書けるのが特徴です。
基本の使い方
// axiosをインポート（CDNやnpmで利用可能）
import axios from "axios";
// GETリクエスト
axios.get("https://api.example.com/items")
.then(response => {
console.log(response.data); // JSON本文がそのまま入っている
})
.catch(error => {
console.error("エラー:", error.message);
});
- response.data: axiosはレスポンス本文を自動でパースして
dataに入れてくれる。fetchのようにresponse.json()を呼ぶ必要がない。 - エラーハンドリング: ネットワークエラーやHTTPエラーは
catchで受け取れる。
async/await で書くとさらに読みやすい
async function loadItems() {
try {
const response = await axios.get("https://api.example.com/items");
console.log(response.data);
} catch (err) {
console.error("失敗:", err.message);
}
}
すぐ使えるテンプレート集
1) クエリパラメータ付き GET
const response = await axios.get("https://api.example.com/search", {
params: { q: "js", page: 2 },
});
console.log(response.data);
- ポイント:
paramsオプションでクエリ文字列を自動生成。
2) POST（JSON送信）
const response = await axios.post("https://api.example.com/items", {
title: "JavaScript入門",
price: 1200,
});
console.log(response.data);
- ポイント: bodyにオブジェクトを渡すと自動でJSON化、ヘッダーも自動設定。
3) ヘッダー付きリクエスト
const response = await axios.get("https://api.example.com/me", {
headers: { Authorization: "Bearer token123" },
});
console.log(response.data);
4) 複数リクエストを並列で
const [users, posts] = await Promise.all([
axios.get("/api/users"),
axios.get("/api/posts"),
]);
console.log(users.data, posts.data);
実務で便利な機能
- 自動JSON処理: fetchでは
await r.json()が必要だが、axiosはresponse.dataに直接入る。 - リクエスト/レスポンスのインターセプター: 共通処理（認証トークン付与、ログ出力など）を一括設定できる。
- タイムアウト設定:
axios.get(url, { timeout: 3000 })で3秒制限。 - ベースURL設定:
axios.create({ baseURL: "https://api.example.com" })で共通設定をまとめられる。
よくある落とし穴と対策
- axios未導入: fetchは標準だが、axiosは外部ライブラリ。npmやCDNで導入が必要。
- エラーオブジェクトの構造:
error.responseにサーバー応答が入る。error.messageだけでは情報不足。
→ 対策:error.response.statusやerror.response.dataを確認。 - タイムアウト未設定: デフォルトは無期限。
→ 対策:timeoutオプションを明示。 - Node.js環境での違い: fetchは最近標準化されたが、axiosは古くから使えるため Node.js でも安定。
練習問題（手を動かして覚える）
// 1) 基本GET
axios.get("/api/ping")
.then(r => console.log(r.data))
.catch(e => console.error(e));
// 2) async/awaitでPOST
async function ex2() {
try {
const r = await axios.post("/api/echo", { msg: "hello" });
console.log(r.data);
} catch (e) {
console.error(e.message);
}
}
// 3) クエリパラメータ付きGET
const r3 = await axios.get("/api/search", { params: { q: "tokyo", limit: 5 } });
console.log(r3.data);
// 4) エラー詳細を確認
try {
await axios.get("/api/404");
} catch (e) {
console.log("status:", e.response?.status);
console.log("body:", e.response?.data);
}
直感的な指針
- GETなら
axios.get(url)→response.data。 - POSTなら
axios.post(url, obj)で JSON送信。 - エラーは
catch、詳細はerror.response。 - 共通設定や並列処理も簡単。
👉 axiosは「fetchをもっと便利にした外部ライブラリ」。初心者が「JSON APIを楽に扱いたい」ときに最適です。
