useFetch: Async Data Composable
data, loading, error refs, fetch on mount, refetch function, AbortController cleanup.
The useFetch Goal
Async data fetching repeats everywhere: loading flags, error handling, the request itself. useFetch bundles this into one reusable composable returning data, loading, and error.
The Three Reactive Refs
Start with three refs that describe any async request state.
import { ref } from "vue";
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
}All lessons in this course
- What Makes a Good Composable
- useCounter: A Simple Composable
- useFetch: Async Data Composable
- VueUse: The Composable Library