はじめに

この記事では、以下の公式のリリース情報に登場している「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 にしたパターンも試してみました。
こちらでも、想定通りの動作が確認できました。