# useAxios

Use Axios With Composition API Easily.

# Install

# Vue 2 with @vue/composition-api
yarn add @vue/composition-api @vueblocks/vue-use-axios -S
or
npm i @vue/composition-api @vueblocks/vue-use-axios -S

# Vue 3
yarn add @vueblocks/vue-use-axios -S
or
npm i @vueblocks/vue-use-axios -S

1
2
3
4
5
6
7
8
9

# Example

Fetch Bitcoin Price every 20 seconds

# Usage

useAxios is a wrapper of Axios

import { useAxios } from '@vueblocks/vue-use-axios'

export default {
  ...
  setup () {
    const url = 'https://api.coindesk.com/v1/bpi/currentprice.json'

    const { refetch, data } = useAxios(url)
    
    const bitcoin = ref(data)

    const fetchBitcoinRate = () => {
      setInterval(() => {
        refetch()
      }, 20000)
    }

    onMounted(() => {
      fetchBitcoinRate()
    })

    return {
      bitcoin
    }
  }
  ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Typing

interface IAxiosOptions {
    debounce?: number;
    throttle?: number;
}
declare const useAxios: (url: string, config?: AxiosRequestConfig | undefined, options?: IAxiosOptions | undefined) => {
    refetch: () => void;
    cancel: (message?: string | undefined) => void;
    response: Ref<any>;
    data: Ref<any>;
    finished: Ref<boolean>;
    canceled: Ref<boolean>;
    error: Ref<any>;
};

1
2
3
4
5
6
7
8
9
10
11
12
13

← Namespacing