vue-axios-hooks v0.1.6

vue-axios-hooks

Vue3 hooks for axios

Installation

npm install axios vue-axios-hooks

Quick Start

<script>
import useAxios from 'vue-axios-hooks'

export default {
  setup () {
    const { refetch, loading, data, cancel, error } = useAxios({
      url: 'https://reqres.in/api/users?delay=1'
    })

    refetch()

    return {
      loading,
      refetch,
      data,
      cancel,
      error
    }
  }
}
</script>

Configuration

<!-- App.vue -->
<script>
import Axios from 'axios'
import { useConfigure } from 'vue-axios-hooks'

export default {
  setup () {
    const axios = Axios.create({
      baseURL: 'https://reqres.in/api'
    })

    axios.interceptors.response.use(
      (res) => {
        return res.data
      }
    )
    useConfigure({ axios })
  }
}
</script>

Debounce

If options.debounce is set, requests except for the last one within the debounce interval will be dropped.

const { refetch, loading, data } = useAxios({
  url: 'https://reqres.in/api/users?delay=1'
}, {
  debounce: 300
})

Throttle

If options.throttle is set, the request will be triggered once maximum within the throttle interval.

const { refetch, loading, data } = useAxios({
  url: 'https://reqres.in/api/users?delay=1'
}, {
  throttle: 1000
})

debounce and throttle can only be set to one

License

MIT