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

1import axios from 'axios'
2import { useRequestInterceptor } from '@eas0nchan/vuse-axios'
3
4axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'
5
6// this axios request interceptor is synchronous.
7// in order to inject some axios request config:
8// AbortController.signal, UseRequestOptions.axiosRequestConfig.
9useRequestInterceptor(axios)
10
11interface Post {
12  id: number
13  userId: number
14  title: string
15  body: string
16}
17
18// centralized manage your apis.
19// using axios directly without complex wrap.
20export function getPost(id: number) {
21  return axios.get<Post>(`/posts/${id}`)
22}

Demo.vue

1import { useRequest } from '@eas0nchan/vuse-axios'
2import { getPost } from '@/apis'
3
4const { data, error, isLoading, execute } = useRequest(getPost)
5// the getPost parameters can be passed by execute
6execute(1)
7// or
8useRequest(() => getPost(1))
9execute()

Try on StackBlitz ⚡

Interface

1interface UseRequestOptions<T, Args> {
2  /**
3   * auto cancel last unfinished request when you trigger same request again
4   */
5  autoCancelLastReq?: boolean
6
7  /**
8   * auto cancel request when component is unmounted
9   */
10  autoCancelOnUnmounted?: boolean
11
12  /**
13   * inject some axios request config
14   */
15  axiosRequestConfig?: AxiosRequestConfig
16
17  /**
18   * disabled when loading
19   */
20  disabledOnLoading?: boolean
21
22  /**
23   * execute immediately
24   *
25   * @default false
26   */
27  immediate?: boolean
28
29  /**
30   * minimum loading duration
31   */
32  minLoading?: number
33
34  /**
35   * max retry times when request failed
36   */
37  retry?: number
38
39  /**
40   * watch isLoading, is synchronous
41   */
42  watchLoading?: (value: boolean) => void
43
44  /**
45   * dome something before request, you can call cancel function in this hook
46   */
47  onBefore?: (params: Args) => void
48
49  /**
50   * do something on success
51   */
52  onSuccess?: (data: T, response: AxiosResponse<T>, params: Args) => void
53
54  /**
55   * do something on error
56   */
57  onError?: (error: AxiosError, params: Args) => void
58
59  /**
60   * do something on finish
61   */
62  onFinish?: (data: T | undefined, error: AxiosError | undefined, params: Args) => void
63}
64
65declare function useRequestInterceptor(instance: AxiosInstance): AxiosInstance
66
67declare function useRequest<T, Args extends any[]>(request: (...args: Args) => AxiosPromise<T>, options?: UseRequestOptions<T>): {
68  response: ShallowRef<AxiosResponse<T> | undefined>
69  data: ShallowRef<T | undefined>
70  error: ShallowRef<AxiosError | undefined>
71  isLoading: ComputedRef<boolean>
72  isFinished: Ref<boolean>
73  isCancel: Ref<boolean>
74
75  /**
76   * trigger request
77   */
78  execute: (...args: Args) => Promise<void>
79
80  /**
81   * cancel request (need call useRequestInterceptor,
82   * in order inject AbortController.signal to axios request config)
83   */
84  cancel: () => void
85
86  /**
87   * clear states, set to undefined
88   */
89  clear: () => void
90}