🙆‍♀️

Vue 3 + Composition API + useAxiosで動的なAPIリクエストを実現する方法

に公開
TypeScript
Vue 3
VueUse
tech

この記事では、Vue 3のComposition APIと@vueuse/integrationsのuseAxiosを使用して、動的なURLやパラメーターでAPIリクエストを行う方法を紹介します。特にexecuteメソッドを使った柔軟なリクエストの実装方法に注目します。

準備

まず、VueUseからuseAxiosをインポートします。これにより、AxiosをVueのComposition APIと統合して、簡単にHTTPリクエストを管理できるようになります。

# VueUseのインストール（まだインストールしていない場合）
npm install @vueuse/core
npm install axios

実装方法

以下のコードでは、script setupを使って、ユーザーが入力したURLやパラメーターでリクエストを動的に実行できるようにしています。

1. useAxiosの設定とexecuteメソッドの使用

まずは、useAxiosのセットアップを行います。immediate: falseを指定することで、インスタンス作成時の自動リクエストを防ぎ、必要なときにexecuteを呼び出してリクエストを実行します。

<script setup lang="ts">
import { ref } from 'vue';
import { useAxios } from '@vueuse/integrations/useAxios';

// 動的に変更するURLとパラメーター用のrefを定義
const inputUrl = ref<string>('/api/default-endpoint');
const inputParam = ref<string>('');

// useAxiosのセットアップ
const { execute, data, isFinished, loading, error } = useAxios(undefined, { method: 'GET' }, { immediate: false });

// リクエストを実行する関数
const fetchData = () => {
  execute(inputUrl.value, {
    params: { query: inputParam.value }
  });
};
</script>
  • inputUrlとinputParam: URLとパラメーターを動的に管理するためのrefです。
  • execute: ここでURLとパラメーターを渡してリクエストを実行します。executeに渡す値を変更することで、異なるエンドポイントやパラメーターでリクエストが可能です。
  • immediate: false: インスタンス作成時にリクエストが実行されるのを防ぎます。

2. テンプレートでリクエストをコントロール

以下のテンプレートコードでは、ユーザーが入力したURLやパラメーターを使ってAPIリクエストを実行し、その結果を表示しています。

<template>
  <div>
    <input v-model="inputUrl" placeholder="Enter URL" />
    <input v-model="inputParam" placeholder="Enter Query Parameter" />
    <button @click="fetchData">Fetch Data</button>

    <div v-if="loading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-if="isFinished && data">
      <h3>Fetched Data:</h3>
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>
  • URL入力フィールド: 動的にリクエストするURLを指定できます。
  • パラメーター入力フィールド: クエリパラメーターを動的に設定できます。
  • 実行ボタン: ボタンをクリックするとfetchData関数が呼ばれ、入力内容に基づいてリクエストが実行されます。
  • 結果の表示: data、loading、error、isFinishedなどを使用して、リクエストの状態や結果をUIに表示しています。

ポイント解説

  1. immediate: falseの利用
    immediate: falseオプションを使用することで、最初のリクエストを自動実行せず、executeで制御します。必要なときだけリクエストを発行できるため、ユーザーが入力したURLやパラメーターを使用してリクエストを動的に変更できます。

  2. executeメソッドによる動的リクエスト
    executeメソッドを使うと、動的にリクエストのURLやパラメーターを指定できます。例えば、URLやパラメーターをリアルタイムで変更して、新しいリクエストを実行することが可能です。

  3. レスポンスの状態管理
    data、loading、error、isFinishedを活用し、リクエストの状態をUIに反映することで、ユーザーにわかりやすいインターフェースを提供します。

まとめ

この実装では、useAxiosのexecuteメソッドを活用することで、ユーザー入力に応じた動的なAPIリクエストが可能になります。immediate: falseとexecuteを組み合わせることで、柔軟かつ効率的にリクエストを制御できるため、さまざまなAPIインタラクションに対応できます。

この方法を使うことで、Vue 3とAxiosを活用した高度なAPIリクエスト機能を容易に実装できるようになります。

Discussion