A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Fetch API & Trae

22/53
Recursos

Aportes 25

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

En vez de usar Fetch recomiendo usar Axios (hay que instalarlo por npm) pero es m谩s sencillo y directo de manejar el response. Aqu铆 les dejo una explicaci贸n adicional https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5

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

鈥渢rae鈥 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,

Las clases 21 y 22 no est谩n ordenadas, deber铆an ir al rev茅s

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

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,
};

Listo, la solucion para no usar trae y usar 鈥渏avascript pelado鈥:
1.- Entren a spotify developer y deben crearse una cuenta, despues siguen los pasos para registrar su app, ponen uso educativo y les brindaran 2 llaves, clientkey y privatekey.
2.- Creen una carpeta llamada services asi como en el video y creen 2 archivos JS: auth-spotyfy y spooty-api, el auth-spooty copian y pegan el siguiente codigo:
Pd: para el base64 encode recomiendo usar la siguiente herramienta

function authSpootify(){
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
    myHeaders.append("Authorization", "Basic {aca poner "clientkey:privatekey", con los 2 puntos al medio de ambos, en base64 encoded (los dos puntos van dentro del base64)}");

    var urlencoded = new URLSearchParams();
    urlencoded.append("grant_type", "client_credentials");

    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: urlencoded,
        redirect: 'follow'
    };

    return fetch("https://accounts.spotify.com/api/token", requestOptions)
        .then(response => response.json())
        .then(result => result)
        .catch(error => console.log('error', error));
}
export default authSpootify

Esto les generara un token necessario para consumir la API.
3.- en el otro archivo copian y pegan el sgte codigo:

import authSpootify from "@/services/auth-spooty";
const baseUrl = 'https://api.spotify.com/v1';

function searchTrack(track)
{
    return authSpootify()
        .then(token =>
        {
            var myHeaders = new Headers();
            myHeaders.append("Authorization", `${token.token_type} ${token.access_token}`);
            var requestOptions = {
                method: 'GET',
                headers: myHeaders,
                redirect: 'follow'
            };
            return fetch(`${baseUrl}/search?q=${track}&type=track`, requestOptions)
                .then(response => response.json())
                .then(result => result)
                .catch(error => console.log('error', error));
        })

}
export default searchTrack;

y ya tendran la funcion searchTrack lista para usar en el App.vue. Lo importan y no se olviden de usar el then() ya que lo que retorna la funcion es una promesa, aca un ejemplo de uso:

  import api from './services/spooty-api';

search(name){
            if (name){
                api(name).then(data => (this.tracks = data.tracks.items));
            }
            else{
                this.tracks = [];
            }
      },

Saludos (y)

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

Una buena alternativa a Trae es Axios, recomendado, es super ligero al igual que Trae:

https://github.com/axios/axios

Me gusta el termino Javascript Pelado, lo a帽adir茅 a mi vocabulario

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.

驴en que curso puedo encontrar m谩s bases para entender estas clases?

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

WTF esta clase iba antes 馃槷

Interesante, aunque la url ya no funciona, habr谩 que buscar alternativas鈥

驴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?

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.

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

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.

el ejemplo esta bien pero para ser una aplicacion React 鈥e 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

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

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

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.