1
resposta

[Dúvida] Página recarregando após requisição

Estava testando o meu código e identifiquei que, mesmo com o uso do método preventDefault(), a página recarrega quando a requisição é concluída. Esse comportamento também ocorre no código da instrutora. Gostaria de saber se isso é normal, pois a adição de novos vídeos funciona normalmente.

Segue abaixo o meu código:

import { data } from "./connection.js";

const form = document.querySelector('.container__formulario');

form.addEventListener('submit', async function (event) {
    event.preventDefault();
    await getInputs();
})


async function getInputs() {
    const titulo = document.getElementById('titulo').value;
    const descricao = Math.floor(Math.random() * 10 + 1).toString();
    const url = document.getElementById('url').value;
    const imagem = document.getElementById('imagem').value;


    await data.addVideo(titulo, descricao, url, imagem);
}

Esse é o código da funçao que realiza a requisição:

async function addVideo(inputTitulo, inputDescricao, inputUrl, inputImagem) {
    try {
        const connection = await fetch('http://localhost:3000/videos', {
            method: 'POST',
            headers: {
                'Content-type': 'application/json'
            },
            body: JSON.stringify({
                titulo: inputTitulo,
                descricao: `${inputDescricao} mil visualizações`,
                url: inputUrl,
                imagem: inputImagem
            })
        });

        window.location.href = '../pages/envio-concluido.html';
        return connection        
    } catch (error) {
        console.log(error);
    };
}
1 resposta

Oii Leonardo, tudo bem?

Para te ajudar melhor, peço que você coloque seu código completo no repositório do GitHub, assim posso ter a visão completa e te ajudar melhor.

Um abraço.

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