useAxios

axios のラッパー。

インストール

npm i axios@^1

使用法

import { useAxios } from '@vueuse/integrations/useAxios'

const { data, isFinished } = useAxios('/api/posts')

または axios のインスタンスを使用する

import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
})

const { data, isFinished } = useAxios('/posts', instance)

設定オプションを使用して axios のインスタンスを使用する

import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
})

const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance)

url を渡さない場合、デフォルト値は {immediate: false} です

import { useAxios } from '@vueuse/integrations/useAxios'

const { execute } = useAxios()
execute(url)

ここでの execute 関数の url はオプションであり、url2 は url1 を置き換えます。

import { useAxios } from '@vueuse/integrations/useAxios'

const { execute } = useAxios(url1, {}, { immediate: false })
execute(url2)

execute 関数は config のみを受け取ることができます。

import { useAxios } from '@vueuse/integrations/useAxios'

const { execute } = useAxios(url1, { method: 'GET' }, { immediate: false })
execute({ params: { key: 1 } })
execute({ params: { key: 2 } })

execute 関数はネットワークリクエストの結果で解決されます。

import { useAxios } from '@vueuse/integrations/useAxios'

const { execute } = useAxios()
const result = await execute(url)

immediate オプションを使用して axios のインスタンスを使用する

import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
})

const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance, {
  immediate: false,
})