Vue 3 Obtiene datos y consume API REST

 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 fetchAPI 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 --versioncomando, 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.vuearchivo 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 refde vue3, luego definimos la setupfunción. En la setupfunción del componente, definimos dos variables reactivos data, loadingy errory una fetchDatafunción para traer los datos desde el servidor.

Llamamos al fetchDatamétodo en el onMountedgancho para invocarlo cuando el componente está montado en el DOM.

Devolvemos las variables data, loadingy errordel setupmé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 fetchDatafunció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 titley bodyde cada publicación.

Importando nuestro componente de publicaciones de Vue 3

A continuación, necesitamos importar nuestro componente Publicaciones desde el Posts.vuearchivo en nuestro App.vuearchivo 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.vuearchivo y lo declaramos dentro del componentsobjeto 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.