Try and Catch

<aside> 💡 Con el try...catch podemos hacer que async/await espere a varios llamados a la vez.

</aside>

const anotherFunction = async () => {
  try {
		// ...
  } catch {
		// ...
  }
}

• try

  • Consiste en un bloque que contiene una o más sentencias, como haciamos con resolve.
  • Su cuerpo está conformado por las llaves {} las cuales se deben utilizar siempre, incluso para un bloque de una sola sentencia.

• 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.

Llamado a API con Fetch y funciones asíncronas

En este clase realizaremos el mismo challenges hecho en clases anteriores pero con funciones asíncronas.

• Como sabemos empezamos importando fetch y la url de la API.

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

• Realizamos la función fetchData con async y utilizamos await al momento de usar fetch debido a que es una promesa que queremos esperar a que se resuelva e igualmente con response.json().

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

• En otra función asíncrona anotherFn realizamos los llamados a través de fetchData de la información que hicimos en challeges anteriores. Luego mostramos en consola.

  const anotherFn = async (urlApi) => {
    try {
      const products = await fetchData(`${urlApi}/products`);
      const product = await fetchData(`${urlApi}/products/${products[0].id}`);
      const category = await fetchData(
        `${API}/categories/${product.category.id}`
      );
  
      console.log(products[0]);
      console.log(product.title);
      console.log(category.name);
  
    } catch (error) {
      console.error(error);
    }
  };
  

  <aside> 💡 Dentro de un try...catch para captar el error de todas las promesas realizadas.

  </aside>

• Al ejecutar debería mostrarnos las peticiones.

  anotherFn(API);
  

  {
    id: 2,
    title: 'Rustic life',
    price: 469,
    description: "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
    category: {
      id: 3,
      name: 'Furniture',
      image: '<https://api.lorem.space/image/furniture?w=640&h=480&r=3214>'
    },
    images: [
      '<https://api.lorem.space/image/furniture?w=640&h=480&r=416>',
      '<https://api.lorem.space/image/furniture?w=640&h=480&r=8744>',
      '<https://api.lorem.space/image/furniture?w=640&h=480&r=2353>'
    ]
  }
  Rustic life
  Furniture