Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

GET: leyendo michis favoritos

9/20
Recursos

Aportes 16

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Este profesor tiene severa actitud :3

Un aporte si también intentan hacer la petición con la API pero sin tener favoritos guardados es va a arrojar un 404 ya que aún no hay favortios.

También otra manera de darle manejos a los errores si usamos async await y es agregando el Try catch

Otra cosa es que también podemos usar el innerText ya que como no estamos usando etiquietas HTML y solo estamos insertando texto nos puede llegar a ser de útilidad, pero todo depende de como quieras aplicarlo

Solo recuerden Nunca dejen de aprender 💚

En mi experiencia tambien es buena idea separar los diferentes valores de las API y despues poder llamarlos por separado para poder tener mejor control de las URL

Favorite (United State of America / Favourite (England)
En ingles tenes ingles Britanico y de Estado Unidos, y tienen diferencias en algunas palabras, justo esto lo vi en un libro hace mucho, con favorite favourite, hay mas palabras con una muy ligera diferencia.

Favorite and favourite are two variant spellings of the same word with the exact same definition. Favorite without the “u” is the spelling used in the United States, while favourite is used in the rest of the English-speaking world.

Me gusta mucho la forma de escribir la función con las promesas con un disparador de errores try catch para no llenar el código de if. Entonces si es diferente a 200 disparamos un nuevo error.

const loadRandomCats = async () => {
    try {
        const response = await fetch(URL_RANDOM);
        const status = response.status;
        if (status !== 200) throw new Error(`Error de petición HTTP en Random: ${status}`);
        const data = await response.json();
	...
    } catch (error) {
        console.log(error.message);
        const errorNode = document.querySelector('#error');
        errorNode.innerText = `Error: ${error.message}`;
    }
}

Arme esta estructura con los codigos más comunes de HTTP. Por supuesto se puede agregar el resto, de necesitarse.

const HTTP={
  'OK': 200,
  'CREATED': 201,
  'BAD_REQUEST': 400,
  'UNAUTHORIZED': 401,
  'FORBIDDEN': 403,
  'NOT_FOUND': 404,
  'INTERNAL_SERVER_ERROR':500,
  'SERVICE_UNAVAILABLE': 503,
  'GATEWAY_TIMEOUT': 504,
}

Les comparto una idea para poder mostrar los distintos HTTP codes. 😄
Puden usar la página de HTTP Cats para poder mostrar los diferentes códigos.
Yo lo implementé y este fue el resultado.

Les comparto mi repositorio de GitHub por si les sirve de ayuda.

Fact: Despite of what you might think, both are correct, favorite-favourite.

Pueden tener un objeto de endpoints

const endpoints ={
  API_URL: "https://api.thecatapi.com/v1/images/search",
  API_URL_LIMIT: (limit=3)=> `https://api.thecatapi.com/v1/images/search?limit=${limit}`,
  API_URL_KEY: (key,limit=3)=> [ 'https://api.thecatapi.com/v1/images/search', `?limit=${limit}`, 
    '&order=Asc', `&api_key=${key}`, 
  ].join(''),
};

y poder llamarlo de diferentes formas

const response = await fetch(endpoints.API_URL)

const response = await fetch(endpoints.API_URL_LIMIT(10))

const response = await fetch(endpoints.API_URL_KEY(API_KEY,4))

Me gustaba más la intro de Platzi de antes 😞

Capo Juan!

Cuando trabajas con peticiones http, otra manera de trabajar los errores es a través de los bloques try - catch de la siguiente manera:

const getFavoritesMichis = async () => {
  try {
    const respuesta = await fetch(URL_API_FAVORITES);
    const data      = await respuesta.json();
    if( respuesta.status === 200){

      console.log(data)
    } else {
      throw new Error ('Falló la conexión con el servidor')
    }
  } catch (error) {
    console.log(error)
  }
}

De esta forma también obtener un resultado más ameno y podemos saber explícitamente donde reventó la aplicación. Además evita esto, que la aplicación reviente. nos muestra el error pero sigue en ejecución la app.

Favorite se utiliza en USA y Favourite se utiliza en UK.

Hice el código de ejemplo del profesor, pero implementando POO y lo he escrito con Typescript. Este es el resultado.

import { Cat } from "./../models/cat.model";

const API_URL_RANDOM: string = "https://api.thecatapi.com/v1/images/search?limit=5&api_key=707899fb-0e66-4594-a01a-e6f5879e0d8b";
const API_URL_FAVORITES: string = "https://api.thecatapi.com/v1/favourites?api_key=707899fb-0e66-4594-a01a-e6f5879e0d8b";
const images: HTMLCollectionOf<Element> = document.getElementsByClassName("catImage");
const button: HTMLElement | null = document.getElementById("boton");
const spanError: HTMLElement | null = document.getElementById("errorMessage");

class LoadCatImage {
  constructor (
    private readonly apiUrlRandom: string,
    private readonly apiUrlFavorites: string,
    private readonly images: HTMLCollectionOf<Element>,
    private readonly spanError: HTMLElement | null,
  ) {}

  favoriteImages () {
    this.loadImages(this.apiUrlFavorites);
  }

  randomImages () {
    this.loadImages(this.apiUrlRandom);
  }

  private async loadImages (apiUrl: string): Promise<void> {
    let res: Response | null = null;
    try {
      res = await fetch(apiUrl);
      if (res.status === 200) {
        const data: Cat[] = await res.json();

        for (let index = 0; index < this.images.length; index++) {
          const image = this.images[index] as HTMLImageElement;
          image.src = data[index].url;
        }
      }
    } catch (error) {
      if (this.spanError !== null && res!== null) {
        this.spanError.innerText = `Something went wrong. Error ${res.status}`
      }
      console.error(error);
    }
  }
}

const loadCatImage = new LoadCatImage(API_URL_RANDOM, API_URL_FAVORITES, images, spanError);

loadCatImage.randomImages();

if (button!== null) {
  button.onclick = loadCatImage.randomImages;
}

Él código de ejemplo de la clase, pero en Typescript 😄.

import { Cat } from "./../models/cat.model";

const API_URL_RANDOM: string = "https://api.thecatapi.com/v1/images/search?limit=5&api_key=707899fb-0e66-4594-a01a-e6f5879e0d8b";
const API_URL_FAVORITES: string = "https://api.thecatapi.com/v1/favourites?api_key=707899fb-0e66-4594-a01a-e6f5879e0d8b";
const images: HTMLCollectionOf<Element> = document.getElementsByClassName("catImage");
const button: HTMLElement | null = document.getElementById("boton");
const spanError: HTMLElement | null = document.getElementById("errorMessage");

async function loadFavoriteImages (): Promise<void> {
  let res: Response | null = null;
  try {
    res = await fetch(API_URL_FAVORITES);
    if (res.status === 200) {
      const data: Cat[] = await res.json();

      console.log(data);
    }
  } catch (error) {
    if (spanError !== null && res!== null) {
      spanError.innerText = `Something went wrong. Error ${res.status}`
    }
    console.error(error);
  }
};


async function loadRandomImages (): Promise<void> {
  let res: Response | null = null;
  try {
    res = await fetch(API_URL_RANDOM);
    if (res.status === 200) {
      const data: Cat[] = await res.json();

      for (let index = 0; index < images.length; index++) {
        const image = images[index] as HTMLImageElement;
        image.src = data[index].url;
      }
    }
  } catch (error) {
    if (spanError !== null && res!== null) {
      spanError.innerText = `Something went wrong. Error ${res.status}`
    }
    console.error(error);
  }
};

loadRandomImages();
loadFavoriteImages();

if (button!== null) {
  button.onclick = loadRandomImages;
}

Apoyandome con bootstrap para mostrar el error 😄

Es importante recordar que las consultas a las APIs son asíncronas, por lo que las respuestas no nos van a llegar de acuerdo al orden en el que escribimos cada fetch.

Un ejemplo:

function foo() {
  console.log('foo')
}

function bar() {
  console.log('bar')
}

// makeRequest es una función asíncrona arbitraria
// dada por una librería que hace requests y ejecuta
//un callback cuando tiene una respuesta
makeRequest('https://some.url', foo)
makeRequest('https://some.url', bar)

Los callbacks foo y bar no van a ejecutarse en el orden en el que llamamos a makeRequest, sino que puede ser al revés también. Existe cierto nivel de indeterminismo.
Lo que hizo el profe al poner dos console log (“Random” y “Favorites”) fue por esta razón, ya que no sabía qué respuesta estaba siendo mostrada primero. Es muy útil hacer eso al momento de desarrollar para saber qué respuestas estamos recibiendo.
.
Como él ya mencionó, es importante conocer de esto en el curso de asíncronismo 💚 Vale mucho la pena
También les recomiendo este libro si quieren profundizar más: You don’t know JS: Async and Performance