1
resposta

[Bug] O vídeo não carrega e não mostra nenhum erro no console

Não estou conseguindo adicionar os vídeos, sequer vai para a tela de carregamento concluído. No console, ele não indica nenhum erro. Meu projeto está: https://github.com/TaynaKikuti/alura-play-requisicoes

1 resposta

Ola Tayná, bom dia!

Estive analisando o seu código e notei dois errinhos:

  1. no seu arquivo criarVideo.js há um pequeno erro de digitação na linha 20. Em vez de ser escrito submit, foi escrito sumbit.

  2. no seu arquivo conectaApi.js, a constante conexaoConvertida da função assíncrona criaVideo() não está sendo carregada de forma correta. Para corrigir isso vamos adicionar um await antes de conexao.json() para garantir que ela seja carregada antes de continuar a operação.

Aqui estão os arquivos corrigidos:

criarVideo.js

import { conectaApi } from "./conectaApi.js";
const forumulario = document.querySelector('[data-formulario]')

async function criarVideo(evento) {
    evento.preventDefault() //previne que o evento padrão aconteça, que no caso seria recarregar a página.
    const imagem = document.querySelector('[data-imagem]').value
    const url = document.querySelector('[data-url]').value
    const titulo = document.querySelector('[data-titulo]').value
    const descricao = Math.floor(Math.random()*10).toString()

    await conectaApi.criaVideo(titulo,descricao, url, imagem)

    window.location.href = "../pages/envio-concluido.html" 
}

forumulario.addEventListener('submit', evento => criarVideo(evento)) // CORREÇÃO DA ORTOGRAFIA

conectaApi.js

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

async function criaVideo(titulo, descricao, url,imagem) {
    const conexao = await fetch('http://localhost:3000/videos', {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({
            titulo: titulo,
            descricao: `${descricao} mil visualizações`,
            url: url,
            imagem: imagem
        })
    })
    const conexaoConvertida = await conexao.json() // ADICIONADO O AWAIT
    return conexaoConvertida
}

export const conectaApi = {
    listaVideos,
    criaVideo
}

Com isso seu vídeo vai ser adicionado!