はじめに
この記事では、以下の公式のリリース情報に登場している「fetch adapter」を扱います。
●Release Release v1.7.0 · axios/axios
https://github.com/axios/axios/releases/tag/v1.7.0
ブラウザの API・Node.js での「fetch()」
現在、ブラウザでも Node.js でも、HTTPリクエストを「fetch()」を使って実行できます。
ブラウザの API
●フェッチ API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
Node.js
●Global objects | Node.js v22.3.0 Documentation
https://nodejs.org/api/globals.html#fetch
Node.js のほうに「A browser-compatible implementation of the fetch() function.」とあるように、ブラウザで先に API が使えるようになっていたものを、後追いで Node.js で利用可能になったという経緯があります
axios v1.7.0 で追加された「fetch adapter」
上記の fetch() を利用して axios の HTTPリクエストを実行できるのが「fetch adapter」のようです。
fetch adapter
以下を見ると、これまでは非公式の「fetch adapter」があった中、axios v1.7.0 で公式から「fetch adapter」が提供されるようになった、という状況のようです。
●Repository search results
https://github.com/search?q=axios%20fetch%20adapter&type=repositories
axios公式の「fetch adapter」の使い方
axios公式の fetch adapter の使い方を見てみます。
公式のリポジトリで、以下の部分に記載がありました。
●axios/axios: Promise based HTTP client for the browser and node.js
https://github.com/axios/axios?tab=readme-ov-file#-fetch-adapter
実際に試してみる
上記を利用しつつ、axios を使った GETリクエストの処理を書いてみます。
リクエスト先は、以下を用います。
●JSONPlaceholder - Free Fake REST API
https://jsonplaceholder.typicode.com/
Node.js
まずは Node.js で試してみます。
axios のパッケージをインストールしてから、以下を nodeコマンドで実行します。
const axios = require("axios");
const fetchAxios = axios.create({
adapter: "fetch",
});
const url = "https://jsonplaceholder.typicode.com/todos/1";
async function fetchData() {
try {
const { data } = await fetchAxios.get(url);
console.log(data);
} catch (error) {
console.error("エラーが発生しました:", error);
}
}
fetchData();
実行結果
上記を実行してみたところ、以下のとおり、想定通りの動作が確認できました。
また、v1.6.8 でも動作させてみます。こちらは axios公式の「fetch adapter」が提供されていないバージョンなので、エラーが発生します。
ブラウザで試す
次にブラウザで試してみます。以下の内容で試してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>テスト用</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.2/axios.min.js"></script>
</head>
<body>
<h1>axios の「fetch adapter」</h1>
<button onclick="fetchData()">データを取得</button>
<pre id="result"></pre>
<script>
async function fetchData() {
const url = "https://jsonplaceholder.typicode.com/todos/1";
try {
const response = await axios.get(url, { adapter: "fetch" });
document.getElementById("result").textContent = JSON.stringify(
response.data,
null,
2
);
} catch (error) {
console.error("エラーが発生しました:", error);
document.getElementById("result").textContent =
"エラーが発生しました: " + error.message;
}
}
</script>
</body>
</html>
実行結果
上記を実行してみたところ、以下のとおり、想定通りの動作が確認できました。
また、CDN から読みこむ axios の バージョンを 1.6.8 にしたパターンも試してみました。
こちらでも、想定通りの動作が確認できました。
