@eas0nchan/vuse-axios v0.2.0

Introduction

use-axios for Vue3.

Features

• Reactive states of request.
• Easy integration without complex config or wrapper.
• Support retry when request failed.
• Handle request result by hooks.
• Support cancel request.
  • Not really for cancel request (maybe the request has sent to server), just for the request callback can not be executed.
  • Support auto cancel request when component is unmounted.
  • Support auto cancel the last unfinished request when you trigger the same request again (in order to ensure that the latest data can be obtained).
• Support set minimum loading time to improve UX (too fast may cause flickering).

Installation

npm i @eas0nchan/vuse-axios

Usage

apis/index.ts

import axios from 'axios'
import { useRequestInterceptor } from '@eas0nchan/vuse-axios'

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

// this axios request interceptor is synchronous.
// in order to inject some axios request config:
// AbortController.signal, UseRequestOptions.axiosRequestConfig.
useRequestInterceptor(axios)

interface Post {
  id: number
  userId: number
  title: string
  body: string
}

// centralized manage your apis.
// using axios directly without complex wrap.
export function getPost(id: number) {
  return axios.get<Post>(`/posts/${id}`)
}

Demo.vue

import { useRequest } from '@eas0nchan/vuse-axios'
import { getPost } from '@/apis'

const { data, error, isLoading, execute } = useRequest(getPost)
// the getPost parameters can be passed by execute
execute(1)
// or
useRequest(() => getPost(1))
execute()

Try on StackBlitz ⚡

Interface

interface UseRequestOptions<T, Args> {
  /**
   * auto cancel last unfinished request when you trigger same request again
   */
  autoCancelLastReq?: boolean

  /**
   * auto cancel request when component is unmounted
   */
  autoCancelOnUnmounted?: boolean

  /**
   * inject some axios request config
   */
  axiosRequestConfig?: AxiosRequestConfig

  /**
   * disabled when loading
   */
  disabledOnLoading?: boolean

  /**
   * execute immediately
   *
   * @default false
   */
  immediate?: boolean

  /**
   * minimum loading duration
   */
  minLoading?: number

  /**
   * max retry times when request failed
   */
  retry?: number

  /**
   * watch isLoading, is synchronous
   */
  watchLoading?: (value: boolean) => void

  /**
   * dome something before request, you can call cancel function in this hook
   */
  onBefore?: (params: Args) => void

  /**
   * do something on success
   */
  onSuccess?: (data: T, response: AxiosResponse<T>, params: Args) => void

  /**
   * do something on error
   */
  onError?: (error: AxiosError, params: Args) => void

  /**
   * do something on finish
   */
  onFinish?: (data: T | undefined, error: AxiosError | undefined, params: Args) => void
}

declare function useRequestInterceptor(instance: AxiosInstance): AxiosInstance

declare function useRequest<T, Args extends any[]>(request: (...args: Args) => AxiosPromise<T>, options?: UseRequestOptions<T>): {
  response: ShallowRef<AxiosResponse<T> | undefined>
  data: ShallowRef<T | undefined>
  error: ShallowRef<AxiosError | undefined>
  isLoading: ComputedRef<boolean>
  isFinished: Ref<boolean>
  isCancel: Ref<boolean>

  /**
   * trigger request
   */
  execute: (...args: Args) => Promise<void>

  /**
   * cancel request (need call useRequestInterceptor,
   * in order inject AbortController.signal to axios request config)
   */
  cancel: () => void

  /**
   * clear states, set to undefined
   */
  clear: () => void
}