¿Como obtengo el valor de una variable, por fuera de una función que utiliza Ajax?

Question

En un file llamado funciones.js tengo una función que hace un insert en la base de datos. Yo quiero hacer el insert y que luego la función me devuelva el valor del ultimo id insertado. Detras del javascript ya tengo resuelto el problema, me falta poder capturarlo con esta función y retornarlo (return) por fuera de ella. En "respuesta" viene el valor que quiero capturar. En este caso lo que intento es crear una variable al comienzo de la función que se llama ultimoIdFactura, luego le asigno un nuevo valor con la respuesta que viene de la base de datos y luego intento retornar este valor por fuera de la función. Pero esto no funciona.

export function insertaFacturaBD(){

    var ultimoIdFactura = null;

    /*Guarda los datos en el arreglo formData para enviarlos mediante ajax*/
    var datosFactura = new FormData();
    datosFactura.append("idPedido", idPedido);
    datosFactura.append("fecha", fecha);
    datosFactura.append("observaciones", observaciones);
    datosFactura.append("estadoPago", estadoPago);
    datosFactura.append("subtotal", subtotal);
    datosFactura.append("descuento", descuento);
    datosFactura.append("total", total);
    datosFactura.append("productos", JSON.stringify(productos));

    $.ajax({

        url: "ajax/ventas.ajax.php",
        method: "POST",
        data: datosFactura,
        cache: false,
        contentType: false,
        processData: false,
        dataType: "json",
        success:function(respuesta){

            ultimoIdFactura = respuesta;

            console.log(ultimoIdFactura);
        }

    });

    console.log("ultimoIdFactura", ultimoIdFactura);
    return ultimoIdFactura;
}

Un detalle es que la función la estoy utilizando en otro archivo, aunque esto no deberia afectar lo pongo por las dudas. La llamo desde otro archivo llamado consultar-venta.js:

import { insertaFacturaBD } from './ventas/funciones.js';

$("#modal-crear-factura .boton-modal-facturar").click(function(){```

    /*desabilita el boton para evitar el doble click*/
    $(this).prop('disabled', true);

    var idFactura = insertaFacturaBD();
    
    console.log("idFactura", idFactura);

});

¿Como obtengo el valor de la variable ultimoIdFactura en el segundo archivo?

El ultimo console.log() de la función tampoco me devuelve un valor (el que está dentro del ajax en cambio si).

Answer 1

Ajax es un proceso asincrono lo que significa que necesitas un mecanismo que te notifique cuando cuando el proceso asincrono termine y obtener el valor que retornas. Para eso utilizas un callback.

Primero define el parametro indicando que recibes un callback:

export function insertaFacturaBD(callback){

    //...
    $.ajax({

        url: "ajax/ventas.ajax.php",
        method: "POST",
        data: datosFactura,
        cache: false,
        contentType: false,
        processData: false,
        dataType: "json",
        success:function(respuesta){
            ultimoIdFactura = respuesta;
            // notificamos que ya recibimos el id
            callback(ultimoIdFactura);
        }

    });
}

Luego para recibir el valor una vez termine, le envias el callback como parametro al metodo.

Cambiarias esto:

var idFactura = insertaFacturaBD();
console.log("idFactura", idFactura);

A:

insertaFacturaBD(function(id){
    console.log("idFactura", id);
});