Tengo un formulario de registro y tengo una función de javascript mientras valido la entrada del formulario con una solicitud de búsqueda en un archivo php. El código es el siguiente:
form.onsubmit = function() { let signInData = JSON.stringify(Object.fromEntries(new FormData(form).entries())); let flag = false; fetch('php/sign_up.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: signInData, }) .then(response => response.text()) .then(data => { if(data != "1") { document.getElementById("sign_up_error").innerHTML = data; flag = false; } else { flag = true; } }); return flag };Ahora, el comando fetch requiere un tiempo para finalizar y la función .onsubmit devuelve un valor antes de que se complete. Ahora sé que se puede usar una función asíncrona para esperar a que la búsqueda termine usando async-await, pero eche un vistazo. Visualicemos el código del formulario:
if(form.onsubmit()) { sendFormData(); }Como puede ver, no usan una función asíncrona de su lado para obtener los datos, usan una función síncrona. Por su parte, form.onsubmit() se evaluaría como una promesa vacía. Y una promesa vacía como booleana es verdadera, por lo que siempre solo enviaría los datos. Y no puedo usar la devolución de llamada ya que el valor debe devolverse en esa función.
La función async se ejecuta de forma asíncrona si incluye una expresión de await . La función se completa de forma asíncrona en la expresión await , devolviendo Promise (no booleano). Por lo tanto, no podemos ejecutar la función de devolución de llamada de forma síncrona si incluye la función de fetch que necesita una expresión de await .
Consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function .
Creo que la alternativa es la siguiente. La devolución de llamada siempre cancela el envío y luego, cuando su proceso de validación tiene éxito, envía el formulario.
form.addEventListener('submit', (e) => { e.preventDefault(); // cancel submission let signInData = JSON.stringify(Object.fromEntries(new FormData(form).entries())); fetch('php/sign_up.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: signInData, }) .then(response => response.text()) .then(data => { if(data != "1") { document.getElementById("sign_up_error").innerHTML = data; } else { form.submit(); } }); });Bueno, acabo de encontrar la respuesta usando e.preventDefault y flags:
let flag = false; form.addEventListener("submit", formSubmit); async function formSubmit(e) { if(flag === true) { return true; } else { e.preventDefault(); let signInData = JSON.stringify(Object.fromEntries(new FormData(form).entries())); await fetch('php/sign_up.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: signInData, }) .then(response => response.text()) .then(data => { if(data != "1") { document.getElementById("sign_up_error").innerHTML = data; flag = false; } else { flag = true; sign_up.submit(); } }); } };