Cómo usar la API Fetch en Vue 3, usar composables y VueUse
La API Fetch es una forma moderna de realizar peticiones HTTP en JavaScript, y en Vue 3 podemos utilizarla de manera sencilla gracias a los composables y la librería VueUse.
1. Instalar VueUse
Para empezar a utilizar VueUse, primero debemos instalarlo en nuestro proyecto de Vue. Esto lo podemos hacer utilizando el gestor de paquetes npm:
npm install @vueuse/core
2. Crear un composable para la API Fetch
Una vez instalada la librería VueUse, podemos crear un composable que nos permita utilizar la API Fetch de una manera más integrada con Vue 3. Para ello, creamos un archivo `useFetch.js`:
import { ref } from 'vue';
import { useFetch } from '@vueuse/core';
export default function useFetch(url) {
const data = ref(null);
const { execute, isLoading } = useFetch(url, {
onResolve: (response) => {
data.value = response.json();
}
});
return { data, execute, isLoading };
}
3. Utilizar el composable en un componente de Vue
Con nuestro composable creado, ahora podemos utilizarlo en cualquier componente de Vue para realizar una petición HTTP utilizando la API Fetch. Por ejemplo, en un componente `MyComponent.vue`:
import useFetch from './useFetch';
export default {
setup() {
const { data, execute, isLoading } = useFetch('https://api.example.com/data');
const fetchData = () => {
execute();
};
return { data, isLoading, fetchData };
}
}
4. ¡Listo para usar la API Fetch en Vue 3!
Una vez que hemos configurado nuestro composable para la API Fetch, podemos utilizarlo en cualquier componente de Vue para realizar peticiones HTTP de forma sencilla y reactiva. ¡Así que no dudes en incorporarla a tu proyecto y aprovechar todas sus ventajas!
como seria para insetar datos en una bd real con fetch utiliazando post?
Para la próxima hacerle zoom al código, muy dificultoso seguirlo desde una tablet. Sigan con Vue y Nuxt, se agradece.
Muchísimas gracias por la información, Vue3 esta creciendo fuerte
lo estaba esperando …. gracias por esta informacion !!!