Playground: Crea una utilidad para hacer peticiones
Clase 23 de 26 • Curso de Asincronismo con JavaScript
Contenido del curso
Cristian Soto Repol
student•
hace 3 años
Carlos Florez
student•
hace 3 años
Leopoldo Martinez
student•
hace 3 años
Cristian Soto Repol
Carlos Florez
Leopoldo Martinez
Gabriel Omar Gramajo
Ricardo Alfonso Chavez Vilcapoma
Alan Valentín Castellón Cuentas
Andrea Alejandra Martínez Garnica
William Armando Forero Bermeo
Ulises Serrano Pérez
ANDRES MAURICIO GUTIERREZ
David Valencia
Linda Nayeli Abundis López
Juan David Moreno Rodriguez
Eliezer Hernandez
Sebastian Varon Corso
Pablo Ortiz
Felipe Moreno
Jose Gabriel Argüello
Fernando Orozco Velasquez
Alejandro Vazquez Vazquez
marco antonio
Manuel Andres García Vera
Rolando Osorio
Angel Agustín Hernández Soledad
Carlos Colin
Orlando Rodriguez
Orlando Rodriguez
Evelin Lorena Flores García
Vicente Valderrama
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!!!.
Muchas gracias!!!
Gracias
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'); } }
No sabía que podía haber más de un try-catch dentro de una función. Excelente solución.
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"); } }
una duda, cómo funciona regex, no le entendí y no me salió usando ese método
@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
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'); } } }
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.
Totalmente de acuerdo, espero que mejoren esto pronto.
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'); } } }
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');
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:
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
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) } }
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') } }
pregunta, es valido usar varios try catch? no es mala practica y mejor usar uno solo que contemple todas las opciones?
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!
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.
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);
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'); }```
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); } }
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!
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') }) }
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'); } }
Help meee Nicolas!
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);
}
})();
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ó?