Uso de Fetch API para Interactuar con Servidores HTTP

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:45

Uso de Fetch API para Interactuar con Servidores HTTP

Curso Básico de Vue.js 2

Clase 30 de 38

Clase 30 / 38

Recursos

¿Qué es Fetch y cómo se utiliza?

En el ámbito de la programación web, el uso de APIs para interactuar con servidores y recuperar datos es fundamental. Una de las herramientas más valiosas en este entorno es fetch, una funcionalidad moderna y ampliamente soportada por casi todos los navegadores.

Fetch permite realizar solicitudes HTTP de una manera sencilla y eficiente sin depender de librerías externas. Esto resulta ideal para proyectos que buscan mantener una estructura ligera y eficiente.

¿Cómo funciona Fetch en la API CoinCap?

Para ejemplificar el uso de fetch, vamos a crear una implementación que interactúe con la API de CoinCap. Este servicio permite acceder a diversas características relacionadas con criptomonedas, como obtener listas de activos, leer sus detalles, y más. En nuestro proyecto, crearemos una función que obtenga una lista de criptomonedas utilizando fetch.

// Definimos la URL base de la API
const apiUrl = 'https://api.coincap.io/v2';

// Función para obtener una lista de criptomonedas
async function getAssets() {
  const response = await fetch(`${apiUrl}/assets?limit=20`);
  const data = await response.json();
  return data.data; // Devolveremos los datos de las criptomonedas
}

Este código realiza una solicitud a la API para obtener un máximo de veinte activos. El uso de template strings facilita la construcción dinámica de URLs, permitiendo personalizar las solicitudes según las necesidades del proyecto.

¿Cómo integrar Fetch en componentes Vue?

Una vez obtenidos los datos de la API, el siguiente paso es integrarlos en un componente de Vue.js. Para ello, primero debemos importar la función que accede a la API y luego almacenar los datos en una propiedad del estado del componente.

import { getAssets } from '@/api'; // Importamos la función previamente definida

export default {
  data() {
    return {
      assets: [] // Propiedad para almacenar los activos
    };
  },
  async created() {
    this.assets = await getAssets(); // Asignamos los datos obtenidos al cargar el componente
  }
}

Este patrón permite que, al montarse el componente en la interfaz, automáticamente acceda a la API de CoinCap, obtenga los datos, y los almacene para ser utilizados en la vista.

¿Cómo renderizar datos en una tabla usando Vue?

Para visualizar los datos obtenidos, usaremos directivas como v-for en las plantillas de Vue para renderizar cada criptomoneda en una tabla. Esta técnica es eficiente y permite manejar grandes volúmenes de datos de manera ordenada.

<table>
  <thead>
    <tr>
      <th>Imagen</th>
      <th>Nombre</th>
      <th>Precio</th>
      <th>Rango</th>
      <th>Variación</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="asset in assets" :key="asset.id">
      <td><img :src="`https://api.coincap.io/assets/icons/${asset.symbol.toLowerCase()}@2x.png`" :alt="asset.name" /></td>
      <td>{{ asset.name }}</td>
      <td>${{ asset.priceUsd }}</td>
      <td>{{ asset.rank }}</td>
      <td>{{ asset.changePercent24Hr }}%</td>
    </tr>
  </tbody>
</table>

Con este enfoque, cada criptomoneda se presenta con su imagen, nombre, precio, rango y variación en 24 horas. La estructura es clara y bien organizada, lo que facilita el manejo de los datos en la interfaz.

¿Cómo optimizar el desarrollo con ESLint y Prettier?

Para garantizar un código limpio y mantenible, herramientas como ESLint y Prettier son indispensables. Estas permiten estandarizar el estilo de código y corregir errores automáticamente. Se configura un archivo .prettierrc para establecer las reglas preferidas.

{
  "semi": false,
  "singleQuote": true
}

Con esto, podemos personalizar aspectos como el uso de comillas simples y la eliminación de punto y coma, alineando el proyecto con nuestras preferencias estilísticas.

Al final de esta guía, has aprendido a trabajar de manera eficiente con fetch, integrando datos en componentes Vue, y asegurando calidad de código con herramientas de linters. Sigue explorando y experimentando con estas metodologías para desarrollar aplicaciones robustas y dinámicas. ¡Tu curiosidad y dedicación son tus mejores aliados en el aprendizaje!

Jose Noriega

Hace 6 años

Aporte - formato de números

La visualización de números es un poco compleja, así que decidí agregar 2 funciones en el componente de la tabla para darles formato.

Preview

Código

<template>
  <table>
    <thead>
      <tr class="bg-gray-100 border-b-2 border-gray-400">
        <th></th>
        <th>
          <span>Ranking</span>
        </th>
        <th>Nombre</th>
        <th>Precio</th>
        <th>Cap. de Mercado</th>
        <th>Variación 24hs</th>
        <td class="hidden sm:block"></td>
      </tr>
    </thead>
    <tbody>
      <tr
        class="border-b border-gray-200 hover:bg-gray-100 hover:bg-orange-100"
        v-for="(asset, idx) in assets"
        :key="`asset-${idx}`"
      >
        <img
          :src="`https://static.coincap.io/assets/icons/${asset.symbol.toLowerCase()}@2x.png`"
          :alt="asset.name"
          style="max-height: 65px"
        >
        <td>
          <b>
            #{{ asset.rank }}
          </b>
        </td>
        <td>{{ asset.name }}</td>
        <td>{{ currencyFormater(asset.priceUsd) }}</td>
        <td>{{ numberFormat(asset.marketCapUsd) }}</td>
        <td>{{ numberFormat(asset.changePercent24Hr) }}</td>
        <td class="hidden sm:block"></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'PxAssetsTable',
  props: {
    assets: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    currencyFormater(val) {
      return Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' }).format(val);
    },
    numberFormat(val) {
      if (val) {
        return parseFloat(val).toLocaleString();
      }
      return val;
    },
  },
};
</script>

fidel angel ochoa

Hace 5 años

pasa algo muy raro con tu comentario, al abrirlo en una ventana solo apararece el codigo muy raro.![](

l) no tengo idea por que suceda, lo raro que con otros comentarios no me sucede.

Jose Noriega

Hace 5 años

Desde que entré a Platzi master mi cuenta está muy rara jaja

Bug de platzi :/

Comentarios (70)70 comentarios

Nicolás Danilo Peña Fuentes

Hace 7 años

Héctor Tello

Juan Esteban Galvis

Erik Antillanca

Kevin Parra Lopez

Javier Arratia Romero

Javier Silva Avendaño

Carlos Eduardo Gomez García

Ricardo Celis

Profesor

Miguel Segura

Wandy Rafael Santana Evangelista

Joel Andres Bonilla Tellez

Karin Centenaro

Hace 4 años

José Sebastián Garcia

Alejandro Brand

Luis Angel Murrugarra Astolingon

Guillermo Ramirez

Luciano Cavallo

Matias Niz

Pedro Perafán Carrasco

Jose Maria Lopez Pacheco

Abner Batz

Emmanuel Rodríguez

Eden Gomez Gress

jonathan sanchez

Nahuel Olivera

Jimmy Buriticá Londoño

Federico Walovnik

Gonzalo Pimentel

Diego Cucaresse

Rafael Gibrán Amparán Durán

Sergio Bernal

Jorge Israel Lombardero Juarez

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Uso de Fetch API para Interactuar con Servidores HTTP