【解説】JavaScriptライブラリ「axios」の使い方

【解説】JavaScriptライブラリ「axios」の使い方

JavaScriptライブラリ「axios」について、下記の順に解説していきます。

順に見ていきましょう。

「axios」とは？

「axios」はHTTPリクエストを簡単に扱えるJavaScriptライブラリのことです。

fetchより使いやすいものとなりますね。

2024年11月30日 【解説】JavaScriptのFetch APIの使い方

「axios」を使うための準備

CDNから読み込む場合

htmlファイルに下記読み込みタグを記述。

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

npmを使用する場合

npm install axios

npmを使用するときはインポートが必要です。（古い環境ではrequireの場合も）

import axios from 'axios';

const axios = require('axios');

「axios」の基本的な使い方

「axios」を使う場合の、基本的な書き方がこちら↓

axios.関数名('ここにURLを記述')
  .then(response => 処理を書く)
  .catch(error => 処理を書く);

「axios」は非同期関数です。
そのためthenやcatchを使います。

今回は例としてgetメソッドを使い、ポケモンAPIからピカチュウの名前を取得してみました↓

axios.get('https://pokeapi.co/api/v2/pokemon/pikachu/')
  .then(response => console.log(response.data.name)) // pikachu
  .catch(error => console.error(error));

こんな感じで簡単にHTTP通信を行い、データを取得することが可能です。

async／awatiの書き方だと

ちなみにasync／awaitを使った書き方だとこちらになります↓

async function testAxios() {
  try {
    const response = await axios.get('https://pokeapi.co/api/v2/pokemon/pikachu/');
    console.log(response.data.name); // pikachu
  } catch (error) {
    console.error(error);
  }
}
  
testAxios();

2024年11月23日 【解説】JavaScriptのPromise｜async／awaitの使い方

「axios」で使う関数

「axios」で使う関数は主に下記らがあります。

【解説】JavaScriptライブラリ「axios」／「fetch」との違い

HTTPリクエストを処理するときに使えるもので「fetch」がありますよね。

どちらが良いのか、どう違うのか疑問になるかと。

結論的には「axios」のほうが便利です。

理由は下記の違いがあるため。

順に見ていきましょう。

違い①：インストール方法

• 「fetch」⇒標準に組み込まれているため、追加インストール不要です。
• 「axios」⇒追加インストールが必要です。

ここだけみると「fetch」のほうがすぐ使えるため、便利っぽいと見えるかもしれません。

違い②：データ変換処理

「fetch」だと.json()を使い、データをJSON形式に変換するためのコード記述が必要になります。

fetch('')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

「axios」だと自動的にJSONで解析してくれるので、わざわざ変換する必要がありません。

axios.get('')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

「axios」のほうがコードが簡潔になりましたね。

違い③：エラーハンドリング

「fetch」はHTTPステータスコードが失敗（404や500）でも、エラーをスローしません。

そのため手動で「response.ok」を使い、成功可否を確認する必要があります。

fetch('')
  .then(response => {
    if (!response.ok) {
      throw new Error(`エラーが発生しました`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

「axios」では200番以外のステータスコードがくると、自動的にエラーをキャッチしてくれます。

axios.get('')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

これもみてわかるとおり、「axios」のほうがコードが簡潔になりましたね。

「fetch」「axios」どちらを使うべきか

結論としてはプロジェクトの要件次第なきがします。

ライブラリに依存したくないときは「fetch」ですし、JSONデータを頻繁に使うのであれば「axios」のほうが簡潔にかけますし。

その時その時で必要に応じて使い分けが良いかと。

【解説】JavaScriptライブラリ「axios」の使い方：まとめ

ジト

「axios」を使う時はためしてみてね！