Axiosを使用したGETリクエストの方法：初心者ガイド

Webアプリを構築する際、APIからデータを取得することは一般的なタスクです。JavaScriptデベロッパーはしばしば組み込みのfetch()メソッドから始めますが、JSONレスポンスの手動解析や煩雑なエラーハンドリングなどの問題にすぐに直面します。Axiosは自動JSONパース、より良いエラーハンドリング、リクエストのカスタマイズの容易さを提供することで、特にGETリクエストにおいてHTTPリクエストの作成を簡素化します。

Axiosとは？

Axiosはブラウザおよびnode.jsでHTTPリクエストを行うための人気のあるJavaScriptライブラリです。組み込みのfetch()とは異なり、Axiosは自動的にJSONレスポンスを解析し、HTTPエラーを一貫して扱い、キャンセルやタイムアウトなどの便利なリクエスト機能をサポートしています。

Axiosのインストール

npmやYarnを使用してAxiosをインストールするか、CDN経由で含めることができます：

npm

npm install axios

Yarn

yarn add axios

CDN

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

プロジェクトにAxiosをインポートします：

import axios from 'axios';
// または
const axios = require('axios');

基本的なGETリクエストの作成

基本的なGETリクエストを簡単に作成する方法は次のとおりです：

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Axiosはフェッチと自動的なJSONレスポンスの解析を処理します。

レスポンスデータの処理

Axiosでは、追加の解析ステップは必要ありません。返されたレスポンスには、すでにJavaScriptオブジェクト形式のdataプロパティが含まれています：

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log(res.data.title);  // レスポンスからタイトルを出力
  });

Axios GETリクエストでのエラーハンドリング

Axiosは直感的にエラーを処理し、HTTPとネットワークの両方の問題をキャッチします。これらのエラーを明確に管理する方法は次のとおりです：

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('HTTPエラー:', error.response.status);
    } else if (error.request) {
      console.error('レスポンスなし:', error.request);
    } else {
      console.error('リクエスト設定エラー:', error.message);
    }
  });

Axios GETリクエストでのクエリパラメータの使用

Axiosでクエリパラメータを送信するのは簡単です：

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: { userId: 1 }
})
.then(response => {
  console.log(response.data);
});

Axiosは自動的にこれらのパラメータをクエリ文字列に変換します。

AxiosでのAsync/Awaitの使用

Async/Await構文を使用すると、Axiosリクエストがより読みやすくなります：

async function fetchPosts() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('エラー:', error);
  }
}

fetchPosts();

これによりコードがシンプルで明確になります。

Axios GETリクエストでのヘッダーの設定

ヘッダー（認証トークンなど）を簡単に設定できます：

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN'
  }
})
.then(response => {
  console.log(response.data);
});

これにより、カスタムヘッダーを簡単に含めることができます。

Axiosを使用した複数のGETリクエストの作成

同時に複数のリクエストが必要な場合、Axiosはそれを簡素化します：

const request1 = axios.get('https://jsonplaceholder.typicode.com/posts');
const request2 = axios.get('https://jsonplaceholder.typicode.com/users');

axios.all([request1, request2])
  .then(([posts, users]) => {
    console.log('投稿:', posts.data);
    console.log('ユーザー:', users.data);
  })
  .catch(error => {
    console.error('エラー:', error);
  });

Axiosの同時リクエスト処理により、コードの効率が維持されます。

結論

AxiosはJavaScriptでのHTTP GETリクエストを簡素化し、JSONパースや複雑なエラーハンドリングなどの面倒なタスクを排除します。シンプルなリクエスト、クエリパラメータ、カスタムヘッダーの使用、複数の同時リクエストの作成など、Axiosはより明確で保守性の高いコードの作成に役立ちます。

よくある質問