Cursos Empresas Blog Live Conf Eventos Precios

0:007:18

Migración a Axios

Curso de API REST con Javascript: Ejemplos con APIs reales

Clase 7 de 17

Clase 7 / 17

Julian Franco

Hace 5 años

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

Profesor

Hace 5 años

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

Carlos Rodríguez

Hace 5 años

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.

Comentarios (35)35 comentarios

Javier Andrés Valdez González

Hace 4 años

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

Justo lo que me preguntaba, gracias por la respuesta.

Ricardo Adrian Justo Condori

Buen aporte

Juan Sebastian Espínola

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

Como hacés esa imagen bro? Gracias.

Dario Paladines

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

Roger Fernandes

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

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

Cayo Legal

Cual es la diferencia entre params y headers?

Eloy Chávez Dev

Hiii 👋🏻

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

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

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.

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

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

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

con este paquete https://browserify.org/

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

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

Gracias EdgardoAVS por el aporte

Fernando Orozco Velasquez

Hace 3 años

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

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.

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

Federico Maidana

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 ?

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

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

Como explica mi amigo personal Juan !!! 😀

Esteban Santiago Pizzani

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

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

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

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 😀

¿Por qué?

Paulo Sebastián Vaccaro Hernández

te amo juandc xdddd

Juan David Moreno Rodriguez

amado seas axios :v

Victor Hugo Cruz Carballo

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

El código con comentario

i lo necesitas en texto, dímelo 🙌

Migración a Axios

Progreso del curso

Presentación del proyecto: PlatziMovies

Configuración inicial y maquetación del proyecto

Consumiendo la API

Navegación

Views

Próximos pasos