TransWikia.com

como se relaciona .resolve() y .reject() con .then() y .catch()

Stack Overflow en español Asked by Emmanuel Maximino Lopez Licea on November 18, 2021

Estoy aprendiendo JavaScript y justo ahora me topo con asincronismo que apenas estoy comenzando a saber como funciona, la cosa es que todavía no logro entender muy bien para que sirve .resolve() y como se relaciona con .then(), al igual que .reject() y .catch(), entiendo que resolve es cuando la promesa se resuelve con éxito y reject cuando se rechaza, lo que pienso es que resolve y reject es como cuando pasamos una función dentro de otro, que solo son el nombre y dentro tienen el método .then() y .catch() respectivamente, pero al ver que resolve y reject tienen paréntesis por ende son funciones y me hace pensar que estoy equivocado, alguien tiene alguna idea?

ADJUNTO MI CÓDIGO.

function getPersonaje(id) {
return new Promise((resolve, reject) => {
    const personaje = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;

    // $.get permite hacer un request.
    $.get(personaje, opts, function(data) {
            resolve(data)
        })
        .fail(() => reject(id));
});
}

function onError(id) {
    console.log(`Sucedio un error al obtener el personaje ${id}`)
}

getPersonaje(1)
    .then(function(personaje) {
        console.log(`Hola soy ${personaje.name}`)
    })
.catch(onError);

One Answer

Resolve y reject son parámetros de una callback con el que se construye una Promise, y así como has dicho una se relaciona con then y otra con catch, donde resolve sirve para retornar o no un valor cuando no han ocurrido errores.

Mientras que catch sirve para atrapar o arrojar el error obtenido.

Cabe aclarar que resolve y reject funcionan como retornos, es decir, es prácticamente el equivalente a la sentencia return pero para una promise, la diferencia es que al invocarse las callbacks resolve y reject que provee la misma promise, le estamos diciendo a ésta qué camino debe tomar, ya sea devolvernos un error o devolvernos un valor, por lo tanto el objetivo de .then y .catch es manejar el código asíncrono, de tal forma que controlemos tanto los errores como la ejecución y el fin de la promise. De esta manera, la promise sabrá qué hacer y en qué momento terminará una vez finalizada, también sabrá qué valor retornar una vez se haya terminado de ejecutar.

Si no colocamos resolve ni reject, la promise nunca será resuelta ni rechazada, teniendo así una promise infinita, una promise que estará en su estado Promise<pending> durante el resto de su eternidad, por lo tanto si tenemos una promise infinita al usar .then y .catch no se entraría nunca ni al uno ni al otro y la promise nunca retornaría ni un valor ni un error.

Así que .then y .catch se pueden encadenar, para siempre tener en cuenta ambas posibilidades (entrar al then si la promesa se resolvió con éxito o ir al catch si la promesa fue rechazada).

Con respecto a si .then y .catch son funciones te equivocas, éstos son métodos, debido que hacen parte de la instancia de una clase Promise.

Entonces tomemos de ejemplo este fragmento de código:

getPersonaje(1)
    .then(function(personaje) {
        console.log(`Hola soy ${personaje.name}`)
    })
.catch(onError);

Ahí mismo podemos ver cómo dependiendo de un parámetro la promesa se resuelve o se rechaza, en caso de que se resuelva se procede a obtener por medio de una callback en .then el resultado retornado por la promise, que en este caso el resultado se llama personaje y se imprime.

Por otro lado, en caso de haber error no estás haciendo nada, puesto que el .catch también debería ser un callback, así que yo en el .catch pondría algo como esto:

.catch(e => console.log(e));

Donde e => console.log(e) no es mas que una función flecha minimizada.

Por lo tanto, lo has entendido bien la forma en la que .then y .catch se relacionan, solo tenías un pequeño error de concepto, nada más.

¿Quizá quisiste ser mas específico con respecto a algún detalles más a fondo que no entiendas? Creo que lo has entendido bien.

Bueno, un detalle extra que te quiero comentar para que lo tengas en mente, y es que desde hace relativamente un tiempo existen algo llamado funciones asíncronas, las cuales no son mas que el wrapper de una promise, una peculiaridad que existe de las funciones asíncronas es que sea que tú le pongas un return o no a la función asíncrona ésta siempre va a devolver una promise.

Por lo tanto, veamos un ejemplo de función asíncrona y sus posibles usos con await:

async function makeTransaction(){
  
  return await new Promise((res, rej) =>{
    setTimeout(()=>{
      res(true);
    },2000);
  });
  
}

makeTransaction().then((transactionExited)=>{
  console.log(transactionExited);
});

Como vemos podemos usar algo nuevo SOLO EN LAS FUNCIONES ASÍNCRONAS y es la palabra reservada await, además ésta NO puede ser usada en el contexto global.

La palabra reservada await tiene como objetivo obligar a la función asíncrona a esperar ya sea el error o el valor obtenido, por lo tanto lo que hace es pausar la ejecución de la función y luego cuando la promise de la cual estamos intentando obtener un valor haya sido resuelta o rechazada la reanuda y nos devuelve el valor donde queremos.

De esta manera podemos organizar de mejor forma nuestro código, por supuesto lo ideal es no usar funciones asíncronas para código que es síncrono, pero en caso de que estemos manejando código asíncrono y multiples llamadas asíncronas es súper recomendable utilizar funciones asíncronas, pues en ese caso await nos hace la vida más fácil.

Answered by Riven on November 18, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP