Playground: Captura el error de una petición

La idea de estas pruebas es muy buena, lo que debería de mejorar son las instrucciones y no usar cosas que no se han indicado en el curso como el

throw new Error('API Not Found');

No se si aporte algo, pero el ejercicio trata de que dentro de la función runCode hagan el llamado a la api que no se encuentra y capturen el error. por defecto se ejecuta await runCode(), así que hagan todo dentro de este.

Recordar también que pueden utilizar fetch sin el import debido a que estamos en el browser y que los errores se pueden controlar con try/catch.

No he podido solucionar estos retos, es increible como al ver la solucion de repente todo es tan fácil.
Ni modo a seguir practicando y a leer más código.
Si pueden recomendarme proyectos para practicar les voy a agradecer mucho.

… estos retos, no te dejan en claro lo que tienes que hacer

Creo que el feature esta malo, ya llevo haciendo varias pruebas que estan correctas pero me dice que esta malo. y ni siquiera la solucion me la acepta
![](

Entendí la orden que tenía que ejecutar, pero aún no nos habían dado la herramienta para devolver el error.
El ejercicio estuvo muy bueno estuve rato tratando de resolverlo con los console.
Al final vi la solución porque no lo pude resolver, igual creo que es culpa mía tenía que haber googleado, ya nos enseñaron que también es parte de programar.

throw new Error('API Not Found');

Creo que fue una “Cascara de banana” 😂😂😂

Mi solucion:

export async function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
    const data = await fetch(url);
    const json = await data.json();
    return json;

  } catch (err) {
    throw new Error('API Not Found')
  }
}

Como vamos no se como realizarlo

Falto una mejor explicacion en la Guia del ejercicio.
donde mencione que no sirve el console.log()
sino un nuevo comando throw new Error()

Houston, we have a problem!
.
Podemos observar que los tests no pasan incluso con la solución dada por el Playground. Equipo Platzi, para que lo chequen

Por aqui dejo mi respuesta

export async function runCode() {
  try {
    const ir = await fetch(url);
    console.log(ir);
  } catch (error) {
    console.error(error);
  }
  const url = 'https://domain-api-com';
}

no la pude hacer,!!! I`ll be bakc!!

Por q no comparar con then y con async await

const url = 'https://domain-api-com'; 
function fetchData(url){
    return fetch(url)
}

fetchData(url).then( response =>{console.log(response)})
.catch( err => console.log(err.msg ) )




async function runCode() {
    // Tu código aquí 👈
    const url = 'https://domain-api-com';
    try{
        const ok = await fetch(url);
        console.log(ok);
    }catch(error){
        console.error(error.msg);
    }
      
  }
  
  runCode()

les comparto mi Solución

export async function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  const response = await fetch(url);
  try {
    console.log(response.json())
  } catch {
    console.log('API No Found');
  }

}

No creo que este bien la idea del problema, ya que es lo mismo si lo dejo asi:

export async function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  throw new Error('API Not Found');
}

creo que hubiera sido mejor usar la api fake para tener 2 resultados, uno que existe y otro que no

const url = 'https://domain-api-com';

export function runCode(urlApi) {
  try {
    const products = fetchData(`${urlApi}/products`)
    console.log(products)
  }
  catch {
    throw new Error('API Not Found');
  };
}; 

Ayuda team Platzi, el playground no se esta ejecutando.

sigue con errores en los test pero confien en su codigo

Ahora si, mi solucion! checala solo si ya resolviste el tuyo o como minimo, trataste 😄
+
+
+
+
+
+
+
+
+
+
+

export function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  //llamamos a la api
  const getData = async (urlApi) => {
    try {
      const response = await fetch(urlApi);
      const data = response.json()

      console.log(data)
    } catch {
      throw new Error('API Not Found')
    }

  }
  return getData(url)
}

Como siempre lo hice mal XD hahaha, me lleva la que no me trajo :p … espero entender mejor estos enunciados en el futuro para cuando quiera presentarme a algún lado o estaré valiendo. Aunque le voy entendiendo la dinámica a estos ejercicios 😄 En este no tenia idea que existía throw para los errores y aun me cuesta entender en general lo asincrono 😕

Me consto pero lo logre, sin dudas que tengo que seguir practicando estos temas. Les dejo mi solucion.
*
*
*
*
*
*
*
*
*

export function runCode() {
  const url = 'https://domain-api-com';
  const fn = async (urlApi) => {
    try {
      return await fetch(urlApi);
    } catch (error) {
      console.error('API No Found');
    }
  }
  return fn(url);
}

reto

Esta fue mi solución 👇:

export function runCode() {
  const url = 'https://domain-api-com';

  try {
    const response = fetch(url);
    const data = response.json();
    return data;
  } catch {
    throw new Error('API Not Found');
  }
}

A mi no me sirvió lo intenete de todas las formas este test tiene un error

Solución:

export function runCode() {
// Tu código aquí 👈
const url = ‘https://domain-api-com’;

if (url) {
throw new Error(‘API Not Found’);
} else {
// Resto del código
}
}

try {
runCode();
} catch (error) {
console.error(“Error:”, error.mesagge);

}

El desafío es un tanto ambiguo puesto que señala que la solución de nuestro código debe de ir dentro del bloque de la función runCode() pasando desapercibido async en la declaración de la función. Además que el uso de fetch no esta explicito para usarlo como solución ya que durante el curso paso por una instalación y configuración

Aqui mi solucion:

export async function runCode() {
  const url = 'https://domain-api-com';
  try {
    return await fetch(url);
  } catch (error) {
    throw new Error('API Not Found');
  }
}

Creo que hay algo mal con la ejecución de los Playgrounds ya que, la primera vez que corrí el código me soltó un error y la segunda ocasión me lo aceptó y no cambie nada en mi código

Les dejo mi solución.

*¨

export function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
    const response = fetch(url);
    const data = response.json();
    return data;
  } catch (error) {
    throw new Error('API Not Found');
  }
}

El ejercicio presenta error, se queda tildado y no pasa el test

SOLUCIÓN
*
*
*
*
*
*
*
*
*

export async function runCode() {

  const url = 'https://domain-api-com';

  try {

    await fetch(url);

  } catch {

    throw new Error('API Not Found');

  }

};

🔥 Parece chiste pero es anécdota

Aparte de solucionar el problema propuesto, tengo que ser adivino para entender como ejecutar el código en este editor. 😥

Mi solución

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

const x = async () => {
	try {
		//const response = await fetch(`${API}/products`);
		const response = await fetch(API);
		const data = await response.json();
		console.log(data[0]);
	} catch (e) {
		console.error(e);
	}
}

x();

Lo que piden…

export async function runCode() {
  const url = 'https://domain-api-com';
  try {
    return await fetch(url);
  } catch {
    throw new Error('API Not Found'); 🔥🤔😢
  }
}

Excelente la idea de estos sandbox, aunque creo que la implementación tiene que seguir iterando. Ahora, para los que hacen el reto en sus IDE, si allá les sale bien y acá no, no se frustren, lo importante es que ya lo tienen bien allá y no se estanquen, sigan con el curso.

Yo me complique varios minutos, como 20, esperando lograr que en la vista, al dar clic en Run Code, me diera el output esperado. Luego me di cuenta que con solo poner el siguiente codigo y ejecutar las pruebas, ya pasaba de forma exitosa.

En este ejercicio la pestaña de vista me tenia perdido. No se dejen guiar por esa pestaña… este ejercicio si estaba confuso.

export async function runCode() {
    throw new Error('API Not Found');  
}

Este playground tiene algunas fallas todavia. Por ejemplo en el mensaje del error pedia que mostrara

throw new Error('API Not Found') //como ven el 'API' está en mayusculas, si no lo ponen así les saldrá error.

yo lo estaba poniendo en minuscula y por eso no me funcionaba.
Ademas, la funcion sabemos que es async, entonces hay que agregarle el async despues del export.

export async function runCode() { //agregamos el async 
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
   return await fetch(url) //como es una funcion async debemos usar 'await' y retornar lo que venga.
  } catch {
    throw new Error('API Not Found') //'throw' ya retorna un valor, que en este caso es el error, por ende no usamos la palabra return
  }
}

export function runCode() {
  const url = 'https://domain-api-com';

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

  }
  catch {
    throw new Error('API Not Found');
  }
}

He aquí mi respuesta
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

export async function runCode() {
  const url = 'https://domain-api-com';

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

  } catch {
    throw new Error('API Not Found');
  }
  
}

Ni yo se porque funciono, pero por si a alguien le sirve:

export function runCode() {
  // Tu código aquí 👈
  try {
    const url = fetch('https://domain-api-com');
    return url.json()
  } catch {
    throw new Error ("API Not Found")
}
  
  
}

No sé si esté en lo correcto pero mi solución fue así…y no con el input que se define en la guía.

Hola, estuve un buen tiempo tratando de ver como podría solucionar este playground, y así fue como pude hacerlo:

export async function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
    await fetch(url);
  } catch (error) {
    throw new Error('API Not Found');
  }
}

Esta fue mi solución al reto 💚 (nota para Platzi, me costo mucho que la pagina aceptara mi respuesta se tardaba mas de 10 minutos en responder y la opción de vista no servía incluso al recargar la página varias veces)

Acá pueden probar el código:

// Solución al reto PlayGrounds
export async function runCode() {
  const url = 'https://domain-api-com';
  try {
    const response = await fetch(url)
    return response;
  } catch {
    throw new Error('API Not Found');
  }
}

Mi solución

Mi solución:

export async function runCode() {
  try {
    const url = 'https://domain-api-com'
    const response = await fetch(url).json()
    return response
  } catch (err) {
    throw new Error("API Not Found")
  }
}

🍃En primer lugar, vamos a necesitar hacer una petición a la API que no existe. Para esto, vamos a utilizar la función fetch y la url de la API.

Dentro de la función fetch, vamos a utilizar un try/catch para capturar cualquier error que pueda ocurrir. En caso de que ocurra un error, vamos a lanzar una excepción con el mensaje “API Not Found”.

Finalmente, vamos a envolver todo el código dentro de la función runCode y usar async/await para esperar la ejecución de la función fetch.

Código:

async function runCode() {
  try {
    const response = await fetch('https://api.notfound.co');
    const data = await response.json();
    return data;
  } catch (error) {
    throw new Error('API Not Found');
  }
}

Explicacion como la url no funciona va a dar error y try/catch es concepto para manejar errores algo similar a las promesas, sin usar esto el codigo se detendria si hay un fallo, cuando hay un fallo se ejecuta el catch, resolviendo el playground

export function runCode() {
    try {
      const url = 'https://domain-api-com';
      const datos = (fetch(url)).json();
    } catch {
      throw new Error('API Not Found');
    }
  }

const anotherFn = async (urlApi) => {
  try {
    const data = await fetchData(urlApi)
    console.log(data)
  } catch (error) {
    throw new Error('API Not Found');
  }
}

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

export function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';

  return anotherFn(url);
}

creo que este ejercicio debería tener una mejor explicación
hasta ahora todos han sido muy claros pero este no
solo con lanzar la el error dentro de la función basta para pasarlo por lo que ya sea que llames a la url fake o no no importa, también el usar el try catch no tiene mucho sentido ya que si la respuesta requiere que lances el error, al ver que en las instrucciones me dicen que cache el error es muy contra intuitivo tener que lanzarlo ahi mismo, mi primera idea fue regresar el error dentro del catch, pero lanzarlo dentro del try para que pueda ser controlado

en resumen muy mal explicado este ejercicio

La letra de la parte de la guia debería ser un poco mas grande es muy pequeña y cansa mucha la vista 😦

dejo mi solución por aquí
.
.
.
.
.
.
.
.
.
.
.
.
.
.

export function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  async function conectar(url) {
    try {
      await fetch(url);
    } catch (error) {
      throw new Error('API Not Found');
    }
  }
  return conectar(url)
}

Comparto mi solución:

export function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
    fetch(url).json();
  }
  catch(error) { 
    throw new Error('API Not Found')
  }
}

Se demoró más de 5 min en correr =(

Gente! ES2019 introdujo el “Optional Catch Binding”, significa que los parentesis con el error luego de la sentencia catch ya no son necesarios, es por eso que en la prueba se usa el “throw new Error(“API Not Found”)”

catch {
    throw new Error("API Not Found")
  }

No se si me la compliqué demasiado pero lo hice así:

export async function runCode() {
  const url = 'https://domain-api-com';
  try {
    const response = await fetch(url);
    const data = response.json();
    return data;
  } catch {
    throw new Error("API Not Found")
  }
}

buen día dejo mi solución!!!

const url = 'https://domain-api-com';

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

export async function runCode() {
  // Tu código aquí 👈
    try {
    const prueba = await fetchdata(`${url}`);
    console.log(prueba);
  } catch (error) {
    throw new Error('API Not Found');
  }
}

Me parece, muy buen aporte lo de los tests, mas alla de las correcciones que pueda tener ,he ir mejorando en el enunciado para mayor claridad… ; en varias plataformas en que realizas test , o para postulaciones a trabajos a mi criterio veo estas mismas " faltas de claridad" en la explicación del test ( tal vez hasta pueden ser a propósito para verificar que entiendes los conceptos? ) , por eso veo importante el aporte del profe Nico y Oscar al agregar esto ya que te ponen contacto casos reales resolver. Recuerdo en la facultad que para ciertas materias por mas que hubieses “estudiado” los temas, si no habías practicado con exámenes anteriores era difícil de aprobar… ; gracias por este aporte!

Mi solucion al reto:

export async function runCode() {
  try {
    const response = await fetch('https://domain-api-com');
    const data = await response.json();
    return data;
  } catch (error) {
    throw new Error('API Not Found');
  }
}

tiene error el test

me dice que error de sintaxis en el await

export function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
    await fetch(url);
  } catch (e) {
    throw new Error('API Not Found');
  }
}

Hola, les dejo mi solución y, también una pista. La función que se exporta (runCode()) tiene que ser async. Por otro lado, concuerdo con mis compañeros en que se tiene que mejorar las instrucciones, me costó mucho la verdad inferir la solución :
.
.
.
.
.

export async function runCode() {
  const url = 'https://domain-api-com';
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data
  } catch (error) {
    throw new Error('API Not Found');
  }  
}

version modernizada

export const runCode = async () => {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
    const response = await fetch(url);
    const data = await response.json;
  } catch (err) {
    throw new Error('API Not Found');
  }
}

export async function runCode() {
// Tu código aquí 👈
const url = ‘https://domain-api-com’;

try {
const response = await fetch(url);
const data = await response.json();
return data;
}
catch {
throw new Error(‘API Not Found’);
}
}

import fetch from 'node-fetch';

const API = "https://api.escuelajs.co/api/v1"

const fetchData =  async (urlApi)=>{
    try { 
        const data= await fetch(urlApi)
        const dataUsable = await data.json()
        return dataUsable
        
    } catch (error) {
        console.log( "que estupido fuí " + error)
        
    }
   
// LOS AWAIT SOLO SE PUEDEN USAR DENTRO DE UNA FUNIÓN ASINCRONA
}

console.log( await fetchData(`${API}/products`))

// O COMO LLAMADO A UNA FUNCI´N ASINCRONA

export async function runCode() {
  try {
    const response = await fetch("https://domain-api-com");
  } catch (error) {
    throw new Error('API Not Found');
  }
}

export async function runCode() {
try {
const url = ‘https://domain-api-com’;
const response = await fetch(url);
const data = await response.json();
return data;
} catch {
throw new Error(‘API Not Found’);
}
}

Yo lo hice de esta forma

Las instrucciones son confusas e incluyen temáticas, elementos y/o sintaxis avanzadas que no se han visto en lo que va del curso. This is a very frustrating shit! ={

Consejo, modificaria las pruebas que corren para que validen que efectivamente estamos usando la funcion fetch()

yo solo escribi esto y anduvo

throw new Error(‘API Not Found’);

Pensé, ¿para que voy a llamar a algo que no existe? lanzo el error y listo

✌

export async function runCode() {
  const url = 'https://domain-api-com';
  try {
    const response = await JSON(fetch(url));
    return response;
   } catch (err) { 
    throw new Error('API Not Found');
  }

}

Mal curso, dos videos cortos de youtube me han hecho entender más de que lo que llevo de curso.

export function runCode() {
  const url = 'https://domain-api-com';
  try {
    return fetch(url).json();
  } catch (err) {
    throw new Error('API Not Found');
  }
}

Tenia la idea y pues me ayudo a entender mejor. A seguir praticando no hay mas!

El primero q me sale

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

  try {

    const url = 'https://domain-api-com';

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

  } catch {
    throw new Error('API Not Found');
  }


}

Mi solución

export function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
    return fetch(url).catch(error => {
      throw new Error('API Not Found')
    })
  } catch (error) {
    throw new Error('API Not Found')
  }
}

Les dejo mis soluciónes. La primera con .then() y .catch() y la segunda con await y async tal como pide la consigna:
*
*
*
*
*
*
*
*
*
*
*
*

// Dos soluciones:
import fetch from "node-fetch";

// Con then: 
const url = 'https://domain-api-com'; 
function fetchData(url){
    return fetch(url)
}

fetchData(url)
    .then( response =>{console.log(response)})
    .catch( () => {
        throw new Error('API Not Found')
    });

// ---------------------------------------------    
// Con await y async:
import fetch from "node-fetch";

async function runCode() {
    const url = 'https://domain-api-com';
    try{
        const data = await fetch(url);
        console.log(data);
    }catch(error){
        throw new Error('API Not Found');
    }
  }

runCode()

Reto Solucionado

export function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';

  const fetchData = async(urlApi) => {
    try {
      const callApi = await fetch(urlApi)
    } catch {
      throw new Error('API Not Found')
    }
  }

  return fetchData(url)
}

aahhg yo iba a modificar el export function y agregarle el async, pero me como decía que mi código tenía que ir dentro, no lo hice! que falla.

export async function runCode() {
  // Tu código aquí 👈
  const url = 'https://domain-api-com';
  try {
    const response = await fetch(url);
    const data = response.json()

    return data
  } catch { 
    throw new Error('API Not Found');
  }
}

mi humilde aporte desde visual

const url = 'https://domain-api-com';
const anotherFunction2 = async(urlApi) => {
    try {
        const example = await fetchData(`${urlApi}`);
        console.log(example);
    } catch(error) {
        throw new Error('API Not Found')
    }
    }

anotherFunction2(url);

throw new Error(‘API Not Found’)
^

Error: API Not Found