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);
};
}