Hay unos cuantos errores, entre ellos:
- Recargas la pagina tu mismo al enviar la data
- usas el
await
de un await
- Por lo que se creo que no estas previniendo que la pagina se recargue (el formulario se envia).
Para lo primero deberas prevenir el envió de tu formulario (puesto que si lo envías por fetch entonces para que quisieras enviarlo también por el form?), así que lo que primero que debes hacer es en tu HTML
acomodar la función de tal forma que envié el evento y el formulario, y no solo el formulario:
<form action="http://xx.xx.205:3001/api/pedidos/registrar" method="POST" onsubmit="registrar(event, this)"></form>
Lo segundo que debes hacer es prevenir que se envié el formulario, como había dicho previamente, ademas debes modificar la funcion para que ahora acepte dos paramentros (el evento y el formulario) entonces en la función registrar
al inicio del todo prevenimos el envió del form
con un preventDefault
:
async function registrar(ev, data){
ev.preventDefault();
data = $(data).serialize();
const res = await fetch(`http://${ip}:${puerto}/api/pedidos/registrar`, {
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
},
method: "POST"
});
const jsonData = await res.json();
return jsonData.data;
}
Ademas de esto, he visto que en esta parte tienes un location.reload
lo cual no es buena idea, puesto que su proposito no lo veo claro (para que recargar la pagina?), recargar la pagina no hara que la pagina te obtenga la data, por lo que deberas quitar:
location.reload();
al final de:
$('.registrar').click( async function() {
$('form').attr({"action": "http://xx.xx.205:3001/api/pedidos/registrar", "method": "POST"});
const ret4 = new Registro();
const wath = await ret4.registrar();
location.reload();
});
Para el error respecto al (usar await
de un await
) vi que lo corregiste en tu segunda edicion, por lo que no hondare al respecto puesto que ya lo haz solucionado.
Una cosa mas a tener en cuenta es que las claves y valores enviados por tu body
en fetch
van de acuerdo a el atributo name
de los inputs que tengas dentro de tu form
, donde el atributo name
del input siempre hara referencia a la key
del json, mientras que el atributo value
hara referencia al valor del json a enviar.
Deberás asegurarte que tus inputs tengan un name y corresponda con el nombre de dato que quieres tener en tu json.
Si esto no funciona, asegurate de mirar que es lo que te devuelve el backend antes de hacer res.json()
:
console.log(res);
const jsonData = await res.json();
Si el resultado no es un JSON
, el error viene de parte del servidor, o estas enviando data incorrecta a este, y este te esta devolviendo un error.
De hecho ahora que me doy cuenta, y esto es importante:
Estas usando serialize()
de jQuery
, serialize()
seria perfecto si estuvieses usando $ajax
de jQuery
ya que lo puedes usar directamente, pero para el caso de fetch, como se trata de una peticion POST
, recuerda que las peticiones POST
no reciben parametros tipo urlFormEncoded
ya que eso es enrealidad lo que devuelve serialize()
y por supuesto no puedes hacer JSON.stringify()
a algo que directamente NO es un JSON
.
asi que la solucion a ello es primero tratar de darle un formato tipo JSON a un URLEncodedString
, por lo tanto:
function encodedURLtoJSON(urlEncodedString){
const fullValues = urlEncodedString.split("&");
const keys = fullValues.map(el => el.split("=")[0]);
const values = fullValues.map(el => el.split("=")[1]);
const obj = {};
for(let i = 0; i < keys.length; i++){
obj[keys[i]] = values[i];
}
return obj;
}
const data = encodedURLtoJSON("name=Juan&edad=16&terminos=true");
console.log(data);
Ese ejemplo lo puedes aplicar a tu codigo, siendo que en esta parte, en vez de usar directamente $(data).serialize();
deberas usar la nueva funcion para convertir ese UrlFormEncoded
a un Objeto
de Javascript:
data = encodedURLtoJSON($(data).serialize());
De esta manera al hacer JSON.stringify
no obtendras el error.
body
en elfetch()
fetch('url', { header:{}, method:'POST', mode: 'CORS', body: datosEnviados })
te faltabody