¿Qué es Promise?

Promise es un objeto de javascript que es muy útil para operaciones asíncronas. Esta representa un valor que puede estar disponible en el futuro, o nunca. La promesa puede cumplirse y podremos obtener el valor, o quizas no se cumpla y no tendremos el valor. En este articulo veremos su sintaxis.

Describamos un escenario en donde utilizar promesas nos es muy útil. Supongamos que en nuestro codigo hacemos una llamada a un servicio que nos devuelve un nombre de usuario, y ese valor retornado lo utilizamos para hacer otras cosas... para simplificarlo vamos a decir que queremos que ese valor se imprima por pantalla.
El codigo podria ser algo asi:

    let usuario = "";


    const obtenerUsuario = () => {
    
        console.log("Buscando usuario...");
        
        setTimeout(() => {
            return "Flipper"
        }, 3000);
    }
    
    usuario = obtenerUsuario();
    
    console.log(`Usuario obtenido: ${usuario}`); //OUTPUT : Usuario obtenido: undefined
    

Nuestra funcion obtenerUsuario hace la peticion al servicio. Para simular la tardanza en el servicio utilizamos setTimeout. Corremos nuestro programa y que ocurre ? UNDEFINED.
La razon del undefined es que se esta ejecutando de manera asincrona nuestro obtenerUsuario, entonces cuando imprimimos por pantalla el usuario, no hay ningun valor porque el servicio no completo la transaccion, o sea estamos imprimiendo algo que todavia no le fue asignado un valor.

Nuestra solucion implicaria que una vez terminada la transaccion, se imprima el valor. Aca es donde nos son utiles las promises. Las promises permiten obtener un valor cuando la operacion se completa y no antes.
La sintaxis es declarar el objeto Promise y recibir por parametro dos callbacks llamados resolve y reject, en el caso de que la operacion sea exitosa le pasamos a resolve lo que queremos que devuelva como valor, caso contrario usamos el reject.
Que simbolizan estos callback ? los estados de una promesa, resuelta o fallida. Una vez escrita la promise llamamos a nuestro metodo y en caso de que la respuesta del servicio sea exitosa accederemos al resultado con '.then' (que recibe un callback con la respuesta como parametro)

    
    let usuario = "";
    
    const obtenerUsuario = () => {
        return new Promise ((resolve, reject) => {
                console.log("Buscando usuario...");
        
                setTimeout(() => {
                    resolve("Flipper");
                }, 3000);
      });
      
    }
        
        
    
    obtenerUsuario().then((res) =>{
        usuario = res;
        console.log(`Usuario obtenido: ${usuario}`);
    });

Corremos de nuevo nuestro programa y vemos que su comportamiento es el esperado!!!
En el ejemplo usamos un caso feliz, este servicio es bastante simpatico y siempre nos devuelve un usuario, pero si no encuentra el usuario y devolviera un error ? En ese caso las promesas tienen el ya mencionado reject.
Vamos a hacer que nuestro servicio espere un token que de no tenerlo nos lanza un mensaje de error. Para poder ver nuestro mensaje de error, no basta solo con el .then sino que las promises nos proveen de .catch que tambien reciben por parametro el error para poder acceder a el dentro del bloque de codigo. Nuestro token va a ser false para poder caer en el catch:

    let usuario = "";
    let token = false;
    
    const obtenerUsuario = () => {
        return new Promise ((resolve, reject) => {
                console.log("Buscando usuario...");
                
                setTimeout(() => {
                    if (token) {
                        resolve("Flipper");
                    }
                    else {
                        reject("No se encontro usuario :C");
                    }
                    
                }, 3000);
      });
      
    }
        
        
    
    obtenerUsuario()
    .then((res) =>{
        usuario = res;
        console.log(`Usuario obtenido: ${usuario}`);
    })
    .catch((err) => {
    
        console.log(err)
    });