Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript

“trae” lleva 3 años desde la ultima actualización, no lo usan ni sus creadores seguramente.
Clase completamente Innecesaria, al día de hoy Axios es casi la librería oficial de Vue,

pienso que en esta clase no era necesario usar trae, considero que debemos usar axios

Las clases 21 y 22 no están ordenadas, deberían ir al revés

De esta forma lo realice con fetch, siguiente el curso anterior
ARCHIVO : config.js

const configService = { apiUrl: "https://platzi-music-api.herokuapp.com" };
export default {
  configService,
};

ARCHIVOS : app-music.js

import config from "./config";

const getTrackForName = async (name) => {
  try {
    const rawData = await fetch(
      `${config.configService.apiUrl}/search?q=${name}&type=track`
    );
    const jsonData = await rawData.json();
    return jsonData;
  } catch (error) {
    return "Error: " + error;
  }
};

export default {
  getTrackForName,
};

¿en que curso puedo encontrar más bases para entender estas clases?

Considero innecesario realizar tantos archivos exportando e importando en otros. Digo ¿Cuál es el punto? ¿Demostrar que sabemos ES6? Bien pudo colocarse en un sólo archivo y la clase hubiera sido más corta, útil y concisa.

Además de que la libreria TRAE tiene mucho tiempo sin actualizarse. Ojala Platzi actualice pronto este curso por una nueva versión.

Empece a usar axios espero no estar mal en esta parte…

Me gusta el termino Javascript Pelado, lo añadiré a mi vocabulario

Si trae trabaja con Fetch y Axios trabaja con XMLHttpRequest, ¿como le hace cuando el navegador no soporta dicha caracteristica?, me imagino que igual usa el clasico XMLHttpRequest

He usado axios en varios proyectos, ya que es muy popular, sin embargo, me convencio mucho trae, es muy optima y fácil, insto a todos los colegas a apoyar este desarrollo, ya que es echo por latinos, gracias Nacho por compartir !!!

Este curso necesita un update urgente!!!

el uso de trae no me a gustado para nada, pero me di cuenta que esta usando la API de spootify, mejor lean la doc de spootify y lo integran a su proyecto

Y si yo quiero hacerlo normalito, sin ninguna libreria x.x?

¿A día de hoy sigue siendo una buena alternativa usar Trae.js? Me refiero a que Axios sigue usando XMLHttpRequests hasta ahora, pero es un poco más activo en Github que Trae.js

¿cuál es el benficio de trae sobre axios?

En el curso basico de vue la version mas reciente, nos muestra como podemos hacer uso de la api fetch sin tener q instalar ninguna libreria.

Para ser una aplicacion react 20 videos de codificacion y no he visto nada para la interface grafica de usuario 😦

el ejemplo esta bien pero para ser una aplicacion React …me hubiera gustado que cada componente lo fuera codificando y viendose en interface grafica para ver como va quedando y no solo ver codigo y mas codigo para al final ver una app realizada

Tengo una pregunta, usando Trae ¿podría editar modificar y eliminar registros de una API no es así? ¿o estoy equivocado? gracias por su ayuda.

Platzi me esta defraudando con el contenido de este curso.

• Primero el titulo indica que se va a tocar el tema de Fetch API pero no hace nada mas que nombrarlo.

• Segundo se usa una librería que no esta extendida y que tiene tiempo sin ser actualizada.

Así se crea mucha fricción al aprender un tema.

WTF esta clase iba antes 😮

Les dejo el codigo con axios para los que prefieren este metodo:

Este es el fichero de config:

const configService = {
  apiUrl: "https://platzi-music-api.herokuapp.com",
};

export default configService;

este es el fichero para la funcion de busqueda:

const fetchTrackByName = async (searchQuery) => {
  try {
    const res = await axios
      .get(`${configService.apiUrl}/search?q=${searchQuery}&type=track`)
      .then((res) => res.data);
    return res;
  } catch (error) {
    console.log(error);
  }
};```

Este es el metodo dentro de nuestro componente App:

handleSearch(){
if(!this.searchQuery) return
fetchTrackByName(this.searchQuery)
.then(res => {
this.tracks = res.tracks.items
})
}