No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Introducci贸n a Fetch y API de Coincap

30/38
Recursos

Aportes 52

Preguntas 18

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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:
鈥渃ore-js/modules/es.object.to-string鈥

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

module.exports = {
presets: [["@vue/app", { useBuiltIns: 鈥渆ntry鈥 }]]
};

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.

<h1>Aporte - formato de n煤meros</h1>

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


<h1>C贸digo</h1>
<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 鈥渢iempo 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 鈥減romises鈥 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鈥檚 馃槮

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: 鈥淭ypeError: 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 鈥渪鈥 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=鈥渁ssets鈥> 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 鈥渄rama鈥 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.