Problema na requisição da API mostrada no curso - Resolvido

Para quem está fazendo o curso "Fundamentos de JavaScript Assíncrono" atualmente, pode ter se deparado na aula prática que a API mostrada na aula não retorna nenhuma imagem e retorna um erro em sua requisição.

Pesquisando a fundo, vi que isso ocorre porque o link da API mostrada na aula não está mais disponível atualmente.

Essa API foi mudada para um novo link: The Cat API - Cats as a Service, onde agora existem planos de contratação para uso da API em projetos monetizados.

Porém, em projetos não monetizados de estudos, ela continua gratuita.

O link que devemos usar agora no lugar do link mostrado na aula é: https://api.thecatapi.com/v1/images/search/

Observação: devemos passar no retorno a constante e entre colchetes a posição '0' e acessar a chave 'url'.

Como podemos ver no código abaixo:

const URL = "https://api.thecatapi.com/v1/images/search/";
const catBtn = document.getElementById("change-cat");


const getCats = async () => {
const data = await fetch(URL)
  .then((response) => response.json())
  .catch((e) => console.log(e));


return data[0].url;
};


const loadImage = async () => {
const catImage = document.getElementById("cat");
catImage.src = await getCats();
};


catBtn.addEventListener("click", loadImage);


loadImage();