Me aparece este error… (ademas de un 401) index.html:1 Uncaught (in promise) SyntaxError: Unexpected token ‘A’, “AUTHENTICA”… is not vali...

a mi igual me aparecía el error 401, es error de autorización, solo tuve que crear otras api keys hasta que se cree una que si me autorice

Hola, tengo un inconveniente, no me muestra un mensaje de error pero me trae una lista vacía de array{0} No muestra que está trayendo imágenes y realizo todo correctamente ¿que puedo hacer para solucionar el problema?

<code>
const API_URL_RANDOM =
  "https://api.thecatapi.com/v1/images/search?limit=2&api_key=live_w1hxsL6b5iSYv70VnMUkkpokC9rjhquO4lOSh26ssZkMxt8MDCxxSJ2AFrrRQyeF";
const API_URL_FAVOTITES =
  "https://api.thecatapi.com/v1/favourites?limit=2&api_key=live_w1hxsL6b5iSYv70VnMUkkpokC9rjhquO4lOSh26ssZkMxt8MDCxxSJ2AFrrRQyeF";

const spanError = document.getElementById("error");

async function loadRandomMichis() {
  const res = await fetch(API_URL_RANDOM);
  const data = await res.json();
  console.log("Random");
  console.log(data);
  if (res.status !== 200) {
    spanError.innerHTML = "Hubo un error: " + res.status;
  } else {
    const img1 = document.getElementById("img1");
    const img2 = document.getElementById("img2");

    img1.src = data[0].url;
    img2.src = data[1].url;
  }
}

async function loadFavoritesMichis() {
  const res = await fetch(API_URL_FAVOTITES);
  const data = await res.json();
  console.log("Favourites");
  console.log(data);
  if (res.status !== 200) {
    spanError.innerHTML = "Hubo un error: " + res.status + data.message;
  }
}

loadRandomMichis();
loadFavoritesMichis();

Hola, tuve el mismo problema y encontre la razon de por que sucede. Al parecer cuando el servidor responde con error no nos devuelve un objeto JSON para convertilor en objeto de JS con el metodo .json(), en lugar de eso nos devuelve otro objeto que para poder convertirlo tenemos que hacer uso del metodo .text(), es por eso que en el error que te muestra la consola te dice al final "...is not valid JSON". Puedes resolverlo de esta manera:

async function loadFavoritesMichis(){
    const res = await fetch(API_URL_FAVOURITE)
    
    if(res.status !== 200){
        const error = await res.text()
        spanError.innerHTML="hubo un error: " + error
    }else{
        const data = await res.json()
        console.log('favorite cats',data)
    }
}

supongo que cuando Juan estaba grabando las clases del curso el servidor aun respondia con un objetos JSON a las peticiones erroneas 🧐

Hola!!! ya lo solucioné, era un error de la api key, en vez de colocar la api key correspondiente a thedogapi, le estaba poniendo la de thecatapi 🙈🙈🙈🙈🙈. Lo dejo por si algún distrído le pasa algo similar 🤭

En el error 401 figura (unauthorized)

A mi me aparece lo mismo, y realicé el procedimiento tal cual está en el repo de recursos, no sé si hay algún problema con la api_key, dejo mí código igual por si pueden ayudarme con el error 😩😩

const FAVORITE_API = 'https://api.thedogapi.com/v1/favourites?api_key=live_(la key que me mandaron)';

async function loadFavoriteDoggies(favUrl) {
    const response = await fetch(favUrl);
    const data = await response.json();
    console.log(data);
};

loadFavoriteDoggies(FAVORITE_API);

Dicho sea de paso, cuando cargo los perritos desde la misma url, pero con el endpoint /imagenes/search y el query param de la key que me enviaron, todo funciona correctamente.

Dani, por fa compártenos tu código para ayudarte a ver por qué sale el error...! :pray: