Try and catch

Clase 16 de 26 • Curso de Asincronismo con JavaScript

Maria Gabriela Rodriguez Cuevas

student•

🎭 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟰: 𝗧𝗿𝘆 𝗮𝗻𝗱 𝗰𝗮𝘁𝗰𝗵 𝟭𝟰/𝟮𝟭 🎭 . En ésta clase vamos a implementar lo aprendido de async/await usando la API y una nueva estructura con try/catch. . 🚨 Importante recordar que la estructura de async/await se compone por las palabras reservadas async y await: .

La palabra async se coloca antes de la función (la otra forma es con funciones flecha en que el async va antes que los argumentos).
La palabra await se utiliza dentro de las funciones async. .

🖇️ Otra forma de hacer que async/await espere a varios llamados a la vez es con la estructura: ++Try /Catch++: .

La palabra reservada try consiste en un bloque que contiene una o más sentencias, como hacíamos con resolve.
- Su cuerpo está conformado por las llaves {} las cuales se deben utilizar siempre, incluso para un bloque de una sola sentencia.
También puede estar presente un bloque con la palabra reservada catch.
- Un bloque catch es opcional (como hacíamos con reject) y contiene sentencias que especifican que hacer si una excepción es lanzada en el bloque try.
- Si no se lanza ninguna excepción en el bloque try, el bloque catch se omite. .

✏️ ++Ejemplo:++ La estructura try / catch se asemeja a if / else, solo que catch puede detectar un error en caso de que haya uno:

const anotherFunction = async (url_api) => {
        try {

        } catch (error){

        }
}

. 🛠️ - Siguiendo con el proyecto, ir a VSC, crear en src/async el archivo ++challenge.js++

El código (comentado) de src/ async/challenge.js queda:

import fetch from 'node-fetch';
const API = 'https://api.escuelajs.co/api/v1';

//Lógica de async: ir por los datos, luego esperar por ellos y finalmente retornarlos hacia el usuario
async function fetchData(urlApi) { //siempre async antes de function
    const response = await fetch(urlApi); //hacemos uso del fetch()
    const data = await response.json(); //estructura de los datos transformandolos en json
    return data; //retorna la información de la API que estamos solicitando
}

//también se puede colocar la palabra async antes del argumento y se usa arrow function
const anotherFunction = async (urlApi) => {
    //En try estará todo lo que queremos que suceda con la lógica de la aplicación
    try{
        const products = await fetchData(`${urlApi}/products`);
        const product = await fetchData(`${urlApi}/products/${products[0].id}`);
        const category = await fetchData(`${urlApi}/categories/${product.category.id}`);

        console.log(products);
        console.log(product.title);
        console.log(category.name);
    } catch(error) { //Atraparemos un error en caso de que haya uno
        console.error(error);
    }
}

anotherFunction(API); //se hace el llamado

🖥️ ++Salida de src/async/challenge.js++ .

Cuando se ejecuta console.log(products); en fetchData se solicita todos los productos de la API con ${urlApi}/products es por eso que vemos en la salida una larga lista de bloques entre corchetes [] y separados por llaves {}. .
Cuando se ejecuta console.log(product.title); en fetchData se solicita el título de un producto en particular accediendo al atributo title, para ello tenemos que con ${urlApi}/products/${products[0].id} el cero 0 indica la posición de ++products++ que acabamos de almacenar la lista de productos, pero debe finalizar con id porque esa es la forma para acceder al objeto con ese identificador en la posición cero.
- Si solo colocamos ${urlApi}/products/${products[0]} sin el .id, en la consola tendríamos un error de tipo: TypeError: Cannot read properties of undefined (reading 'id') así que no podemos acceder. .
Cuando se ejecuta console.log(category.name); en fetchData se solicita el nombre de la categoría que corresponda al producto que se llamó anteriormente, para ello tenemos ${urlApi}/categories/${product.category.id} y no es necesario indicar la posición porque por cada producto, solo hay un bloque de categoría.

Felipe Soler

student•

Hola, María.

¡Tus apuntes son geniales! ¡Te felicito!

Alfredo Esparza Wong

student•

muy buen resumen

Dario Paladines

student•

Resumen de la clase paso a paso...

Para los nuevos o los que se les hizo confuso entender la lógica aquí un resumen. Primero y principal, para entender lo que estamos haciendo es importante saber que queremos hacer; En este caso consumir la API y traer todos los productos, filtrar el nombre de un producto y categoría a la que pertenece, además debemos ir revisando la documentación de la API, esto nos permitirá comprender mejor los llamados que hacemos. .

Primera parte

Lo primero que hacemos es crear una función "principal" para consumir la API. Recordemos que la constante API, es la url base, es decir si queremos ver que nos devuelve data, nos marcará un error por que la url esta incompleta, ya que si revisan la doc, se necesita mínimo un endpoint (products, categories, user, etc) para devolvernos algo, este endpoint será colocado posteriormente

import fetch from 'node-fetch';
const API = 'https://api.escuelajs.co/api/v1'; //link principal de la API

async function fetchData(urlApi){
    const response = await fetch (urlApi); //consumimos la API, nos devuelve en un formato que no podemos trabajar en JS
    const data = await response.json() //convertimos en formato json (objetos y arrays) para manipularlo     
    return(data);
}

Segunda Parte

Creamos la función asíncrona guardada en la variable "anotherFunction" donde iremos haciendo cada uno de los llamados. Lo primero que hacemos es traernos todos los productos que contiene la API, que si revisamos la documentación nos dice que necesitamos esta URL

https://api.escuelajs.co/api/v1/products

Por ello en la variable "products" ejecutamos la funcion "principal" en este caso "fetchData", le colocamos la url base almacenada en "urlApi" pero aqui ya le estamos agregando el endpoint que mencioné anteriormente, en este caso /products, y con esto en esta variable ya tenemos el array con todos los productos. En el siguiente llamado en la variable "product" necesitamos traer el objeto de un solo producto, en la doc nos dice que es el mismo link, pero agregado el id del # del producto que queramos, en nuestro caso estamos "desglosando" del array principal con todos los productos (products), el primer producto en la posición 0 y nos traemos el id de ese producto, y en esta variable(product) ya tenemos el objeto de un producto en especifico.

const anotherFunction = async (urlApi) => {
    try{
        const products = await fetchData(`${urlApi}/products`)  //consumimos la api con todos los productos 
        const product = await fetchData (`${urlApi}/products/${products[0].id}`) //traemos el objeto de un solo prodcuto (revisar doc para la api)
        const category = await fetchData (`${urlApi}/categories/${product.category.id}`) //traemos el obj category, dentro del obj producto por el id
        
        console.log(products) 
        console.log(product.title)
        console.log(category.name)
    } catch (error){
        console.error(error)
    }
} 

anotherFunction(API)

Luego necesitamos saber la categoría de este producto, en donde el link según la doc es esta. El 1 representa el id que corresponde a la categoría del producto(diferente al id del producto como tal), ahora recordemos que la categoría(llamado category) es un objeto que está dentro del objeto del producto, entonces en el llamado colocamos la url base, el endpoint categories, y luego el id de la categoría ("desglosado" como se muestra)

https://api.escuelajs.co/api/v1/categories/1

Y ya para concluir mostramos en los console.log lo que necesitamos es decir el array con todos los productos, el nombre del producto, y la categoría a la que corresponde. Ejecutamos la función antoherFunction pasándole el valor del parámetro API, que será reemplazado por urlApi y ya estamos. . Espero que le sirva de algo sobre todo para los que somos nuevos entendiendo éstos temas, mas adelante en los cursos de consumo de API REST fortalecerán estos conceptos. Y cualquier duda o aclaración háganla saber :)

Jonathan Jesús Martínez Rodríguez

student•

Excelente aporte. Me ayudó bastante a comprender por completo el tema de la clase!

Emerson David Cabrera Salas

student•

Genial tu aporte, muy aclarador!

Diego Alexander Gomez Chavarria

student•

TRY AND CATCH Nos permite crear un bloque para lo que seria el "resolve" con try. Y otro bloque para lo que seria el "reject" con catch. los pasos son los siguientes: Hacemos el importe de fetch y llamamos la API

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1

creamos la funcion de fetchData la cual utiliza la APi y retornamos la informacion en un tipo objeto JSON, implementando la logica de async y await, en este ejemplo usamos una funcion tradicional

async function fetchData(urlApi) {
    //traemos la informacion de la API con la funcion response
    const response = await fetch(urlApi);
    //transformamos la informacion a un objeto json
    const data = await response.json();
    //retornamos el objeto json
    return data;
}

creamos la funcion que realiza las solicitudes en la que utilizamos try y catch. En esta ocasion usamos una funcion arrow (nueva)

const anotherFn = async (urlApi) => {
    try {
        //segun nuestro ejercicio debemmos llamar primero todos los productos
        const products = await fetchData(`${urlApi}/products`);
        //en el ejercicio, dice que llamamos el primer producto del array que generamos en el paso anterior con su id
        const product = await fetchData(`${urlApi}/products/${products[0].id}`);
        //segun el ejercicio debemos llamar la categoia del producto anterior
        const category = await fetchData(`${urlApi}/categories/${product.category.id}`);

        //imprimimos los resultados en el mismo orden de los llamados de la funcion anterior
        console.log(products);
        console.log(product.title);
        console.log(category.name);
        //si hay errores, los capturamos con catch en su console.error
    } catch (error) {
        console.error(error);
    }
}
//llamamos nuestra funcion dandole como argumento la API la cual va a prepararse segun sean los llamados en la funcion anterior
anotherFn(API);

Cabe anotar que fetch en si misma maneja las promesas

Fabian Gutierrez

student•

en mi cabeza hice una analogia para entender esto en particular (jeje tal vez no me entiendan), pero a la funcion 'fetchData' lo puse como una persona que estaba por alla en una bodega de zapatos (o caulquier cosa) donde tenia toda la info de los productos, y la funcion anotherFuncion como un vendedor, entonces cuando venia un cliente que quiere saber cuantas ref de zapatos tienen, categorias etc.. (hagase referencia a las variables que estan dentro del TRY) se comunicaban entre ellos (simulando el await) y al finalizar daba una respuesta al cliente :D

Daniel Alejandro Castellanos Aroca

student•

Async y Await son mucho más legibles y cómodos de usar 💚

Alejandro Ching

student•

That's right!!!

Sebastian Mera

student•

Exacto quería decir lo mismo pero alguna vez leí que no siempre se deben usar y que no para todos los casos aplica me gustaría saber en cuales ojalá veamos eso próximamente en el curso

German Cavani

student•

Porfirio González López

student•

¿Es canon? Para que la traduzca

Lennyn Harold De los Santos

student•

Me esta encantando este curos

Rubén Ernesto Aragón Gil

student•

Stephany Plaza

student•

A mi me ayuda mucho ver la clase, hacerlo por mi cuenta y comentar todo el proceso para ir entendiendo lo que estoy haciendo

import fetch from "node-fetch";
const API = "https://api.escuelajs.co/api/v1";

//aqui hacemos una funcion normal con async(solo pq si) pero tambien puede ser como la de abajo
//solo se hizo con fines educativos, puedes elegir la manera que te guste mas
async function fecthData(urlApi) {
  const response = await fetch(urlApi); //fecth se refiere a una promesa
  const data = response.json(); //debemos transformar la llamada en json para poder usar esos datos
  return data; // los devolvemos ya transformados
}

//ahora procedemos a consumir la api para obtener todos los productos

const consumirApi = async (urlApi) => {
  try {
    //accedemos a todos los productos usando await para que el codigo "espere" dicha solicitud
    const products = await fecthData(`${API}/products`);
    //ya que tenemos los productos, buscamos el primero con products[0] siendo esta la constante en la linea anterior junto con su id
    const product = await fecthData(`${API}/products/${products[0].id}`);
    //ahora ya tengo el producto, quiero filtrarlo por categoria y para ello uso el id
    const category = await fecthData(
      `${API}/categories/${product.category.id}`
    );
    //ahora simplemente mostramos en consola los resultados obtenidos
    console.log(products);
    //en este llamado podemos acceder al nombre del producto que esta por "title"
    console.log(product.title);
    //en este llamado accedemos al nombre de la categoria que esta por "name"
    console.log(category.name);
    //todo esto se sabe por la documentacion de la API de platzi
  } catch (error) {
    console.error(error);
  }
  //el try y catch es digamos un "intenta esto" y sino "lanza el error(catch)"
};

//ahora solo queda llamar a la funcion pasandole la API de platzi

consumirApi(API);

Espero les sirva :)

Jose Tellez

student•

No entiendes para que usar la estructura TRY y CATCH? . Bien, esta explicacion te servirá, es muy simple. . Imagina que no usas la estructura try y catch en la segunda funcion, donde recibes la respuesta de la peticion. Bueno, lo que va a pasar es que si hay un error en esa petición por un error tuyo al hacer la logica o un error de sintaxis, la ejecución se va a detener por completo y todo se caerá. ya sabes que js tumba todo el codigo si hay un error. . Eso no sería nada agradable para el usuario, porque esos errores pueden a veces pasar o a veces no. . La estructura try y catch es en caso de que se generen esos errores. Si hay un error, entonces la información de ese error se va al parametro de catch y luego tu puedes usar ese parametro para ver el error PERO sin que toda la app se caiga. Con esa estructura, js mandará el error al catch pero seguirá con la ejecución de la app normalmente

Alan Cabrera

student•

¿Por qué cuando ponemos

${urlApi}/categories/${product.category.id}

nos trae correctamente el objeto, pero si le quitamos el ".id" nos da un error? Yo pensaría que poner el "id" nos traería el valor de este, sea 1,2,3... pero en cambio trae el objeto y no entiendo bien el porqué.

Raycris Maldonado

student•

Hola Alan. Es porque la API funciona de esa forma, en la documentancion de la misma lo puedes ver, ademas de que le quitamos el .id estamos entrando a la categoria en general, y lo que queremos es un objeto espeficico de esa categoria. Saludos

Miguel Enrique Velásquez Millán

student•

Así como comentó Raycris, la razón de ello es simplemente porque así funciona esta API en concreto con la que estamos trabajando. Así fue diseñada. Y no nos queda de otra que adherirnos a ese "diseño" si queremos obtener los datos. · Por eso siempre es super duper importante leer la documentación de la API que vayas a implementar en tus proyectos. · En este caso particular, a pesar de que a simple vista da un poco la impresión de que con esa url (${urlApi}/categories/${product.category.id}) lo que estaríamos trayendo sería el id de la categoría y no como tal el objeto en sí, si verificas la documentación de https://fakeapi.platzi.com/ te das cuenta que en realidad, debido a la forma en la que fue diseñada la API, la manera para obtener una categoría en concreto es colocando su identificador como parámetro. ·

· Si queremos obtener la categoría ropa, por ejemplo, hay que saber qué id tiene dicha categoría para poder escribirla en la url a la cual haremos la petición. · En el caso de tu pregunta, la url: ${urlApi}/categories/${product.category.id} Si sustituimos las variables, termina quedando como: https://api.escuelajs.co/api/v1/categories/4 Lo cual es justo la dirección url que se necesita para —siguiendo la documentación de la API— obtener el objeto category de "shoes" (ya que la categoría shoes tiene el id 4). · Así que en resumen, siempre siempre siempre lee bien la documentación de la API que vayas a implementar en tus proyectos, ya que la forma en la que envías y obtienes información de ella depende completamente de cómo la hayan construido/diseñado. · Y lo mismo también se aplica al revés, si vas a crear una API, asegúrate de redactar también su debida documentación para que los demás puedan usarla.

Adriel Francesco Pezo Vizcarra

student•

Una adaptación de lo que realizo el profe Oscar con la API de Rick and Morty. Con 2 funciones para traer todos los personajes o 1 en específico

import fetch from "node-fetch";
const API = 'https://rickandmortyapi.com/api';

async function fetchData(urlApi) {
    const response = await fetch(urlApi);
    const data = await response.json();
    return data;
}

const allCharac = async (urlApi) => {
    try {
        const character = await fetchData(`${urlApi}/character`);
        console.log(character);
    } catch (e) {
        console.error(e);
    }
}

const oneCharac = async (urlApi, num) => {
    try {
        const Ocharacter = await fetchData(`${urlApi}/character/${num}`);
        console.log(Ocharacter);
    } catch (e) {
        console.error(e);
    }
}

//allCharac(API);
oneCharac(API,2);

Gustavo Adolfo Torres Quintana

student•

Genial +++

Eduardo Zegers

student•

solo sé que odio los callbacks hell

Laura Vanessa Bohórquez Ramírez

student•

Ese odio se transformó en amor por async y await(? Es que omg la diferencia es tremenda, un código más legible, más fácil de depurar <3

Henry Alexander Velásquez Rosas

student•

🔥 KISS 🎸

El principio KISS (Keep It Simple, Stupid): mantenlo simple, estúpido, es uno de los principios de programación más conocidos y se refiere al código fuente de un programa que debe ser simple y directo desde el principio.

✨🤗 Lo mismo pero más barato

import fetch from 'node-fetch';
const API = 'https://api.escuelajs.co/api/v1'

const fetchFunction = async () => {
	try {
		const response = await fetch(`${API}/products`);
		const data = await response.json();
		console.log({
			//data: data[0],
			title: data[0].title,
			category: data[0].category.name,
		});
	} catch (err) {
		console.error(err);
	}
}

fetchFunction();

Diego Alexander Gomez Chavarria

student•

Un saludo, La forma que mas me gusto para el asincronismo es con async/await. Me parecio mas sencillo. Quisiera saber como elejimos si usar callbacks, promesas o async/await.

Oscar Barajas Tavares

Team Platzi•

Por defecto utilizamos promesas con Async/Await, pero muchas veces algunos métodos nativos reciben una función como parámetro, lo que las vuelve callbacks, realmente entender como funciona podemos sacarle ventaja según el problema a resolver.

Raycris Maldonado

student•

Hola Diego, yo entiendo que es un tema mas de gusto, aunque con async/await es la forma mas sencilla pero en el ambito laboral nos podemos topas con diferentes formas de como se hace las peticiones

Miguel Enrique Velásquez Millán

student•

Entonces... ¿Básicamente dentro del try colocamos toda la lógica que anteriormente usábamos con los .then? 🤔.

Luzan Muga

student•

Sí, exactamente así :)

Mateo Arboleda

student•

try es como decir "prueba esto".
catch es como decir "si algo sale mal, haz esto en su lugar".

Con async/await, try...catch ayuda a manejar errores de manera más legible y estructurada, permitiendo un control más fácil sobre situaciones inesperadas que puedan surgir en el código asíncrono.

Lucas Aristizábal

student•

lo que no me queda claro en esto, es en los requests cuando pone en lo ultimo ese products[0].id por qué no pone solo products[0] para acceder al objeto? en vez de poner el id que me imagino que solo accederá a ese id.

Lo mismo con "product .category .id", por qué el id y no solo hasta category al final para solo console.loggear un ".title" y un ".name"

Juan Reyes

student•

Respondiendo a tus consultas:

"... cuando pone en lo ultimo ese products[0].id por qué no pone solo products[0] para acceder al objeto?": Esto se debe a que estamos tratando de hacer fetch a un producto en especifico, por lo que referenciar al objeto no nos va a permitir lograrlo con exito de acuerdo a la documentación de la api, tendría que ser especificamente con el ID de un elemento y para ello el profesor utilizó el elemento de indice 0, o el primero.

Lo mismo con la busqueda de la categoria, necesitamos el ID de la misma para retornar el objeto especifico a través de la URL

Lucas Aristizábal

student•

ohh ya veo, entonces si por ejemplo quiero traer varios elementos de un objeto, cómo podría ser? podría poner solamente products[0] o me tocaría traer todo el array de objetos y usar la desestructuración u otros métodos?

Diego Dominguez

student•

Hola. Mi dudas es por qué usar ese segundo await, ya que el primero detiene el proceso de la función asíncrona hasta que esté la respuesta? El response.json solo procede cuando el reponse se haya completado (esté o no el segundo await)

Francisco Ponce

student•

El segundo await es necesario porque response.json() es también una operación asíncrona que necesita esperar hasta que los datos estén disponibles. Aunque response ya está disponible después del primer await, los datos aún no están completamente disponibles para su uso hasta que se complete la operación response.json().

El segundo await detiene la ejecución de la función hasta que se obtengan los datos en formato JSON desde la respuesta del servidor, de modo que podemos asignarlos a una variable y usarlos posteriormente.

Por lo tanto, usar ambos await es necesario para asegurarse de que la función espere hasta que todos los datos estén disponibles antes de continuar con la ejecución del código.

Marcelo Daniel Yudis

student•

Me ha saltado un error que no consigo solucionar:

Exception in PromiseRejectCallback: file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:8 return data

RangeError: Maximum call stack size exceeded Exception in PromiseRejectCallback: file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5 const response = await fetchData(urlApi); ^

RangeError: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:4:25) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28) at fetchData (file:///home/marceloyudis/zortafolio/sincronismont/asinawait/challenge.js:5:28)

Fernanda Vidal

student•

Alguna función esta siendo llamada infinitamente. Espero que hayas podido resolverlo. en caso que no, podrías compartirme tu código y lo checamos ☺

Sebastian Giraldo

student•

siempre es necesario convertir los datos en un json? estoy viendo que siempre se repite esa parte, no hay otra forma de construir un fetch sin tanta repeticiones?

jesus piedrahita

student•

Hola sebastian espero resolver tu duda

siempre es necesario convertir los datos en un json? = se convierte por la necesidad de entender y leer mejor la estructura de los datos, tambien para la manipulacion interna que se lleva en un proyecto.
estoy viendo que siempre se repite esa parte, no hay otra forma de construir un fetch sin tanta repeticiones? = en el video anterior se empleo la siguiente estructura:
se observa 3 'response.json()' eso es por cada peticion que le realizamos a la API entonces para evitar esas repeticiones epleamos el 'async await' una funcionalidad que llega para ayudarnos a tener una mejor estructura a nuestro codigo y evitar esas repeticiones que mencionas como lo ves en este codigo:
Si observas solo te encuentras con un response.json() por tres peticiones que se solicitaron en esta clase (espero te pueda servir mi aporte colega)

Erick Ventura

student•

Siempre es necesario convertirlos en algún formato, por ejemplo blob, text, xml

Si te parece que código es repetido, lo que puedes es realizar una función que retorne una promesa o async función que se encargue de la tarea del llamado y el convertir y luego usarlo en tus proyectos