useFetch
Reactive Fetch API provides the ability to abort requests, intercept requests before they are fired, automatically refetch requests when the url changes, and create your own with predefined options.
Package: @vueuse/core
Category: Network
Usage
import { useFetch } from '@vueuse/core'
const { isFetching, error, data } = useFetch(url)Options
| Option | Type | Default | Description |
|---|---|---|---|
| fetch | typeof window.fetch |
- | Fetch function |
| immediate | boolean |
true | Will automatically run fetch when useFetch is used |
| refetch | MaybeRefOrGetter<boolean> |
false | Will automatically refetch when: |
| initialData | any |
null | Initial data before the request finished |
| timeout | number |
0 | Timeout for abort request after number of millisecond |
| updateDataOnError | boolean |
false | Allow update the data ref when fetch error whenever provided, or mutated in the onFetchError callback |
| beforeFetch | (ctx: BeforeFetchContext) => Promise<Partial<BeforeFetchContext> | void> | Partial<BeforeFetchContext> | void |
- | Will run immediately before the fetch request is dispatched |
| afterFetch | (ctx: AfterFetchContext) => Promise<Partial<AfterFetchContext>> | Partial<AfterFetchContext> |
- | Will run immediately after the fetch request is returned. |
| onFetchError | (ctx: OnFetchErrorContext) => Promise<Partial<OnFetchErrorContext>> | Partial<OnFetchErrorContext> |
- | Will run immediately after the fetch request is returned. |