Playground: Crea una utilidad para hacer peticiones

Clase 23 de 26 • Curso de Asincronismo con JavaScript

Cristian Soto Repol

student•

Hola buenas a todos, intentare ayudar un poco, primero recuerden que tienen 3 intentos y después de haberlos fallado puedes ver la solución propuesta.

Como ayuda puedo decir que una de las formas mas simples de validar que una url tenga el formato correcto es tratar de inicializarla con new URL(), si esta no cumple el formato url correcto se caerá el intento de instancia devolviendo un error de tipo TypeError. Con una url que no devuelva nada se caerá la transformación a json por no cumplir el standard de este formato. El fetch se usa para consultar un servicio y su implementación lo hemos visto en clases.

Con esto ya están todas las herramientas para solucionar el playground, mucho animo y suerte, tu puedes hacerlo!!!.

Carlos Florez

student•

Muchas gracias!!!

Leopoldo Martinez

student•

Gracias

Gabriel Omar Gramajo

student•

Mi solución:

export async function runCode(url) {
  try { // validar formato correcto url
    new URL(url);
  } catch (e) {
    throw new Error('Invalid URL');
  }
  try { // validar que exista url
    const response = await fetch(url)
    return response.json();   
  } catch (e) {
    throw new Error('Something was wrong');
  }
}

Ricardo Alfonso Chavez Vilcapoma

student•

No sabía que podía haber más de un try-catch dentro de una función. Excelente solución.

Alan Valentín Castellón Cuentas

student•

Con regex para validar el formato de la url

export async function runCode(url) {
  // Tu código aquí 👈
  const options = {
    method: 'GET'
  };
  const reg = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;

  if (!url.match(reg)) {
    throw new Error("Invalid URL");
    return;
  }

  try {
    const response = await fetch(url, options);
    const data = await response.json();  
    return data;
  } catch (error) {
    throw new Error("Something was wrong");
  }
}

Andrea Alejandra Martínez Garnica

student•

una duda, cómo funciona regex, no le entendí y no me salió usando ese método

William Armando Forero Bermeo

student•

@AndyMG Lo que aparece como reg son lo que conocemos como expresiones regulares, estas expresiones tienen un patron para identificar si la informacion ingresada coincide con ciertos patrones , como por ejemplo esta expresion regular se encarga de verificar que todas las URL inicien con https y en este caso la funcion match hace la evaluacion entre la expresion regular y el valor ingresado

ANDRES MAURICIO GUTIERREZ

student•

creo que deberían mejorar el planteamiento de los retos, siento que no están siguiendo los lineamientos de las clases. es como si la persona que diseñó el reto no hubiese visto el curso y le hayan dicho "hey!! necesito un reto en JS que haga una petición a una API y que valide errores."
en la guía se menciona la función fetchData, y en la solución no figura. no quiero extenderme así que este es un solo ejemplo de las falencias de estos retos. creo que muchos estudiantes como yo encontraran una desvinculación entre los ejercicios y los retos.

David Valencia

student•

Totalmente de acuerdo, espero que mejoren esto pronto.

Ulises Serrano Pérez

student•

 Escudo anti spoiler  A continuación dejo mi solución.

. . . . . . .

export async function runCode(url) {
  try {
    const correctUrl = new URL(url);
    const response = await fetch(correctUrl);
    return response.json();
  }
  catch (error) {
    if (error.message.includes('URL')) {
      throw new Error('Invalid URL');
    }
    else {
      throw new Error('Something was wrong');
    }
   }
}

Linda Nayeli Abundis López

student•

Les comparto mi solución, espero que les sirva!

export async function runCode(url) {
  if (url.substring(0, 8) != "https://") {
    throw new Error('Invalid URL');
  }
  else {
    try {

      const response = await fetch(url);
      const data = await response.json();
      return data;


    } catch {
      throw new Error('Something was wrong');
    }
  }
}

Juan David Moreno Rodriguez

student•

export async function runCode(url) {
  const options = {
    method: "GET"
  }

  try {
    new URL(url)
  } catch (error) {
    throw new Error('Invalid URL');
  }

  try { 
    const response = await fetch(url, options);
    const data = await response.json()
    return data
  } catch (error) {
    throw new Error('Something was wrong');
  }
}
runCode('https://api.escuelajs.co/api/v1/categories');

Eliezer Hernandez

student•

En el desafío se evalúa si la url es válida y si se trata de una url que exista, pero no se evalúa si la petición se ha procesado adecuadamente, ya que fetch por si solo no es capaz de lanzar un error si la respuesta HTTP es 404 o 500. Fetch solo lanza un error en caso de que exista un fallo en la red o si algo impidió completar la solicitud, como por ejemplo que la API no exista. . En mi solución, desarrolle estos tres posibles casos, aunque uno de ellos no sea evaluado en el desafío:

Sebastian Varon Corso

student•

Muy buenas explicaciones de los temas como recomendación en esta parte creo que es algo complejo resolver el ejercicio debido a que no sabia de la existencia del new URL() y aunque vi algun comentario sobre esto no sabia que este daba un valor de Failed to construct 'URL': Invalid URL para poder hacer la condicion para la proxima agregen estos temas en las clase. gracias

Pablo Ortiz

student•

Hola! Les dejo mi soluion:

export async function runCode(url) {
  try {
    //check if the url hs the correct formmat
    const urlApi = new URL(url);
    const response = await fetch(urlApi, { method: 'GET' })
      //Catch networking errors 
      .catch(() => { throw new Error('Something was wrong') })

    //check if the fetching was succsesful 
    if (!response.ok) {
      throw new Error('Network response was not OK');
    } 

    const data = await response.json()
    return data;

  } catch (e) {
    const message = (e.name == 'TypeError') ?
      'Invalid URL' : e.message
    throw new Error(message)
  }
}

Felipe Moreno

student•

My solución haciendo uso de regex (expresión muy simple para validar url, se puede mejorar muchísimo), async-await para hacer la llamada asíncrona a la api, además de try y catch para manejar los errores.

export async function runCode(url) {
  if (url.match(/^(https?:\/\/)([a-zA-Z0-9\-]+\.)+.+/g)) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      return data;
    } catch (e) {
      throw new Error('Something was wrong');
    }
  } else {
    throw new Error('Invalid URL')
  }
}

Jose Gabriel Argüello

student•

pregunta, es valido usar varios try catch? no es mala practica y mejor usar uno solo que contemple todas las opciones?

Fernando Orozco Velasquez

student•

Ten en cuenta que ya de por si usar try/catch ya es buena práctica, ahora ya dependiendo de como quieras estructurar y seccionar la lógica de código te harás la idea de cuantos try/catch usar, saludos!

Alejandro Vazquez Vazquez

student•

Al principio me sentí agobiado por que no sabia como empezar y eche un ojo a las respuestas de mis compañeros y sentí que no podía realizarlo por que no entendía como ellos habían podido llegar a la solucion y me sentí frustrado, me pare y deje la pc, después de un rato me quede meditando si saltarme el ejercicio o no, pero después de unos minutos me dije, que si no podía con esto menos con lo que sigue, así que deje de agobiarme y pensé como obtengo datos de fetch lo recordé y lo escribí, y así poco a poco me fui acordando de lo demás, y lentamente y por pasos lo resolví por partes después lo junte y ordene, así me quedo la solucion, este es una pequeño ejercicio pero me siento con mas confianza de seguir avanzando.

marco antonio

student•

No me quería salir como lo tenia pensado así que decidí investigar mis errores, muchas de las formas de resolverlo no difieren mucho *suspiro*

var API  = 'https://api.escuelajs.co/api/v1/categories';
var err_API = '---';

function runCode(url){
    const fnasync = async (URL) =>{
        try{
            const respuesta = await fetch(URL);
            const obj_json  = await respuesta.json();
            console.log(obj_json);}
        catch{ console.error('ha ocurrido un error');}}

    try{
        const direccion = new URL(url);
        fnasync(direccion.href);}
    catch{
        console.error('URL invalida');}}

runCode(API);

Manuel Andres García Vera

student•

para las personas que no quedaron muy convencidas con la forma en la que se resuelve el reto, asi como yo me di a la tarea de resolverla en el VS code con los recursos que se dieron atreves del curso, pero ingresando los parámetros que nos deja el reto

lo pueden tomar como base para que lo modifiquen y obtengan los mismos resultados desde su vsCode, esperos les ayude

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

let statusUrl = null

function validarUrl (urlAPI) {
    try {
        new URL(urlAPI);
        statusUrl = true
    } catch (error) {
        statusUrl = false
    }
}

validarUrl(API)
console.log(statusUrl);


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

    const anotherFn = async (urlApi) => { 

        try {
            //const products = await fetchData(`${urlApi}/products`);
            //const product =  await fetchData(`${urlApi}/products/${products[0].id}`);
            const category = await fetchData(`${urlApi}/categories`);
    
            //console.log(products);
            //console.log(product.title);
            console.log(category);
    
        } catch (error) {
            
            console.error(`Something was wrong
                        ${error}`);
            
        }
    
    }

if (statusUrl === true) {
    anotherFn (API)
} else{
    console.log('INVALID URL');
}```

Rolando Osorio

student•

Mi respuesta a este playground:

export async function runCode(url) {
  const OPTIONS = { 
    method: "GET"
  }

  try {
    new URL(url)
  } catch (err) {
    throw new Error('Invalid URL', err);
  }
  
  try {
    const respuesta = await fetch(url, OPTIONS)
    const data = await respuesta.json()
    return data
  }
  catch (err) {
    throw new Error('Something was wrong', err);
  }
}

Angel Agustín Hernández Soledad

student•

Observación rápida, si les funciona todo bien en la consola, pero al momento de realizar las pruebas les manda error, muy probablemente sea pq están utilizando return en lugar de utilizar throw, simplemente cambiarlo y funcionara!

Carlos Colin

student•

Les dejo una posible solución a este problema. En ella utilizo expresiones regulares para validar la URL de entrada. * * * * * *

export async function runCode(url) {
  // Tu código aquí 👈
  // Validacion de Url
  const regex = new RegExp(/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi)
  if (!regex.test(url)) throw new Error('Invalid URL')
  // Fetch and transform to json:
  //  en el catch lanzar error "Something was wrong"
  return await fetch(url)
    .then(res => res.json())
    .catch(() => { throw new Error('Something was wrong') })
}

Orlando Rodriguez

student•

Tengo un problema, abajo dejo mi solucion, la cual me funciona pero no logro integrarla a esa funcion runCode que debe estar ajuro para validar el ejercicio. * * * * * * * * * * * * *

async function fetchData (api) {
    try{
        const response = await fetch(api);
        const data = await response.json();
        if (data.statusCode === 404 ){
            console.error('Something was wrong')
        } else {return data}
    } catch (error) {
        console.error('Invalid URL');
    }
}

Orlando Rodriguez

student•

Help meee Nicolas!

Evelin Lorena Flores García

student•

Esta es una forma rapida de como lo implemente espero que te ayude

export async function runCode(url) { //const url = 'https://api.escuelajs.co/api/v1/categories'; const respuesta = await fetch(url); const datos = respuesta.json(); return datos;

} (async () => { try { const datos = await runCode(https://api.escuelajs.co/api/v1/categories) return datos; } catch (error) { console.log(error); } })();

Vicente Valderrama

student•

Tengo una duda con la solución, ¿ .message es un atributo?, ¿ese mensaje que se utiliza para hacer la validación es nativo de JS o del navegador, o de donde salió?

Playground: Crea una utilidad para hacer peticiones

Introducción

Lo que aprenderás en este curso

Qué es el asincronismo

Event Loop

Iniciando a programar con JavaScript

Callbacks

Configuración

Qué son los Callbacks

Playground: Ejecuta un callback con 2s de demora

XMLHTTPRequest

Fetch data

Callback hell

Promesas

Qué son las promesas

Playground: Crea una función de delay que soporte asincronismo

Fetch

Fetch POST

Async Await

Funciones asíncronas

Try and catch

Playground: Captura el error de una petición

¿Cómo enfrentar los errores?

Generadores

Generators

Proyecto CV

Proyecto del curso

Consumiendo API

Desplegando el proyecto

Playground: Crea una utilidad para hacer peticiones

Nunca pares de crear

Conclusión

¿Qué camino tomar para seguir aprendiendo?

Autoevaluación de Proyecto: Creación de Landing Page