useAxios

Demo

Loading: true

Finished: false

Aborted: false

Available in the @vueuse/integrations add-on.

安装

bash

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,
})

类型声明

显示类型声明

typescript

export interface UseAxiosReturn<T, R = AxiosResponse<T>, _D = any> {
  /**
   * Axios 响应
   */
  response: ShallowRef<R | undefined>
  /**
   * Axios 响应数据
   */
  data: Ref<T | undefined>
  /**
   * 表示请求是否已完成
   */
  isFinished: Ref<boolean>
  /**
   * 表示请求是否当前正在加载
   */
  isLoading: Ref<boolean>
  /**
   * 表示请求是否已被取消
   */
  isAborted: Ref<boolean>
  /**
   * 可能发生的任何错误
   */
  error: ShallowRef<unknown | undefined>
  /**
   * 中止当前请求
   */
  abort: (message?: string | undefined) => void
  /**
   * `abort` 的别名
   */
  cancel: (message?: string | undefined) => void
  /**
   * `isAborted` 的别名
   */
  isCanceled: Ref<boolean>
}
export interface StrictUseAxiosReturn<T, R, D> extends UseAxiosReturn<T, R, D> {
  /**
   * 手动调用 axios 请求
   */
  execute: (
    url?: string | AxiosRequestConfig<D>,
    config?: AxiosRequestConfig<D>,
  ) => Promise<StrictUseAxiosReturn<T, R, D>>
}
export interface EasyUseAxiosReturn<T, R, D> extends UseAxiosReturn<T, R, D> {
  /**
   * 手动调用 axios 请求
   */
  execute: (
    url: string,
    config?: AxiosRequestConfig<D>,
  ) => Promise<EasyUseAxiosReturn<T, R, D>>
}
export interface UseAxiosOptions<T = any> {
  /**
   * 当使用 `useAxios` 时，是否自动运行 axios 请求
   */
  immediate?: boolean
  /**
   * 使用 shallowRef。
   *
   * @default true
   */
  shallow?: boolean
  /**
   * 当发起新请求时，中止前一个请求。
   *
   * @default true
   */
  abortPrevious?: boolean
  /**
   * 在捕获错误时的回调。
   */
  onError?: (e: unknown) => void
  /**
   * 在捕获成功时的回调。
   */
  onSuccess?: (data: T) => void
  /**
   * 初始数据
   */
  initialData?: T
  /**
   * 在执行 Promise 之前将状态设置为 initialState。
   */
  resetOnExecute?: boolean
  /**
   * 请求完成时的回调。
   */
  onFinish?: () => void
}
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
  url: string,
  config?: AxiosRequestConfig<D>,
  options?: UseAxiosOptions,
): StrictUseAxiosReturn<T, R, D> & Promise<StrictUseAxiosReturn<T, R, D>>
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
  url: string,
  instance?: AxiosInstance,
  options?: UseAxiosOptions,
): StrictUseAxiosReturn<T, R, D> & Promise<StrictUseAxiosReturn<T, R, D>>
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
  url: string,
  config: AxiosRequestConfig<D>,
  instance: AxiosInstance,
  options?: UseAxiosOptions,
): StrictUseAxiosReturn<T, R, D> & Promise<StrictUseAxiosReturn<T, R, D>>
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
  config?: AxiosRequestConfig<D>,
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
  instance?: AxiosInstance,
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
  config?: AxiosRequestConfig<D>,
  instance?: AxiosInstance,
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>