Vue3+vite での Axios の設定と使用方法

Vue3 で Axios を使用するには、次の手順で設定して使用できます。

1. Axios をインストールします。

npm install axios

2. プロジェクトにファイルを作成しapi.js、Axios と Vue をインポートします。

import axios from 'axios'
import { reactive } from 'vue'

3. リアクティブ オブジェクトを作成し、Axios をインスタンス化します。

const state = reactive({
  data: null,
  loading: false,
  error: null
})

const http = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

4. api.jsファイル内にHTTP リクエストを送信するメソッドを作成します。

const fetchData = async () => {
  state.loading = true
  try {
    const response = await http.get('/data')
    state.data = response.data
  } catch (error) {
    state.error = error
  } finally {
    state.loading = false
  }
}

5. コンポーネント内のapi.jsメソッドをインポートして呼び出します。

import { fetchData } from '@/api'

export default {
  name: 'MyComponent',
  async created() {
    await fetchData()
  }
}

6. テンプレートでリアクティブ データを使用します。

<template>
  <div v-if="state.loading">Loading...</div>
  <div v-else-if="state.error">{
   
   { state.error.message }}</div>
  <div v-else>{
   
   { state.data }}</div>
</template>

<script>
import { state } from '@/api'

export default {
  name: 'MyComponent',
  setup() {
    return { state }
  }
}
</script>

以上がVue3でのAxiosの設定方法と使い方です。