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

2024/11/08に公開
TypeScript
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に表示しています。

 ポイント解説immediate: falseの利用

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

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

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

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

準備

実装方法

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

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

ポイント解説

まとめ

Discussion
