Playground: Crea una utilidad para hacer peticiones

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

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');
  }
}

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");
  }
}

👽 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');
    }
   }
}

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')
  }
}

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');
    }
}

Esta fue mi solución.
*
*
*
*
*
*
*
*

export async function fetchData(url) {
    try {
        new URL(url);
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        if (error.code === 'ENOTFOUND') {
            throw new Error('Something was wrong');
        } else if (error.code === 'ERR_INVALID_URL') {
            throw new Error('Invalid URL');
        } else {
            throw new Error(error);
        }
    }
}

export async function runCode(url) {
// Tu código aquí 👈

const options = {
method: “GET”
}
async function fetchData(urlApi) {
const response = await fetch(urlApi, options);
const data = await response.json();
return data;
};

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

}

runCode(“https://youtube-v31.p.rapidapi.com/search?channelId=UCw05fUBPwmpu-ehXFMqfdMw&part=snippet%2Cid&order=date&maxResults=9”);

export async function runCode(url) {
  try {
    new URL(url);
  }
  catch (error) {
    throw new Error('Invalid URL');
  }

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

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

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

Esta es mi solución, por si alguno le puede servir. Estoy utilizando una expresión regular para validar que la URL sea valida (tenga un formato correcto y no sea cualquier string). Utilizando el método de JavaScript .test() que me devuelve un booleano al verificar si el string es correcto o no. Luego, el try para hacer su fetch correspondiente.

export async function runCode(url) {
  const validateURL = new RegExp(/^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i);

  if (!validateURL.test(url)) {
    throw new Error("Invalid URL");
  }

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

Interesante saber que existe new URL 😄

Mi solución
*
*
*
*
*
*
*
*
*
*

async function runCode(url) {
  try {
    const contentUrl = new URL(url);
    const response = await fetch(url);
    const data = await response.json();
    return data;
  }
  catch {
    if (url[url.length-1]==1) {
      throw new Error('Something was wrong');
    }
    if (typeof contentUrl != "string") {
      throw new Error('Invalid URL');
    }

  }
}

Mi solución:

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

Aqui mi solución:

.
.
.
.
.
.
.
.

async function runCode(url) {  
    const regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
    const result = regexp.test(url);
    if (result === true) {
        console.log("la url es correcta");
        try {
            const response = await fetch(url);
            const data = await response.json();
            console.log(data);
            return data;
        } catch {
            throw new Error('Something was wrong');
        }
    } else {
        throw new Error('Invalid URL');
    }

}
await runCode('https://domain-a.com/api-1') // 'Something was wrong'
await runCode('https://api.escuelajs.co/api/v1/categories')
await runCode('https://api.escuelajs.co/api/v1/products/200')
await runCode('----') // 'Invalid URL'

Comparto mi solución:

export function runCode(url) {
  try {
    let url_ = new URL(url);
  } catch (err) {
    throw new Error('Invalid URL');
  }
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (err) {
    throw new Error('Something was wrong');
  }
}

Mi solución:

export async function runCode(url) {
  // Tu código aquí 👈
  let msg = '';
  try {
    new URL(url);
    const response = await fetch(url)
    msg = await response.json();
  } catch (error) {
    error.message == "Failed to construct 'URL': Invalid URL"
      ? msg = 'Invalid URL'
      : msg = 'Something was wrong';
    throw new Error(msg);
  }
  return msg;
}

Les comparto mi solucion, una recomendacion de clean code es el prevent return, esas validaciones negando la condicion valida que debo cumplir continuar cumple esa funcion, el codigo se ve mas entendible y se evita el famoso codigo spagueti

export async function runCode(url) {
  // Tu código aquí 👈
  if (!(url.includes('https://'))) throw new Error('Invalid URL');
  try {
    const response = await fetch(url);
    if (response.status != 200) throw new Error('Something was wrong');
    console.log(response)
    return response.json()
  } catch (e) {
    console.log(e)
    throw new Error('Something was wrong');
  }
}

export async function runCode(url) {
  try {
    new URL(url)
  } catch {
    throw new Error("Invalid URL")
  }
  try {
    const response = await fetch(url);
    const data = response.json();
    return data
  } catch {
    throw new Error("Something was wrong")
  }
}

Bueno, comparto mi ejemplo:

import fetch from 'node-fetch';

function fetchData(urlApi) {
    return fetch(urlApi);
}

function runCode(url) {

  // Patter de la regex
  const PATTERN = "^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?" 

  // Valido si la URL no mapea con la regex.. 
  if (!url.match(PATTERN)) { 
        throw new Error('Invalid URL'); // Si no mapea eleva una error
    };

    fetchData(`${url}`) 
    .then(response => response.json()) // convertimos en objeto JSON
    .then(data => console.log(data))
    .catch(error => {throw new Error("Something was wrong")})
    
}


//runCode('https://api.escuelajs.co/api/v1/categories')
//runCode('----')
//runCode('https://domain-a.com/api-1')

export function runCode(url) {
  // Tu código aquí 👈
  let regexp = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i
  return new Promise((resolve, reject) => {
    if (regexp.test(url) === false) throw new Error('Invalid URL');
    fetch(url, {
      method: 'GET'
    })
      .then(data => {
        if (data.status === 200) {
          return data.json()
        }
      })
      .then(res => resolve(res))
      .catch(err => {
        throw new Error('Something was wrong');
      })
  })
}

export async function runCode(url) {
  // Validate URL
  try {
    new URL(url);
  } catch (err) {
    throw new Error('Invalid URL');
  }

  // Make GET request
  let response;
  try {
    response = await fetch(url, { method: 'GET' });
  } catch (err) {
    throw new Error('Something was wrong');
  }

  // Transform data to JSON
  let jsonData;
  try {
    jsonData = await response.json();
  } catch (err) {
    throw new Error('Something was wrong');
  }

  return jsonData;
}

Ez

export async function runCode(url) {
  let APIurl;
  try { APIurl = new URL(url); }
  catch { throw new Error('Invalid URL'); }

  try {
    const data = await fetch(APIurl);
    return data.json();
  } catch {
    throw new Error('Something was wrong');
  }
}

Creo que mas lectura y explicacion de codigo paso a paso le vendria bien a este curso! El profesor muy bien en general!

Mi solución al reto

export async function runCode(url) {
  if (!url.includes('https://')) {
    throw new Error('Invalid URL')
  }

  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) {
  // Tu código aquí 👈
  function validURL(str) {
    const pattern = new RegExp(
      "^(https?:\\/\\/)?" + // protocol
      "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
      "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
      "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
      "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
      "(\\#[-a-z\\d_]*)?$",
      "i"
    ); // fragment locator
    return !!pattern.test(str);
  }
  let error = "Something was wrong";
  if (!validURL(url)) error = "Invalid URL";
  try {
    const res = await fetch(url, {
      method: "GET",
    });
    const data = await res.json();
    return data;
  } catch {
    throw new Error(error);
  }
}

**

export async function runCode(url) {
  const options = {
    method: 'GET'
  };
  async function fetchApi(urlApi, opt) {
    const response = await fetch(urlApi, opt);
    const data = await response.json();
    return data;
  }
  function comprobanteUrl(miurl) {
    try {
      new URL(miurl);
      return true;
    } catch (err) {
      return false;
    }
  }
  if (!comprobanteUrl(url)) {
    throw new Error('Invalid URL');
  }

  try {
    const datos = await fetchApi(url, options);
    return datos
  } catch (err) {
    throw new Error('Something was wrong');
  }
}

Vale la pena ampliar una tercer situación que nos puede pasar en nuestras validaciones y es cuando aunque la URL exista, esta responde un status 404 porque estamos tratando de un obtener un recurso que no existe, y por ende es una promesa que se resolvió de manera satisfactoria y no es de tipo rejected, por ejemplo la siguiente ur:

“https://api.escuelajs.co/api/v1/products1”;

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

runCode('https://api.escuelajs.co/api/v1/categories');

export async function runCode(url) {
try {
new URL(url);
let data = await fetchData(url);
return data;
} catch (error) {
if (error.message == “Failed to construct ‘URL’: Invalid URL”)
throw new Error(‘Invalid URL’);
else
throw new Error(‘Something was wrong’);
}
}

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

export async function runCode(url) {
try {
new URL(url)
} catch {
throw new Error(‘Invalid URL’)
}
try {
const response = await fetch(url)
return response.json()
} catch {
throw new Error(‘Something was wrong’)
}
}

const apiPlatzi = 'https://api.escuelajs.co/api/v1/categories’
const apiInval = '----'
const apiError = ‘https://domain-a.com/api-1’

runCode(apiPlatzi)
runCode(apiInval)
runCode(apiError)

Aqui mi respuesta al ejercicio, mucho exito.
*
*
*
*
*
*
*
*
*
*
*
*
*
*

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

Hola buenas,

Dejo por acá mi solución:

// Fetch API
async function fetchData(urlApi) {
  const options = {
    method: 'GET'
  };

  const response = await fetch(urlApi, options);
  const data = await response.json();
  return data;
}

export async function runCode(url) {
  // Tu código aquí 👈
 // URL Verification
  try {
    new URL(url);
  } catch (e) {
    throw new Error("Invalid URL");
    return
  }

  // Return data or error in the promise
  try {
    const data = await fetchData(url);
    return data
  } catch {
    throw new Error("Something was wrong");
  }
}

En mi mente funcionaba, sí alguien me ayuda, sería genial
*
*
*
*
*
*
*
*
*
*
*
*
*
*

export async function runCode(url) {
    async function fetchData(urlApi) {
        const response = await fetch(urlApi);
        const data = await response.json();
        console.log(data);
        return data;
    }
    
    if (new URL(url)) {
        try {
            const result = await fetchData(`${urlApi}`);
            console.log(result);
            return result;
        } catch (err) {
            new Error("Something was wrong")
        }
    } else {
        new Error("Invalid URL");
    }
}

La solución propuesta al parecer no pasa las pruebas, en mi caso me da error, lo mas probable es que sea error mío pero por si acaso estaría bien que lo revisara alguien.

Crea una utilidad para hacer peticiones

const API = 'https://api.escuelajs.co/api/v1/categories';

export async function runCode(url) {
  try{
    const response = await fetch(url);
    const data = response.json();
      if (data.status === 404) {
        console.error('Something was wrong')
      } else {
        return data
      }
  } catch (error) {
    console.error("Invalid URL")
  }
}

**
*
*
*
*
*
*
*

export async function runCode(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch {
    new URL(url);
    return new Error("Something was wrong");
  }
}

Aquí esta mi solución 💚

Acá pueden probar el código

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

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