Async State Management in Composables

Snippet

Async State Management in Composables

Managing asynchronous requests inside a composable allows you to keep your components clean while handling loading and error states reactively across your entire application.

snippet.js
javascript
import { ref } from 'vue';
 
export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
 
  const doFetch = async () => {
    try {
      const res = await fetch(url);
      data.value = await res.json();
    } catch (err) {
      error.value = err;
    }
  };
 
  doFetch();
  return { data, error };
}

vue

Breakdown

const data = ref(null);

Create a reactive holder for the eventual API response.

try { ... } catch (err) { ... }

Standard JavaScript error handling applied to reactive state updates.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Async State Management in Composables

Related