概要

Axiosは、JavaScript環境で広く利用されているHTTPクライアントライブラリです。本稿では、Vue.jsアプリケーションからAxiosを使用してAJAXリクエストを送信する方法と、開発環境でのAPIプロキシ設定について詳しく解説します。

Axiosのインストール

VueプロジェクトにAxiosを導入するには、パackage.jsonに追加する必要があります。ターミナルで以下のコマンドを実行してください：

npm install axios@0.27.2 --save

VueコンポーネントでのAJAXリクエスト送信

Axiosをインポートし、メソッド内でHTTPリクエストを実行する基本的なパターンを解説します。

実装例

<template>
  <div class="user-list">
    <button @click="loadUsers">ユーザー一覧を取得</button>
    <div v-if="users.length > 0">
      <ul>
        <li v-for="user in users" :key="user.id">{{ user.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  methods: {
    loadUsers() {
      axios
        .get('/api/users')
        .then((response) => {
          this.users = response.data;
        })
        .catch((err) => {
          console.error('データの取得に失敗しました:', err);
        });
    },
  },
};
</script>

上記のコードでは、loadUsersメソッド内でaxios.getを使用してGETリクエストを送信しています。リクエストが成功した場合はレスポンスデータをusersに格納し、错误が発生した場合はcatchブロックでエラーを出力します。

実用的なプロジェクト構成

実際のアプリケーションでは、複数のコンポーネントからAPIを呼び出す必要があります，各コンポーネントで個別にHTTPリクエストを実装すると、コードの重複が発生し、パフォーマンスも低下します，このような場合は、専用のAPIサービス層を作成するか、親コンポーネントでデータを一元管理することが推奨されます。

ライフサイクルフックを活用したデータ取得

Vueコンポーネントのmountedライフサイクルフックを使用すると、コンポーネントの初期化時に自動的にデータを取得できます：

export default {
  methods: {
    fetchHomeData() {
      axios.get('/static/data/home.json')
        .then(this.handleFetchSuccess)
        .catch(this.handleFetchError);
    },
    handleFetchSuccess(response) {
      this.items = response.data.items;
    },
    handleFetchError(error) {
      console.error('エラーが発生しました:', error);
    },
  },
  mounted() {
    this.fetchHomeData();
  },
};

開発環境でのAPIプロキシ設定

開発環境と本番環境で異なるAPIエンドポイントを使用する場合、webpackの設定でプロキシーを構成できます。これにより、本番環境のAPI URLを 开发環境のローカルパスにマッピングできます。

Vue CLIのプロジェクトでは、vue.config.jsファイルを編集します：

'use strict';

const path = require('path');

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {
          '^/api': '/api'
        },
        changeOrigin: true,
      },
    },
  },
};

この設定により、/apiで始まるリクエストは自動的にhttp://localhost:3000に転送されます。pathRewriteオプションを使用することで、URLのパスを柔軟に置換えます。

設定変更後は、開発サーバーを再起動して変更を反映させる必要があります。

動作確認

プロキシ設定が正しく機能している場合、ブラウザの開発者ツールでネットワークリクエストを確認し、期待通りのエンドポイントにリクエストが送信されているかを検証できます。レスポンスが正常に返され、コンソールにエラーがなければ、構成は成功です。

まとめ

Axiosは直感的なAPIを提供しており、Promiseベースで非同期処理を管理できます。Vue.jsと組み合わせることで、サーバーとの通信を効率的に実装できます。また、プロキシ設定を適切に活用することで、開発環境と本番環境の切替をスムーズに行い、開発効率を向上させることが可能です。