3

Tengo el siguiente código en un archivo js.

firebase.initializeApp({
    apiKey: "AXxxxXXxXxXxx0_iDxXXXXxxXXXXXnU",
    authDomain: "xxxxx.firebaseapp.com",
    databaseURL: "https://xxxxx.firebaseio.com",
    projectId: "xxxxxx",
    storageBucket: "xxxxxx.appspot.com",
    messagingSenderId: "0000000000000",
    appId: "1:000000000000:web:f0000eadb00000f"
});
var db = firebase.firestore();

function milogin(pCorreo,pClave){
    var estado = false;
    console.log('Entro al loginDat');
    var elCorreo = pCorreo;
    var laClave = pClave;

    var docRef = db.collection("usuarios").doc(elCorreo); 
    docRef.get().then(function(doc) {
        console.log('Entro al metodo get');
        if (doc.exists) {
            console.log('Entro a encontro el correo');
            if(doc.data().clave == laClave){  
                console.log('Entro a la contraseña válido');              
                var toastHTML = '<span>Bienvenido</span>';
                //M.toast({html: toastHTML});
                console.log("verdadero de la contraseña");
                estado = true;                                                    
            }
            else{
                var toastHTML = '<span>Datos no válidos</span>';
                M.toast({html: toastHTML});
            }
        } else {
            var toastHTML = '<span>Datos no válidos</span>';
            M.toast({html: toastHTML});   

        }
    }).catch(function(error) {
        console.log("Error getting document:", error);  
    });  
    console.log('Salio al login');
    return estado;
 }

El problema que tengo cuando llamo la función es que primero se ejecutan las líneas:

var estado = false;
console.log('Entro al loginDat'); 
var elCorreo = pCorreo;
var laClave = pClave;
console.log('Salio al loginDat');

hasta que termina la función se ejecuta las siguientes

docRef.get().then(function(doc) {
        console.log('Entro al metodo get');
        if (doc.exists) {
            console.log('Entro a encontro el correo');
            if(doc.data().clave == laClave){  
                console.log('Entro a la contraseña válido');              
                var toastHTML = '<span>Bienvenido</span>';
                //M.toast({html: toastHTML});
                console.log("verdadero de la contraseña");                                                    
            }
            else{
                var toastHTML = '<span>Datos no válidos</span>';
                M.toast({html: toastHTML});
            }
        } else {
            var toastHTML = '<span>Datos no válidos</span>';
            M.toast({html: toastHTML});   

        }
    }).catch(function(error) {
        console.log("Error getting document:", error);  
    });

Entonces, cuando en mi pagina php ejecuto la función milogin, siempre me retorna false; aunque el login sea válido (ya esta probado que hace el login con firebase) nunca me retorna verdadero por que termina la función pero me retorna falso, despues que me retorna falso se ejecuta el bloque que hace la consulta a firebase pero como la función ya terminó no me logra retornar verdadero.

1
  • Lo que pasa es que trabaja de forma asincronica, el then(...) se ejecutara despues de que firebase conecte con el servidor y pueda traer los datos, mientras que el resto de la funcion se ejecuta al instante. Commented el 2 jul. 2019 a las 1:56

1 respuesta 1

2

Bienvenido Jose... Lo que sucede va mas allá de un error de código(definitivamente no es un error de código), sino de un concepto que se aplica en tu caso. Se llama asincronismo. Su concepto básico es el siguiente:

La programación asíncrona nos da la capacidad de “diferir” la ejecución de una función a la espera de que se complete una operación, normalmente de I/O (red, disco duro, …), y así evitar bloquear la ejecución hasta que se haya completado la tarea en cuestión. Esto es posible gracias a que las funciones son ciudadanos de primer nivel (first-class citizens) y pueden ser pasadas como argumentos de otras funciones tal cual lo haríamos con las variables.

Todo tu código esta bien estructurado, y naturalmente las instrucciones se ejecutan linea por linea, "habitualmente" es lo que sucede. Pero el concepto de asincronismo que hice mención (en tu caso) hace uso de promesas.

Haciendo una cita a una definicion de promesas:

Las promesas son una solución para implementar código asíncrono que aparece con el objetivo de reemplazar a los callbacks. Al ser una abstracción más avanzada, las promesas permiten operaciones como esperar a que diversas operaciones asíncronas terminen de ejecutarse de manera concurrente, mejoran la legibilidad del código y facilitan el manejo de errores. En definitiva, no son simplemente una moda sino que también aportan ventajas competitivas frente a los callbacks.

Repitiendo lo que mencione anteriormente, las instrucciones se ejecutan "habitualmente" linea por linea, Termina de ejecutar una y pasa a la siguiente, y a la siguiente, y a la siguiente... y así sucesivamente.

Pero que llegaría a pasar si una instrucción tardara demasiado en ejecutarse?

Recordemos que firebase es una plataforma completa un muchas funciones interesantes, como por ejemplo autenticacion, hosting, almacenamiento, y en tu caso, una base de datos, esta base de datos puede o no tardar (satisfactoriamente o no) cierto tiempo en responder dependiendo de muchos factores, como que tan compleja es la solicitud realizada, tu ancho de banda, cantidad de datos que vendrán con tu respuesta, estrés del mismo servidor, etc.

Osea, teniendo en cuenta un uso habitual de esto, si estas instrucciones se ejecutaran de forma habitual ( o SINCRONICA) habría ciertos inconvenientes con los tiempos de respuestas, y en tal caso también algunas complicaciones menores a la hora de verificar que la solicitud realizada haya traído los datos requeridos( o no ).

La posible solución para este caso y así evitar ese tiempo de espera es la aplicación de este concepto en el cual permite que una vez leída esta instrucción, esta este realizando en un loop de eventos, y paralelamente se sigan ejecutando las demás instrucciones sin que la anterior bloquee el funcionamiento del programa. pero no termina ahí, una vez que la instrucción que haya entrado a ese loop de eventos haya concluido con su solicitud, esta responderá inmediatamente con una respuesta (satisfactoria o no) después de la ultima instrucción que se haya ejecutado, sin importar que esta se haya leído mucho antes...

Para redondear: imagínate que aquí no importa cual instrucción se haya ejecutado primero, sino quien responde primero

Ahora si, si vemos tu código en Firebase:

function milogin(pCorreo,pClave){
    var estado = false;
    console.log('Entro al loginDat');
    var elCorreo = pCorreo;
    var laClave = pClave;

    var docRef = db.collection("usuarios").doc(elCorreo); 
    docRef.get().then(function(doc) {   // <------ LINEA MUUUY IMPORTANTE
        console.log('Entro al metodo get');
        if (doc.exists) {
            console.log('Entro a encontro el correo');
            if(doc.data().clave == laClave){  
                console.log('Entro a la contraseña válido');              
                var toastHTML = '<span>Bienvenido</span>';
                //M.toast({html: toastHTML});
                console.log("verdadero de la contraseña");
                estado = true;                                                    
            }
            else{
                var toastHTML = '<span>Datos no válidos</span>';
                M.toast({html: toastHTML});
            }
        } else {
            var toastHTML = '<span>Datos no válidos</span>';
            M.toast({html: toastHTML});   

        }
    }).catch(function(error) { //  <-------  OTRA LINEA IMPORTANTE
        console.log("Error getting document:", error);  
    });  
    console.log('Salio al login');
    return estado;
 }

Fíjate que comente dos lineas de tu código: a partir de esa linea se hace uso de Promesas:

Como nos damos cuenta?

Por el uso de estas funciones .then() y catch(). La función then() devuelve la respuesta con los datos mientras que la función catch() se ejecuta en caso de que haya algún tipo de error.

Si analizamos esto, una vez que el interprete lee la funcion then(), automáticamente lo envía a ese event loop mencionado y sigue ejecutando las demas instrucciones sin importarle cuanto se tarde... eso si, cuando termine de ejecutarse se ejecutara lo que esta funcion tendra dentro:

docRef.get().then(function(doc) { //  <---
        // instrucciones...
        ...
        ...
        ...
})

Es muy complicado de explicar este concepto mediante una simple respuesta, por mas expresivo y claro que seamos... pero existe muchísima documentación sobre esto que te podrá ayudar para entenderlo...

Te dejo este enlace que es bastante claro sobre como es su funcionamiento.

Javascript Asíncrono

Espero sea de tu ayuda...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.