Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Nada acontece

Por que quando eu clico em pesquisar ao invés de aparece a mensagem fica tudo em branco? só aparece a mensagem quando eu tiro o "s" dentro do codigo como na aula?

mostrarVideos.js

import { conectaApi } from "./conectaAPI.js";

const lista = document.querySelector("[data-lista]");

export default function constroiCard (titulo, descricao, url, imagem){
    const video  = document.createElement("li");
    video.className = "videos__item";
    video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
    title="${titulo} " frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
<div class="descricao-video">
    <img src="${imagem} " alt="logo canal alura">
    <h3>${titulo}</h3>
    <p>${descricao} </p>
</div>` 

    return video;
}

async function listaVideos(){
    try{
    const listaApi = await conectaApi.listaVideos();
    listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo , elemento.descricao,elemento.url , elemento.imagem)))
    }catch{
        lista.innerHTML = `<h2 class = "mensagem__titulo"> Não foi possivel carregar a lista de videos </h2>`
    }
}

listaVideos();
1 resposta
solução!

Oii Jorge, tudo bem?

Pelo o que entendi da sua dúvida, isso ocorre porque o erro foi forçado na aula para demonstrar o funcionamento do bloco try...catch.

No exemplo da aula, a URL foi alterada removendo o "s" de "videos" para causar um erro intencionalmente e, assim, disparar o bloco catch. Isso significa que, quando a URL está correta, a requisição é bem-sucedida e o bloco catch não é acionado, por isso a mensagem de erro não aparece.

No seu caso, quando você clica em pesquisar, provavelmente a requisição está sendo bem-sucedida e retornando um array vazio (porque não encontrou vídeos correspondentes à pesquisa), e por isso a tela fica em branco.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software