Existen muchos momentos en donde deberemos unir métodos para obtener los resultados que queremos. En este post, te enseñaremos cómo concatenar promesas con Fetch para que manejes tus peticiones HTTP con varios métodos.
¿Qué es concatenar promesas?
Cuando hablamos de concatenar promesas, nos referimos a una técnica muy utilizada en el manejo de procesos asíncronos. Esta concatenación o encadenamiento de procesos asíncronos se refiere a ejecutar operaciones seguidas. Esto hace que la siguiente se inicie cuando la anterior ha terminado y devuelto un resultado. Entonces, la siguiente operación será ejecutada a partir de este resultado.
Concatenar o encadenar métodos solo es posible cuando el método anterior devuelve un valor que el método siguiente puede recibir. Es decir, el método 1 deberá devolver un array si este es el tipo de valor que recibe el método 2.
Te ponemos un ejemplo muy básico con pseudocódigo. Supongamos que, como te contamos en nuestro post sobre promesas en frontend JavaScript, nuestra madre nos ha pedido ir a por patatas a la tienda. Si volvemos con patatas (la promesa se resuelve), ella hará una tortilla. Sin embargo, si no volvemos con patatas (la promesa se rechaza), pediremos una pizza.
irPorPatatas (tienda)
.then (hacerTortilla)
.catch (pediPizza)
Hasta este momento, no hay mayor encadenamiento, pues el método then y catch no son dependientes del otro. Sin embargo, supongamos que, antes de hacer la tortilla, debemos cortar las patatas. Entonces, podríamos agregar el siguiente método.
irPorPatatas (tienda)
.then (cortarPatatas)
.then (hacerTortilla)
.catch (pediPizza)
Como puedes ver, hemos logrado concatenar dos métodos then en nuestro pseudocódigo. Esto nos permitirá que, una vez cortadas las patatas, haremos la tortilla en función del resultado de esto. Ten presente que el siguiente método encadenado, hacerTortilla, solo funcionará si se resuelve la promesa anterior. Es decir, si nos cortamos un dedo en el método cortarPatatas, llegaríamos a un catch para capturar este error en vez de seguir adelante con la tortilla.
A continuación, te explicamos esto mismo pero al concatenar promesas con Fetch.
¿Cómo concatenar promesas con Fetch?
En nuestro post sobre peticiones HTTP con Fetch te hemos explicado que las peticiones hechas con este método devuelven una promesa. Esto quiere decir que podemos manejar sus resultados con métodos como then y catch. Entonces, las siguientes líneas de código son un gran ejemplo de concatenar promesas con Fetch:
getData () {
const url = «https://urldeapiinventado.com»
fetch (url)
.then (responseHttp);
return responseHttp.json ( );
})
.then ((tweets) => {
console.log (tweets);
});
En las líneas de código anteriores, hemos creado una función getDate en la que declaramos una constante con el enlace que pasaremos como parámetro del método fetch. Luego, hemos encadenado varios métodos then y catch para actuar sobre esta petición. El primer método then transforma la respuesta a un formato json. Luego, a partir de esta respuesta se toman los datos de la petición, llamados tweets en este caso, para pintarlos en pantalla.
Ten presente que el ejemplo anterior solo funciona porque el método json nos devuelve una promesa. Por ello, el siguiente método then puede recibir esa promesa y ejecutar alguna acción con ella.
Ahora, para volver este ejemplo aún más complejo. Podríamos pensar en que el método json nos devuelve un error. Para ello, podemos hacer que nuestra petición pida una imagen. Entonces, la transformación a JSON de la respuesta iría mal y tendríamos que capturar su error de algún modo. Para manejar este caso, tendríamos que agregar un método catch, que captura y controla errores.
A continuación, te mostramos cómo encadenamos, además de los dos métodos then, un método catch para manejar los posibles errores. Ten presente que este método manejará cualquier error que salga, sea en la petición o en alguno de los puntos then.
getData () {
const url = «https://urldeapiinventado.com»
fetch (url)
.then (responseHttp);
return responseHttp.json ( );
})
.then ((tweets) => {
console.log (tweets);
})
.catch ((error) => {
console.log (error)
});
Si quieres aprender más sobre el proceso de encadenamiento de promesas, no solo a la hora de concatenar promesas con Fetch, sino de manera general, te recomendamos leer la sección de encadenamiento en el post usar promesas de la MDN.
¿Cuál es el siguiente paso?
Ahora que sabes cómo concatenar promesas con Fetch, ¡es momento de aplicar este conocimiento en tus propios proyectos! Para ello, el siguiente paso es aprender a crear todo tipo de proyectos web con nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar con herramientas y lenguajes de programación como JavaScript, HTML, CSS y JSX. ¿A qué esperas para dar el siguiente paso en tu camino como desarrollador web? ¡Inscríbete ya!
