axios v1.7.0 で追加された「fetch adapter」を試す

## はじめに
この記事では、以下の公式のリリース情報に登場している「fetch adapter」を扱います。

●Release Release v1.7.0 · axios/axios
　https://github.com/axios/axios/releases/tag/v1.7.0

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5657d3c2-7824-8bab-2642-2dffa913d71d.png)

### ブラウザの API・Node.js での「fetch()」
現在、ブラウザでも Node.js でも、HTTPリクエストを「fetch()」を使って実行できます。

#### ブラウザの API
●フェッチ API - Web API | MDN
　https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e1e566d0-f7aa-67b2-0788-45eb1df96033.png)

#### Node.js
●Global objects | Node.js v22.3.0 Documentation
　https://nodejs.org/api/globals.html#fetch

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/eec3dff1-f2db-e927-1745-4ecde87b1949.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/546f6fb5-e7cb-d168-5a31-38ab88c6a00a.png)

### 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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c631a04a-1c39-1f69-c2ac-14ee8cdef079.png)

## 実際に試してみる
上記を利用しつつ、axios を使った GETリクエストの処理を書いてみます。
リクエスト先は、以下を用います。

●JSONPlaceholder - Free Fake REST API
　https://jsonplaceholder.typicode.com/

### Node.js
まずは Node.js で試してみます。
axios のパッケージをインストールしてから、以下を nodeコマンドで実行します。

```javascript
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();
```

#### 実行結果
上記を実行してみたところ、以下のとおり、想定通りの動作が確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/602cdde0-0339-c148-31fb-0b72ea883928.png)

また、v1.6.8 でも動作させてみます。こちらは axios公式の「fetch adapter」が提供されていないバージョンなので、エラーが発生します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3ffa76bb-4bab-9ce2-1146-3d4afa04cfe3.png)

### ブラウザで試す
次にブラウザで試してみます。以下の内容で試してみます。

```html
<!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>
```

#### 実行結果
上記を実行してみたところ、以下のとおり、想定通りの動作が確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/564adce5-8254-bf44-d202-54be150e2848.png)

また、CDN から読みこむ axios の　バージョンを 1.6.8 にしたパターンも試してみました。
こちらでも、想定通りの動作が確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2240d0fe-629f-bc74-cf63-ab77c3f7b486.png)