Introducción a Fetch y API de Coincap

<img :src="`https://static.coincap.io/assets/icons/${a.symbol.toLowerCase()}@2x.png`" :alt="a.name">

Tuve un problema con la vista, me aparecía el thead en un lado y tbody al otro, como si fueran dos columnas, lo solucioné metiendo todo el contenido del template en un div. Lo escribo por si alguien más le sucediera.

Una de las cosas que más me pareció interesantes de la clase es que está usando al hook created() para hacer la solicitud a la API, lo cual es interesante, porque aquí es donde te das cuenta cómo puedes usar el ciclo de vida del componente

Si examinan el API en Postman sabran por que no les deja obtener las respuestas, lo que tienen que hacer es colocar toda la url directamente en la variable

const url = "https://api.coincap.io/v2/assets?limit=20";

function getAssets() {
  return fetch(`${url}`)
    .then(res => res.json())
    .then(res => res.data);
}

export default {
  getAssets
};

• Agregar documentación de fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• Agregar sitio web de CoinCap: https://coincap.io/
• Agregar sitio web de CoinCap API: https://docs.coincap.io/?version=latest
• Agregar los fallbacks mencionados en la clase para usar cuando necesitemos dar soporte a algún navegador para la función fetch
  https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Usar_promesas

Hola Devs:
-Aca les tengo la implementacion de la API con Async y Await:

-Y les muestro como integre la API al Home con un metodo y usando Async y Await:

-Si desean saber mas, les paso el commit exacto de estos cambios: Click Aqui
Recuerden, #NuncaParesDeAprender 💚

No podía lograr que funcione el fetch en mi caso tenia algun problema con el cross origin o similar, luego de un largo research logré resolverlo así:

const url = "https://api.coincap.io/v2";

function getAssets()
{
  return getRequest("assets?limit=20");
}

function getRequest(method)
{
  return fetch(`${url}/${method}`, {
    mode: "cors",
    method: "GET",
    headers: {
      "Accept": "application/json"
    }
  })
  .then(response => response.json())
  .then((response) => {
    return response.data;
  })
  .catch(error => { console.log('request failed', error); }); // Syntax error: unexpected end of input
}

export default { getAssets };

Tuve un error con los cors o algo así , y lo solucioné de la siguiente manera

function getAssets() {
  return fetch(`${url}/assets?limit=20`, {
    mode: "cors",
    method: "GET",
    headers: {
      Accept: "application/json",
    },
  })
    .then((res) => res.json())
    .then((res) => res.data);
}

Por si a alguien le sale un error mencionando a:
“core-js/modules/es.object.to-string”

Cambien los preset de babel.config.js por esto:

module.exports = {
presets: [["@vue/app", { useBuiltIns: “entry” }]]
};

por si alguien tiene un problema con la imagen del dragon que sale mas grande que las otras , solo añadan esto

img {
  height: 64px;
}

Si deean tener documentada su API, como la de CoinCap, es a través de Postman. Les dejo un enlace de Platzi hacia el Curso de Postman

Parece ser que no existen las imagenes de los bitcoins en la API.

https://static.coincap.io/assets/icons/BTC@2x.png

Cuando intento abrir el link me sale el ‘404’

la mejor explicacion facil y sencilla de como consumir una api con vue.

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

<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>

Código usado:
API:

const url = "https://api.coincap.io/v2";

Imagen:

<img :src="`https://static.coincap.io/assets/icons/${a.symbol.toLowerCase()}@2x.png`"
:alt="a.name" />

Para que no tener problemas con la imagen solo agreguen:

<img
            class="w-16 h-16"
            :src="
              `https://static.coincap.io/assets/icons/${a.symbol.toLowerCase()}@2x.png`
            "
            :alt="a.name"
          />

Para obtener en “tiempo real” los cambios del API, define por ejemplo getData() en los methods:

getData(){
      api.getCryptos().then(data => {
        this.cryptos = data;
      })
    }

Y luego en mounted() define un setInterval() que llame a getData() cada segundo por ejemplo:

mounted(){
    setInterval(()=>{
      this.getData()
      }, 
    1000);
  }

Esto referescara con datos nuevos cada segundo desde coincap.

A mi particularmente me parece mas ordenado y comprensible usar async await y arrow functions. Les dejo como quedaria el codigo utilizando estas features:

const getAssets = async () => {
  try {
    const rawData = await fetch(`${baseUrl}/assets?limit=20`);
    const jsonData = await rawData.json();
    return jsonData;
  } catch (error) {
    console.error("El request a la api no fue correcto");
  }
};

Muy buena esta clase. Pasó algo en la API, una de las imágenes es más grande que las otras jajaja

Si la imagen de la tabla no se muestra, pueden reducir el padding del media query a 10px

@media (min-width: 640px) {
    td,
    th {
        padding: 10px;
        font-size: 1rem;
    }

    th {
        padding: 12px;
    }
}

no entendi como trae la imagen… que tiene que ver ese @x2.png??

Una forma moderna de user fetch con arrow functions:

const url = "https://api.coincap.io/v2";

const getAssets = async () => {
  try {
    const response = await fetch(`${url}/assets?limit=20`);
    const { data } = await response.json();
    return data;
  } catch (error) {
    console.error(`¡Ocurrió un error con el API!: ${error}`);
  }
};

export default {
  getAssets,
};

const url = 'https://api.coincap.io/v2';

const getAssets = () => {
    console.log(`${url}/assets?limit=20`)
    return fetch(`${url}/assets?limit=20`)
    .then(response => response.json())
    .then(data => console.log(data));
}

export default getAssets()

Lo haces ver muy fácil 😂

ayudaa!! me sale este error llevo horas sin solucionarlo 😦

¿Como puedo hacer para que el eslint me resalte los errores o lo que está fallando como a Nacho? en mi caso no lo hace 😦

Leyendo un poco, la sencilla y practica integración de Vue y Axios se ha vuelto una elección común para desarrolladores que requieren incluir consumos HTTP en el flujo de trabajo, sería muy interesante ampliar este tema de consumo de API.

Explicado de una forma concisa y muy clara.

Utilizamos el hook created para hacer la llamada a la API

no entiendo como obtuviste la imagen… busque en coincap y no sale por ningun lado

++ vocación para enseñar

Si como yo, prefieren las comiilas simples, en vez de dobles, asì se configura prettier para ello:

{
    "semi": false,
    "singleQuote": true,
    "arrowParens": "avoid",
    "printWidth": 120
}

Source de la imagen:

:src="https://static.coincap.io/assets/icons/${a.symbol.toLowerCase()}@2x.png"

Gente, si tienen problemas por que no pueden ver los assets cuando hacen click en el componente Home, si tienen addblock instalado, interfiere con la extension de Vue. Se recomienda parar addblock en el sitio que estan visitando

No se si configure algo mal al momento de configurar prettier o lint, pero tuve que hacer esto para que al momento de guardar le hiciera un fix automatico, tienen que ir a settings.json y poner lo siguiente

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]
 }

Espero le sirva a alguien

Peticiones isomórficas 💻

Para hacer peticiones HTTP recomiendo Axios porque es isomórfico. Eso significa que puedes hacer peticiones desde el cliente como desde el servidor.
.
En otras palabras, si has intentado usar fetch con Node.js, verás que la consola te regresa error porque fetch sólo funciona desde el navegador. Para solucionar este problema usé axios porque funciona en ambos lados.
.
Puedes instalarlo localmente con npm, por ejemplo, o usarlo embebido en tu HTML.

estuve probando los codigos de los comentarios me funciono con las “promises” pero luego quise ver porque no me funciono como lo hacia en el video aqui dejo mi codigo para que funcione.

Esta siempre ha sido mi mas grande debilidad, el llamado de API’s 😦

Yo use Axios en vez de Fetch me parece super VueJs y lo flexible que puede llegar hacer.

Por si tienen algun error que tiene que ver con algo como: “TypeError: Object(…) is not a function” y tienen exactamente el mismo codigo de la clase, intenten con reiniciar el server, supongo que tiene que ver con que algunos registros no se actualizan y siguen apareciendo los mismos errores.

Un error al momento de no poder obtener la data de la api es que en then de la promesa no se llama al metodo json correctamente, recuerden poner res.json() no res.json.

const url = 'https://api.coincap.io/v2';

function getAssets() {
  return fetch(`${url}/assets?limit=20`)
    .then((res) => res.json())
    .then((res) => res.data);
}

export default {
  getAssets,
};

buenas tardes por aquí, Nacho tengo ya varios días!
con un error, he revisado todo el código, lo hago tal cual la clase pero nada que soluciono, si me puedes ayudar o alguien pueda. gracias!

platzi-exchange.png

y si el api, no responde por “x” razón!, ¿como mostrar que un msn de error? de no es posible consultar la información en este momento.

B.U.E.N.I.S.I.M.O.

que es eso del query string donde pusiste un limite de 20? es interesante

Aun con el mismo error, quien me ayuda? gracias

No se si es una pregunta sin sentido. Pero estoy haciendo un Ecommerce con Vue. ¿Existe alguna API pública de productos fake que yo pueda consumir para ir probando mi APP?

Mientras hago mi propia API.

1. crear la api.js dentro de src
2. la api se usa en home.vue
3. import api from ‘@/api’
   usar assets en <px-asset-table :assets=“assets”> el cual enviara el array de la api al componente PxAssetsTable con Props.
   4.en la tabla de PxAssetsTable se usa la información enviada para mostrar la tabla

Me encantó la facilidad y simplicidad con la que explicó el Fetch.
Generalmente hacen un “drama” por el fetch… Este profe lo explicó en menos de 10 segundos y quedo más claro que clases de 1 hora.

👌

Cuando los proyectos crecen y hay que hacer muchas llamadas a un servidor, usualmente se utiliza la librería axios para realizar las peticiones HTTP. Es una librería de lo más fácil de utilizar.