A lo largo de este tutorial, aprenderá a usar la API de recuperación de JavaScript en su aplicación Vue 3 para obtener datos y consumir una API REST.
Veremos por ejemplo cómo enviar solicitudes HTTP a un servidor REST para recuperar datos en su aplicación Vue 3.
Vue 3 aún no se lanzó para producción, pero se espera que se lance pronto.
Aprenderemos cómo generar una nueva aplicación Vue 3 usando la última versión de Vue CLI v4.
La mayoría de las veces, deberá obtener datos o consumir una API REST en su aplicación de front-end. Tenemos bibliotecas integradas y externas para enviar solicitudes HTTP a servidores como la API Fetch y el cliente http de Axios.
En este tutorial, aprenderemos a usar la fetch
API en nuestra aplicación Vue 3 paso a paso.
Prerrequisitos
Para seguir este tutorial, necesitará:
- El conocimiento de HTML, CSS, JavaScript y Vue
- Node.js instalado en su máquina,
Paso 1: instalación de Vue CLI 4
Comencemos instalando Vue CLI 4 en nuestra máquina de desarrollo local.
Abra una interfaz de línea de comandos y ejecute el siguiente comando:
$ npm i -g vue-cli
Después de instalar CLI. Si ejecuta el vue --version
comando, debería obtener el siguiente resultado:
@vue/cli 4.5.2
Paso 2: creación de un nuevo proyecto de Vue 3
Ahora, si tiene Vue CLI 4 instalado, puede crear un proyecto de Vue 3 usando el siguiente comando:
$ vue create vue3fetchdatademo
Se le pedirá el siguiente código:
? Please pick a preset:
Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
A continuación, debe seleccionar la segunda opción Default (Vue 3 Preview) ([Vue 3] babel, eslint)
para decirle a la CLI que genere un nuevo proyecto basado en Vue 3.
A continuación, presione Return
.
Se generarán los archivos de su proyecto y las dependencias se instalarán automáticamente desde npm.
Después de la instalación, vaya a la carpeta del proyecto e inicie el servidor de desarrollo de la siguiente manera:
$ cd vue3fetchdatademo
$ npm run serve
El servidor de desarrollo se ejecutará en localhost: 8080 :
Paso 3: creación de un componente de Vue 3
A continuación, creemos un componente de Vue 3 y usémoslo en nuestra aplicación.
En la src/components/
carpeta, agregue un nuevo Posts.vue
archivo con el siguiente código:
<template>
</template>
<script>
import { ref, computed } from "vue";
export default {
name: 'Posts',
props: {
},
setup() {
const data = ref(null);
const loading = ref(true);
const error = ref(null);
function fetchData() {
// Will be implemented next
}
onMounted(() => {
fetchData();
});
return {
data,
loading,
error
};
}
}
</script>
Primero importamos ref
de vue3, luego definimos la setup
función. En la setup
función del componente, definimos dos variables reactivos data
, loading
y error
y una fetchData
función para traer los datos desde el servidor.
Llamamos al fetchData
método en el onMounted
gancho para invocarlo cuando el componente está montado en el DOM.
Devolvemos las variables data
, loading
y error
del setup
método para que estén disponibles en la plantilla del componente.
Si la instalación devuelve un objeto, se puede acceder a las propiedades del objeto en la plantilla del componente. Los documentos de Vue 3
A continuación, implementemos la fetchData
función de la siguiente manera:
function fetchData() {
loading.value = true;
// I prefer to use fetch
// you can use use axios as an alternative
return fetch('http://jsonplaceholder.typicode.com/posts', {
method: 'get',
headers: {
'content-type': 'application/json'
}
})
.then(res => {
// a non-200 response code
if (!res.ok) {
// create error instance with HTTP status text
const error = new Error(res.statusText);
error.json = res.json();
throw error;
}
return res.json();
})
.then(json => {
// set the response data
data.value = json.data;
})
.catch(err => {
error.value = err;
// In case a custom JSON error response was provided
if (err.json) {
return err.json.then(json => {
// set the JSON response message
error.value.message = json.message;
});
}
})
.then(() => {
loading.value = false;
});
}
Visualización de nuestros datos obtenidos
A continuación, debemos agregar el código de la plantilla dentro de la <template></template>
etiqueta:
<template>
<h1>Vue 3 and Fetch Example</h1>
<template>
<ul v-if="!loading && data && data.length">
<li v-for="post of data">
<p><strong></strong></p>
<p></p>
</li>
</ul>
<p v-if="loading">
Still loading..
</p>
<p v-if="error">
</p>
</template>
Usamos iterar sobre la matriz de datos y mostramos el title
y body
de cada publicación.
Importando nuestro componente de publicaciones de Vue 3
A continuación, necesitamos importar nuestro componente Publicaciones desde el Posts.vue
archivo en nuestro App.vue
archivo de la siguiente manera:
<template>
<div id="app">
<Posts />
</div>
</template>
<script>
import Posts from './components/Posts.vue'
export default {
name: 'App',
components: {
Posts
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Simplemente importamos el componente del ./components/Posts.vue
archivo y lo declaramos dentro del components
objeto y luego lo incluimos en la plantilla a través de su nombre de etiqueta <Posts />
.
Conclusión
Aprendimos sobre la obtención de datos de un servidor de API REST usando Vue 3 y la API de Fetch.
0 Comentarios
Dejanos tu comentario para seguir mejorando!