useAxios

类别

@集成

导出大小

1.28 kB

包

@vueuse/integrations

最近修改

6 months ago

axios 的封装器。

🌐 Wrapper for axios.

示例

源代码在线运行

Loading: true

Finished: false

Aborted: false

Available in the @vueuse/integrations add-on.

安装

🌐 Install

npm i axios@^1

用法

🌐 Usage

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

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

返回值

🌐 Return Values

属性	类型	描述
data	Ref<T>	响应数据
response	Ref<AxiosResponse>	完整的 axios 响应
error	Ref<unknown>	请求失败时的错误
isFinished	Ref<boolean>	请求已完成（成功或错误）
isLoading	Ref<boolean>	请求正在进行中
isAborted	Ref<boolean>	请求已被中止
abort / cancel	() => void	中止当前请求
execute	(url?, config?) => Promise	执行/重新执行请求

使用 Axios 实例

🌐 With Axios Instance

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

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

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

带配置选项

🌐 With Config Options

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

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

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

手动执行

🌐 Manual Execution

当你不传 url 时，请求不会立即触发：

🌐 When you don't pass a url, the request won't fire immediately:

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

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

execute 函数 url 是可选的 - url2 将替代 url1：

🌐 The execute function url is optional - url2 will replace url1:

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

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

execute 函数只能接受配置：

🌐 The execute function can accept config only:

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

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

等待结果

🌐 Awaiting Results

返回值是可等待的，所以你可以使用 await：

🌐 The return value is thenable, so you can await it:

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

const { data, isFinished, error } = await useAxios('/api/posts')
// data is now populated

或者等待执行函数：

🌐 Or await the execute function:

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

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

选项

🌐 Options

TypeScript

const { data } = useAxios('/api/posts', config, instance, {
  // Execute immediately (default: true if url provided)
  immediate: true,
  // Use shallowRef for data (default: true)
  shallow: true,
  // Abort previous request on new execute (default: true)
  abortPrevious: true,
  // Reset data before executing (default: false)
  resetOnExecute: false,
  // Initial data value
  initialData: [],
  // Callbacks
  onSuccess: data => console.log('Success:', data),
  onError: error => console.error('Error:', error),
  onFinish: () => console.log('Finished'),
})

'use strict'
const { data } = useAxios('/api/posts', config, instance, {
  // Execute immediately (default: true if url provided)
  immediate: true,
  // Use shallowRef for data (default: true)
  shallow: true,
  // Abort previous request on new execute (default: true)
  abortPrevious: true,
  // Reset data before executing (default: false)
  resetOnExecute: false,
  // Initial data value
  initialData: [],
  // Callbacks
  onSuccess: (data) => console.log('Success:', data),
  onError: (error) => console.error('Error:', error),
  onFinish: () => console.log('Finished'),
})