Meu objetivo é pegar o e-mail do usuário e então enviar para o banco de dados. Para isso, eu coloquei um evento do tipo "change" no input que captura o e-mail. Minha ideia é que toda vez que o input sai de foco, o valor dentro do input seja capturado.
Arquivo index.js
:
const GetEmail = require("./classes/getEmail.js");
(async function () {
const email = await new GetEmail().userEmail;
console.log('email retornado no index.js');
})();
Arquivo getEmail.js
:
get userEmail() {
return new Promise((resolve, reject) => {
const input = document.querySelector(".email-form input");
function handleInputChange({ target: { value: email } }) {
console.log('evento change disparado');
console.log('email: ' + email);
if (this.validateEmail(email)) {
console.log('email correto, resolve deve ser retornado');
return resolve(email);
} else {
console.log('email incorreto, reject deve ser retornado');
return reject("Invalid e-mail");
}
}
handleInputChange = handleInputChange.bind(this);
input.addEventListener("change", handleInputChange);
});
}
O problema é o seguinte: se eu digitar o e-mail incorretamente e tirar o foco do input, a promessa dentro do método userEmail retorna o reject e uma mensagem de erro é lançada no console do browser (esse comportamento é esperado). Mas se eu voltar o foco para o input e corrigir o e-mail, a promise NÃO retorna o resolve com o e-mail e a função console.log
dentro do index.js
NÃO é executada.
Segue um Gif demonstrando esse comportamento: https://i.sstatic.net/HdVRn.jpg
Inversamente, se eu digitar o e-mail corretamente e tirar o foco do input, a promessa dentro do método userEmail
retorna o resolve com o e-mail e a função console.log
dentro do index.js
é executada corretamente. Mas se eu alterar o e-mail para algum incorreto, a promise deveria retornar o reject
que deveria lançar um erro no console do browser, mas não é o que acontece.
Segue outro gif demonstrando o comportamento acima: https://i.sstatic.net/vUyQR.jpg