1
resposta

Duvida sobre GET e Then

Depois da Aula eu estava tendo um problema com um erro de GET dizendo que não era possivel encontrar a página. Mas ao remover o "Then()" o código funcionaou normalmente como esperado na aula. Porque isso aconteceu?

Antes:

import { clienteService } from '../service/cliente-service.js';

const pegaURL = new URL(window.location)

const id = pegaURL.searchParams.get('id');

const inputNome = document.querySelector('[data-nome]');
const inputEmail = document.querySelector('[data-email]');

clienteService.detalhaCliente(id)
.then( dados => {
    inputNome.value = dados.nome
    inputEmail.value = dados.email
})

const formulario = document.querySelector('[data-form]')

formulario.addEventListener('submit', (evento => {
    evento.preventDefault()

    clienteService.atualizaCliente(id, inputNome.value, inputEmail.value)
    .then(() => {
        window.location.href = "../telas/edicao_concluida.html"
    })
}))

Depois:

import { clienteService } from '../service/cliente-service.js'

const pegaURL = new URL(window.location)

const id = pegaURL.searchParams.get('id')

const inputNome = document.querySelector('[data-nome]')
const inputEmail = document.querySelector('[data-email]')

clienteService.detalhaCliente(id)
.then( dados => { 
  inputNome.value = dados.nome
  inputEmail.value = dados.email
})

const formulario = document.querySelector('[data-form]')

formulario.addEventListener('submit', (evento) => {
  evento.preventDefault()

  clienteService.atualizaCliente(id, inputNome.value, inputEmail.value)
  window.location.href = "../telas/edicao_concluida.html"
})
1 resposta

O problema que você descreveu está relacionado ao tempo de execução de funções assíncronas. A operação clienteService.atualizaCliente(id, inputNome.value, inputEmail.value) é, provavelmente, uma operação assíncrona que leva algum tempo para completar.

No seu código original, você está utilizando o método then() após essa operação, indicando que a linha window.location.href = "../telas/edicao_concluida.html" só deve ser executada quando a operação de atualização do cliente for concluída. Se a operação de atualização falhar por algum motivo (por exemplo, se o servidor retornar um erro), a promessa será rejeitada e o then() não será executado.

No seu código "Depois", você removeu o then(), o que significa que a linha window.location.href = "../telas/edicao_concluida.html" será executada imediatamente após a operação de atualização ser iniciada, não quando ela é concluída. Isso pode ter resolvido o seu problema se a operação de atualização estava demorando muito tempo para concluir, ou se estava falhando e, portanto, nunca concluindo.

No entanto, essa abordagem tem um problema potencial. Se a operação de atualização não for concluída antes da página ser redirecionada, o usuário pode ver dados desatualizados quando a nova página for carregada.

É sempre recomendável manter o encadeamento de promessas (usando then()) quando você tem operações assíncronas que dependem umas das outras. Se você estava recebendo erros, isso pode ser um sinal de que há um problema com a sua função clienteService.atualizaCliente que precisa ser corrigido.