fetch と axios違いのわかりやすい話【JS初心者向け完全入門】

PR
fetch と axios違いのわかりやすい話【JS初心者向け完全入門】
この記事は約9分で読めます。

ズバリどちらがおすすめか?

おすすめ

axiosです

axiosfetchよりも使いやすく、機能豊富なHTTP通信ライブラリとして広く利用されています。

  1. シンプルで使いやすいAPI
    • axiosは直感的なAPIを提供しており、リクエストやレスポンスの処理が簡単に行える
    • Promiseベースの構文により、thenやcatchを使って非同期処理を扱うことができる
    • async/await構文と組み合わせることもできる
  2. ブラウザのサポート
    • axiosはXHR(XMLHttpRequest)を使用して通信を行うため、fetchよりも広範なブラウザサポートを提供
    • ほとんどのモダンなブラウザや古いバージョンのブラウザでも安定して動作
  3. エラーハンドリング
    • axiosはデフォルトでエラーハンドリング機能を提供
    • HTTPステータスコードがエラー範囲内にある場合、自動的にエラーとして処理する
    • エラーレスポンスの詳細な情報(ステータスコード、メッセージなど)を取得することも容易
  4. インターセプタ
    • axiosはリクエストやレスポンスのインターセプタ機能を提供
      これにより、リクエストやレスポンスの前後に処理を追加したり、ヘッダーを設定したりすることができる
    • 認証トークンの自動付与や共通のエラーハンドリングなどに便利
  5. 機能の拡張性
    • axiosはさまざまな機能を提供しており、キャンセル機能、タイムアウト、CSRF対策、フォームデータの送信など、より高度な要件にも対応
    • axiosはモジュールシステムにも対応しているため、他のライブラリやフレームワークと組み合わせて使用することも可能

【概要】fetchとaxios

fetchは、ブラウザの標準APIで基本的なHTTP通信を扱うために使用される
axiosは、より高度な機能や拡張性を持ちブラウザNode.jsの両方で利用できるライブラリ

fetch

fetchはブラウザで広くサポートされており、基本的なHTTPリクエストやレスポンスの処理に使用されます

axios

サードパーティ製のJavaScriptライブラリであり、fetchよりも高度な機能を提供します。

axiosPromiseベースのAPIを使用し、リクエストやレスポンスの処理を簡単に行えます
axiosは、ブラウザとNode.jsの両方で使用することができ、ブラウザのサポート範囲も広く、さまざまな機能(エラーハンドリング、インターセプタ、キャンセル機能など)を提供しています。

【比較】fetchとaxios リクエスト書き方

fetchでGETリクエスト

fetch("URL")
  .then(response => response.json())
  .then(data => {
    // レスポンスデータの処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

awaitを使用してfetchの処理を書き直した例

async function fetchData() {
  try {
    const response = await fetch("URL");
    const data = await response.json();
    // レスポンスデータの処理
    console.log(data);
  } catch (error) {
    // エラーハンドリング
    console.error(error);
  }
}

axiosでGETリクエスト

import axios from 'axios';

axios.get("URL")
  .then(response => {
    // レスポンスデータの処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

awaitを使用してaxiosの処理を書き直した例

async function fetchData() {
  try {
    const response = await axios.get("URL");
    // レスポンスデータの処理
    console.log(response.data);
  } catch (error) {
    // エラーハンドリング
    console.error(error);
  }
}

fetchでPOSTリクエスト

fetch('URL', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John', age: 30 }),
})
  .then(response => response.json())
  .then(data => {
    // レスポンスデータの処理
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

awaitを使用してfetchの処理を書き直した例

async function postData() {
  try {
    const response = await fetch('URL', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'John', age: 30 }),
    });

    const data = await response.json();
    // レスポンスデータの処理
    console.log(data);
  } catch (error) {
    // エラーハンドリング
    console.error(error);
  }
}

axiosでPOSTリクエスト

import axios from 'axios';

axios.post('https://api.example.com/data', { name: 'John', age: 30 })
  .then(response => {
    // レスポンスデータの処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

awaitを使用してaxiosの処理を書き直した例

async function postData() {
  try {
    const response = await axios.post('https://api.example.com/data', { name: 'John', age: 30 });

    // レスポンスデータの処理
    console.log(response.data);
  } catch (error) {
    // エラーハンドリング
    console.error(error);
  }
}

fetchでPUTリクエスト

fetch('URL', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => {
    // レスポンスデータの処理
    return response.json();
  })
  .then(data => {
    // レスポンスデータの操作
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

axiosでPUTリクエスト

import axios from 'axios';

axios.put('URl', { name: 'John', age: 30 })
  .then(response => {
    // レスポンスデータの処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error(error);
  });

【比較】fetchとaxios 導入の違い

fetchを使う準備

fetchはブラウザの標準的なAPIであり、追加のライブラリやパッケージのインストールは必要ありません。
バックエンド(node.js環境)で使う場合は、インストールが必要

axiosを使う準備

axiosパッケージをプロジェクトに追加する必要があります。
通常はnpmやyarnなどのパッケージマネージャーを使用してインストールします。

npm install axios
import axios from 'axios';

スクリプトの読み込みの場合

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

fetchとaxiosの使い所

fetchが向くケース

フロントで使用する場合には、インストールもimportもなしで使用可能

バックエンド(node.js環境)で使うには、node-fetch等のインストールが必要

わざわざインストールするくらいならaxiosをインストールした方が良さそう

axiosが向くケース

(インストールが必要だとしても)

フロントエンドでもバックエンドでも使え、使いやすい、高機能、シンプル

インストールができる環境であれば、こちらを推奨

さいごに

今回は、なんとなく分かっているけど、
聞かれるとよく分かっていない違いについて
改めて、調べて見ました!

このような使い所の違いを正しく理解することは、後々とても良いと改めて思い直しました。

下記もよろしければご覧ください

PR
PR

コメント

タイトルとURLをコピーしました