[Dúvida] Novos videos não aparece | JavaScript: criando requisições

Já comparei o meu código várias vezes com o da professora, mas quando atualizo a pagina no navegador, os novos videos não aparecem. mostrarVideos.js:

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

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

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(
        constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))     
}

listaVideos();

conectaApi.js:

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

export const conectaApi = {
    listaVideos
}

index.html:

(...)
<body>

    <header>

        <nav class="cabecalho">
            <a class="logo" href="./index.html"></a>

            <div class="cabecalho__pesquisar">

                <input type="search" placeholder="Pesquisar" id="pesquisar" class="pesquisar__input">
                <button class="pesquisar__botao">
            </div>
            <div class="cabecalho__icones">
                <a href="./pages/enviar-video.html" class="cabecalho__videos"></a>
            </div>
        </nav>
    </header>
   <ul class="videos__container" alt="videos alura" data-lista>
        <li class="videos__item">
            <iframe width="100%" height="72%" src="https://www.youtube.com/embed/pA-EgOaF23I"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            <div class="descricao-video">
                <img src="./img/logo.png" alt="logo canal alura">
                <h3>Qual é o melhor hardware para programação com Mario Souto</h3>
                <p>236 mil visualizações</p>
            </div>
        </li>
        <li class="videos__item">
            <iframe width="100%" height="72%" src="https://www.youtube.com/embed/OrnUhR41MYI"
                title="Voltando ao mercado após a maternidade: Ana Silvério" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            <div class="descricao-video">
                <img src="./img/logo.png" alt="logo canal alura">
                <h3>Voltando ao mercado após a mmaternidade: Ana Silvério</h3>
                <p>618 visualizações</p>
            </div>
        </li>
        <li class="videos__item">
            <iframe width="100%" height="72%" src="https://www.youtube.com/embed/YhnNOTde2I0"
                title="Mercado de Trabalho | Desmistificando Mobile - Episódio 5" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            <div class="descricao-video">
                <img src="./img/logo.png" alt="logo canal alura">
                <h3>Mercado de Trabalho | Desmistificando Mobile...</h3>
                <p>1,1 mil visualizações</p>
            </div>
        </li>
        <li class="videos__item">
            <iframe width="100%" height="72%" src="https://www.youtube.com/embed/y8FeZMv37WU"
                title="Conhecendo a linguagem Go | Hipsters.Talks" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
            <div class="descricao-video">
                <img src="./img/logo.png" alt="logo canal alura">
                <h3>Conhecendo a linguagem Go | Hipsters.Talks</h3>
                <p>3 mil visualizações</p>
            </div>
        </li>
    </ul>
    <script src="./js/mostrarVideos.js" type="module"></script>
</body>

Alguém pode me ajudar?

Oi Sarah, tudo bem?

Pelo que vi no seu código, parece que você esqueceu de retornar a resposta da função listaVideos no arquivo conectaApi.js.

No seu código, a função listaVideos está assim:

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

Você está fazendo o fetch dos vídeos e convertendo a resposta para JSON, mas o resultado não está sendo retornado pela função. Portanto, quando você chama conectaApi.listaVideos() no arquivo mostrarVideos.js, a função não retorna nada.

Para corrigir isso, você deve retornar conexaoConvertido na função listaVideos. Veja como deve ficar:

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

Assim, quando você chamar conectaApi.listaVideos(), a função retornará a lista de vídeos que você espera.

Espero ter ajudado.

Um abraço e bons estudos.