No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Migración a Axios

7/17
Recursos

Aportes 23

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Al principio no comprendía el porqué encerrábamos a data entre unas llaves.

const {data} = await api("trending/movie/day"); 

Después de buscar en la documentación de axios entendí que “api” regresa un objeto con estas propiedades y que podemos usarlas u omitirlas, en este caso solo usamos data, pero también puede sernos útil status para alguna validación posterior.

Espero que les sea útil 😁.

En mi caso también estoy siguiendo los cursos de Juan de React así que estoy haciendo el proyecto con React
Cree este custom hook para poder hacer request a distintas APIs. Por el momento lo llevo así, seguramente tenga que añadirle más métodos en un futuro y modificar un poco la creación de la instancia para que se puedan poner más configs
¿Ustedes qué opinan? 🤔
.

Buenas tardes.

Aqui tienen que tener en cuenta que si usan axios instalandolo como paquete de NodeJS y usandolo de la siguiente manera les va a generar un error:

Uncaught ReferenceError: require is not defined
    at 
const axios = require('axios').default;

Pero porque pasa esto ? Recordemos que:

require no es una función integrada en el navegador. Esa es una característica específica de node.js, no de un navegador. y recordemos que node.js es un un entorno de ejecución de Javascript del lado del servidor; Entonces, cuando intentamos que el navegador ejecute nuestro script este no lo encuentra.

Por ahora no soy muy experto en el tema y no he encontrado una solución como bien dije por ahora; más que relizarlo como lo realiza el profesor. No se si un trasnpilador como babel nos permita usar dicha funcionalidad si el profesor o alguien más que lea este comentario sabe un poco más, agradezco siempre toda la información

He estado buscando como poner el parámetro de idioma con axios y encontré:

"language": "es-ES"

El código final quedo así:

const api = axios.create({
  baseURL: 'https://api.themoviedb.org/3/',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  params: {
    'api_key': API_KEY,
    "language": "es-ES"
  },
});

Les comparto mis apuntes. 😄

Crear una instancia en Axios

Para poder crear una instancia de axios para poder realizar peticiones a nuestra API.

axios.create

Este método nos permite realizar peticiones GET y tenemos que pasarle una serie de parámetros en forma de objeto para poder utilizarlo.

baseURL

Como su nombre lo dice, es la base de la URL de nuestra API, en todas hay una URL que es común para cualquier tipo de petición, lo única que cambian son sus endpoints o query parameters.

Ejemplo

// URL base
https://api.themoviedb.org/3/
// Endpoints
https://api.themoviedb.org/3/trending/movie/day/
https://api.themoviedb.org/3/genre/movie/list/
// Query parameters
https://api.themoviedb.org/3/trending/movie/day?api_key=${API_KEY}

headers

“Son las cabeceras personalizadas a ser enviadas”. Los headers no van directos en la URL.

Fuente: página oficial de Axios.

params

Son los parámetros que le pasamos a la URL, es decir, los query parameters que van directo en la URL base que hemos asignado.

Uso

Una vez generada la instancia con todo lo que necesitamos solo nos queda llamar a nuestra instancia pasándole como parámetro el endpoint a donde queremos ingresar.

Ejemplo

const api = axios.create({
	baseURL : 'URL',
	headers : {
		'Content-Type' : 'application/json;charset=utf-8'
	},
	params : {
		api_key : API_KEY
	}
});

const RESPONSE = await api(endpoint)

Pueden ver más parámetros del método create en la página oficial de Axios.

Comparación de peticiones GET con fetch y Axios.

Petición GET con fetch

const getTrendingMoviesPreview = async ()  => {
	const RESPONSE = await fetch(`${API}/trending/movie/day?${API_KEY_URL}`);
	const DATA = await RESPONSE.json();
	const MOVIES = DATA.results;

	return MOVIES;
};

const API_KEY_URL = `api_key=${API_KEY}`;
const API = 'https://api.themoviedb.org/3';

Petición GET con Axios

const getTrendingMoviesPreview = async () => {
	const RESPONSE = await api(`trending/movie/day`);
	const DATA = RESPONSE.data;
	const MOVIES = DATA.results;

	return MOVIES;
};

const api = axios.create({
	baseURL : 'https://api.themoviedb.org/3/',
	headers : {
		'Content-Type' : 'application/json;charset=utf-8'
	},
	params : {
		api_key : API_KEY
	}
});

Recuerden que como programadores no tenemos que “casarnos” con una sola forma de hacer que funcione nuestro código,


Esta bien saber Axios pero es SUPER recomendable entender como funciona el “fetch()” internamente así como las promesas y un “XMLHttpRequest” (aunque ese se vea feo imo 😅)

para poder utilizar require en tu proyecto de js en el navegador, puedes integrar este paquete de forma global https://browserify.org/

Como explica mi amigo personal Juan !!! 😀

Siempre recuerden de cambiar el “await fetch” por un “await api” (o la variable que ustedes hayan usado para almacenar el axios.create) para que les funcione todo bien.

Al usar Axios si al script lo ponemos al final del head del html, tiene mejor rendimiento que al final del body. Yo lo uso así y logro un mejor resultado. Saludos 😀
te amo juandc xdddd

amado seas axios :v

configuracion de axios:

const api = axios.create({
  baseURL : 'https://api.themoviedb.org/3/',
  headers: {
    'Content-Type': 'application/json; charset=utf-8',
  },
  params: {
    'api_key': API_KEY,
  },
});

El código con comentarioi lo necesitas en texto, dímelo 🙌

Mi aporte con el repositorio:

Mi repositorio

![](https://static.platzi.com/media/user_upload/1-e274504e-d1c6-4075-a0c8-7b43402edc92.jpg)Mi api **personalizado**
Para los que se atrevieron a usar Axios instalandolo con npm, se van a encontrar problemas como me los encontre yo, ya que al instalarlo se crea un directorio llamado node\_modules, que contiene la instalación, entonces cuando importemos axios en nuestro script, el navegador no sabra resolver los módulos instalados en node\_modules, ya que los navegadores no pueden acceder a esa carpeta directamente, se necesitarían herramientas de empaquetado como webpack para que el navegador entienda la carpeta node\_modules. Y como no estamos trabajando con empaquetadores, pues la opción que nos queda es la que hizo JuanDC.
yo pude resolver el error 401 y 400 de la siguiente manera: *import* { API\_KEY } *from* '../utils/secrets.js'; *async function* getTrendingMoviesPreview(){ *const* res = *await fetch*(`https://api.themoviedb.org/3/trending/movie/day?api\_key=${API\_KEY}`); *const* data = *await* res.json(); *const* movies = data.results; console.log({data, movies}); } *async function* fetchMovies() { *try* { *await* getTrendingMoviesPreview(); console.log('Movies fetched successfully'); } *catch* (error) { console.error('Error fetching movies:', error); } } fetchMovies() .then(() => console.log('fetchMovies executed successfully')) .catch(error => console.error('Error executing fetchMovies:', error));
porque la constante data despues de que se hace la migracion a axios debe quedar dentro de llaves? {}
Si quieren pueden agregar como parametro para que les traiga la info en español ```js const api = axios.create({ baseURL: 'https://api.themoviedb.org/3/', headers: { 'Content-Type': 'application/json;charset=utf-8', }, params: { 'api_key': API_KEY, 'language': 'es', // Aquí agregas el parámetro global para el idioma } }); ```

Error al usar Axios 🔥😬

Al usar axios me salían algunos errores, por lo que pasé de tener la siguiente estructura usando módulos:

import { authorization } from "../parameters.mjs";

const getCategories = async () => {
  const response = await fetch(
    "https://api.themoviedb.org/3/genre/movie/list?language=en",
    {
      method: "GET",
      headers: {
        accept: "application/json",
        authorization,
      },
    }
  );
  const data = await response.json();

  return data;

export { getCategories };

A esta usando axios sin errores:

const apiaxios = axios.create({
  baseURL: "https://api.themoviedb.org/3/",
});

export { apiaxios };

Cambiamos el fetch por apiaxios:

import { authorization } from "../parameters.mjs";
import { apiaxios } from "./axios.mjs";

const getCategories = async () => {
  const { data } = await apiaxios(
    "genre/movie/list?language=en",
    {
      method: "GET",
      headers: {
        accept: "application/json",
        authorization,
      },
    }
  );
  //const data = await response.json();

  return data;
};

export { getCategories };

Pobre juan, estaba re manija por ver The Batman sin saber que es malisima.
De cualquier forma excelente el curso, saludos.