2

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

1
  • 2
    Você está usando uma promessa como se fosse um observable. Uma promessa só pode transitar para o estado settled (resolver-se ou rejeitar-se) uma única vez. A promessa pode sair do estado final várias vezes? Não. Uma vez que passa para o estado final, lá há de ficar. É uma máquina de estados que não permite retrocesso a partir desse estado final. Commented 12/04/2021 às 12:30

1 Resposta 1

2

Perceba que, a partir do getter userEmail, você está criando uma promessa, que é retornada. No arquivo index.js, você chama esse getter:

const email = await new GetEmail().userEmail;

Ou seja, está criando uma única promessa, já que o getter userEmail, que cria a promessa, só é chamado uma vez.

O erro advém do fato de você pensar que uma única promessa pode ser resolvida ou rejeitada várias vezes, o que não é o caso.

O que é uma promessa?

Do ponto de vista dos estados cabíveis para uma promessa, podemos pensá-la como uma máquina de estados. Quando se cria uma nova promessa, ela é iniciada no estado pending, que será ativo até que ela seja resolvida ou rejeitada.

Uma vez que se chame a função resolve (primeiro parâmetro do construtor) ou reject (segundo parâmetro do construtor), a promessa transita para um destes dois estados:

  • fulfilled, no caso de ter sido resolvida;
  • rejected, no caso de ter sido rejeitada.

Diz-se que a promessa foi settled quando encontra-se no estado fulfilled ou rejected. Uma vez settled, a promessa não pode retroceder ao estado pending, já que fulfilled e rejected são estados finais. Em resumo, pode-se representar por este diagrama:

Gráfico de estados da promessa.

O problema da pergunta

Reiterando o que coloquei no início desta resposta, vale observar que você está criando uma única promessa.

O problema está no fato de você estar tentando resolvê-la (a partir de seu próprio construtor) várias vezes, o que é um erro do ponto de vista dos estados transitáveis por uma promessa.

Como vimos acima, uma promessa não pode ser resolvida ou rejeitada várias vezes.

Portanto, ao invés de, para cada evento change, tentar resolver ou rejeitar a única promessa várias vezes, cria uma promessa para cada evento. Assim, você será capaz de resolver ou rejeitar várias promessas.

Pode ser algo assim:

main();

// Pense como `index.js`:
function main() {
  async function handleInputChange(event) {
    try {
      const message = await validateEmail(event.target.value);
      console.log('[SUCESSO] Do índice:', message);
    } catch (error) {
      console.log('[ERRO] Do índice:', error);
    }
  }
  const input = document.querySelector('.email-form-input');
  input.addEventListener('change', handleInputChange);
}

// Pense como método que valida o e-mail:
function validateEmail(email) {
  return new Promise((resolve, reject) => {
    // Omiti a função de validação para simplificar...
    if (email.includes('@')) {
      resolve(`E-mail ${email} é válido.`);
    } else {
      reject(`E-mail ${email} é inválido.`);
    }
  });
}
<input type="text" class="email-form-input" />

Mas observe que nem faz sentido utilizar promessas nesse tipo de situação, já que uma validação de e-mail tende a ser síncrona.

Claro, se for uma validação de existência de e-mail que precisa de algum processamento assíncrono (como consulta ao servidor), promessas podem ser vistas como necessárias.

Em suma, você estava utilizando promessas como se pudessem ser resolvidas ou rejeitadas várias vezes, o que não é o caso. No entanto, talvez seja o caso de utilizar Observables (ver RxJS, uma das implementações para o JavaScript).

1
  • Realmente, meu erro foi achar que, a cada evento "change" disparado, uma nova promessa era criada. De qualquer forma, muito obrigado pela explicação. Commented 12/04/2021 às 16:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .