Migración a Axios

Clase 7 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales

Javier Andrés Valdez González

student•

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

Marvin Orlando Ruiz Rivera

student•

Justo lo que me preguntaba, gracias por la respuesta.

Ricardo Adrian Justo Condori

student•

Buen aporte

Juan Sebastian Espínola

student•

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? :thinking: . !useAPI Custom Hook

Patricio Nally

student•

Como hacés esa imagen bro? Gracias.

Dario Paladines

student•

Es una extensión de VSC, Patricio, la que yo uso se llama Carbon y de ahí ya configuras lo demás.

Roger Fernandes

student•

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

Jose Luis Bedoya

student•

los elementos dentro de los parametros pueden ir sin las comillas!

Julian Franco

student•

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

Juan Castro

teacher•

En este caso podrías usar la sintaxis de módulos de ECMAScript 6:

Carlos Rodríguez

student•

Puedes usar desde tu HTML el siguiente script si lo tienes instalado con npm:

<script src="./node_modules/axios/dist/axios.min.js"></script>

Desde ModuleES no es posible ya que ellos en su código solo utilizan module.exports, yo recomiendo usar el cdn para proyectos frontend en el navegador.

Cayo Legal

student•

Cual es la diferencia entre params y headers?

Eloy Chávez Dev

student•

Hiii 👋🏻

Parameters can be seen by end-users (in URL), but headers are hidden to end-users.

Juan Castro

teacher•

Los params son los query parameters. Van directo en la URL. Los headers son las cabeceras de la petición. No van directo en la URL.

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

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

Bryan David Castañeda Aranzales

student•

Si instale por npm axios, como hago para usarlo sin necesidad de traer el CDN?

Juan Castro

teacher•

Cualquiera de estas dos formas:

const axios = require('axios').default;
import axios from 'axios';

Recuerda que siempre puedes ver toda esta información en la documentación.

Enrique Maya Garcia

student•

con este paquete https://browserify.org/

Ricardo Adrian Justo Condori

student•

Tengo un par de preguntas:

Aparte de tener un código más limpio, ¿Qué otro beneficio tiene usar Axios en lugar de Fetch?
¿En qué casos debo usar Fetch y en que casos Axios?

Edgardo Andres Vargas Saenz

student•

Hola ricardojusto, son muchas las ventajas.

Encontré 2 artículos que te pueden interesar:
- Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch
- Axios Javascript: analizamos las características de este ligero cliente HTTP

Ricardo Adrian Justo Condori

student•

Gracias EdgardoAVS por el aporte

Fernando Orozco Velasquez

student•

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 😅)

Henry Alexander Velásquez Rosas

student•

Me parece que se usa igual o muy similar a como se haría un fetch con módulos. Creo que prefiero trabajar todo separado con módulos.

Enrique Maya Garcia

student•

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

Ricardo Alfonso Chavez Vilcapoma

student•

Federico Maidana

student•

Consulta, quiero cambiar el nombre de: {data} por cualquier otro nombre. Y resulta que de esa forma no me muestra los datos de la api. Me sale un error que dice que el nombre de {dataAlgo} no está definido. Alguien tiene idea de por qué ? O como solucionarlo ?

Juan Castro

teacher•

Porque en ese objeto esa propiedad se llama data, no dataAlgo. Si quieres renombrarla tiene que ser con esta sintaxis: { data: dataAlgo }. :wink:

Federico Maidana

student•

Al final, le puse un nombre random y para acceder a la info escribía: (dataAlgo.data.etc). Pero tu solución es más elegante jajaja, así que ahora lo cambio. Gracias Juan.

yamil R llaver muza

student•

Como explica mi amigo personal Juan !!! 😀

Esteban Santiago Pizzani

student•

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.

Juan Pablo Lopez Ramirez

student•

Juanda una pregunta, seria buena ida aprender axios? y se requiere mucho para aprender lo " importante" o es facil. gracias

Juan Castro

teacher•

Si ya dominas fetch, axios es pan comido y una sintaxis preciosa. Yo digo que vale la pena. Y no te demoras mucho. :D

Patricio Nally

student•

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 😀

Ricardo Alfonso Chavez Vilcapoma

student•

¿Por qué?

Paulo Sebastián Vaccaro Hernández

student•

te amo juandc xdddd

Juan David Moreno Rodriguez

student•

amado seas axios :v

Victor Hugo Cruz Carballo

student•

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

Dario Mendoza

student•

El código con comentario

i lo necesitas en texto, dímelo 🙌

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

// 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}

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

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

Migración a Axios

Presentación del proyecto: PlatziMovies

TheMovieDB: análisis de su API

Bocetos en papel y diseño en Figma

Configuración inicial y maquetación del proyecto

Configuración del entorno de desarrollo

Maquetación del proyecto: HTML y CSS

Consumiendo la API

Lista de películas en tendencia

Lista de categorías

Migración a Axios

Navegación

Location y hash navigation

Mostrando y ocultando secciones

Error: carga duplicada de datos

Views

Filtrando películas por categoría

Retos: scrollTop y DRY

Buscador de películas

Retos: historial de navegación y página de tendencias

Endpoint de detalles de una película

Lista de películas recomendadas

Próximos pasos

Toma el Curso Profesional de Consumo de API REST con JavaScript