[Bug] Vídeos não carregam

async function listaVideos() {
    const conexao = await fetch("http://localhost:3000/videos");
    const conexaoConvertida = await conexao.json();
    
    return conexaoConvertida;
}

export const conectaApi = {
    listaVideos
}

import { conectaApi } from "./conectaAPI.js"; // importando a variável do conectaAPI

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

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() {
    const listaApi = await conectaApi.listaVideos();
    listaApi.forEach(elemento => lista.appendChild( // p cada item da lista abaixo, uma LI será criada.
        constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))
}

listaVideos();

Ao realizar o código acima, os vídeos somem.

Erros no console.

Oi Renan! Tudo ok contigo?

Bom esse erro está indicando que a promisse feita no código não foi concluída.

Para resolver isso você precisa iniciar o servidor Node localmente em seu projeto.

Mas infelizmente por politicas de segurança do navegador alguns avisos vão ficar aparecendo no console, e sobre eles não tem o que fazer, mas vamos com calma.

• Primeiro você deve ter o Node instalado em seu computador.
• Após o ter, você deve abrir o seu projeto no terminal e instalar o json-server através do npm package.
• Então você deve pedir para o json-server acompanhar o arquivo db.json na íntegra para que as requisições funcionem.
• Eu vou deixar um gif de execução mostrando como fazer isso tá. Aqui:

Como você pode ver ocorreram vários erros no console, mas vamos lá.

• Primeiro sobre os erro eu recomendo esse tópico abaixo. Ali é explicado um pouco sobre esses erros e como resolver eles. Mas não é uma solução recomendada, pois desativa TODAS as ações de segurança do seu navegador, o que é TOTALMENTE contra-indicado, pois deixa seu navegador vulnerável demais, então não recomendo isso:
  • Não consigo realizar o Export e Import, por conta de erro no CORS.
• Agora sobre o porquê isso ainda não foi tratado. Bom, na verdade, isso foi tratado, sim, e a instrutora do curso já se pronunciou sobre isso no tópico abaixo, onde ela diz que o curso será regravado já pensando nisso e em alguns outros pontos levantados pelos alunos:
  • [Sugestão] Atualizar projeto usando outra alternativa, seria viável? Dificuldade de instalação do json-server, ou erros 404 no console. [Não solucionado].

No geral era isso, caso precise eu estarei por aqui.

Abraços e bons estudos.

Obrigado pelo retorno, tinha conseguido mas sua resposta me ajudou muito.

Fico feliz em ajudar.

Caso precise estarei por aqui.

E conte com a comunidade do fórum para lhe ajudar em momentos que tiver problemas e dificuldades com os projetos dos cursos.

Era isso, abraços e bons estudos.