Utiliza el callback, en resumen es una función que se pasa como argumento a otra función y será llamada cuando la otra función se haya completado.
function datosDis(folio, callback) {
$.ajax({
url: 'peticiones/consultaRepDis.php',
data: { 'Folio': folio },
type: 'POST',
success: function (res) {
let datos = JSON.parse(res)
folio= datos.data.map(fila =>{
console.log(fila)
return fila.folio;
})
callback(datos);
},
});
}
$('#frmRecepcionDistribuidor').submit(function (e) {
e.preventDefault();
datosDis(folio, function(datos) {
console.log(datos);
});
});
Ahora la function datosDis
tiene dos argumentos, folio
y callback
.
El callback solo será llamado cuando la función datosDis haya sido completada.
En el submit
, se pasan 2 argumentos, el folio y el callback, a la función datosDis. datosDis realiza la solicitud HTTP a peticiones/consultaRepDis.php; una vez que esta solicitud se haya completado, la función datosDis devuelve los datos. El callback recibe un argumento, y luego imprime los datos
Otra posibilidad que puede resolver es utilizar async await, convirtiendo la función datosDis en una función async.
De esta manera, la función datosDis realiza la solicitud de forma asíncrona. Cuando la solicitud se completa, retorna los datos y el envío del formulario invoca la función datosDis y espera el resultado, una vez que este retorna, submit imprime los datos.
async function datosDis(folio) {
let datos;
try {
datos = await $.ajax({
url: 'peticiones/consultaRepDis.php',
data: { 'Folio': folio },
type: 'POST',
});
} catch (err) {
console.log(err);
}
return datos;
}
$('#frmRecepcionDistribuidor').submit(function (e) {
e.preventDefault();
let datos = await datosDis(folio);
console.log(datos);
});
success
o bien llamar desde ahí la función pasándole ares
o implementar lo que se conoce como callback.