Migración a Axios
Contenido del curso
Configuración inicial y maquetación del proyecto
Consumiendo la API
Navegación
Views
Próximos pasos
Migración a Axios
Migración a Axios
Contenido del curso
Javier Andrés Valdez González
Marvin Orlando Ruiz Rivera
Ricardo Adrian Justo Condori
Juan Sebastian Espínola
Patricio Nally
Dario Paladines
Roger Fernandes
Jose Luis Bedoya
Julian Franco
Juan Castro
Profesor
Carlos Rodríguez
Cayo Legal
Eloy Chávez Dev
Juan Castro
Profesor
Axel Enrique Galeed Gutierrez
Bryan David Castañeda Aranzales
Juan Castro
Profesor
Enrique Maya Garcia
Ricardo Adrian Justo Condori
Edgardo Andres Vargas Saenz
Ricardo Adrian Justo Condori
Fernando Orozco Velasquez
Henry Alexander Velásquez Rosas
Enrique Maya Garcia
Ricardo Alfonso Chavez Vilcapoma
Federico Maidana
Juan Castro
ProfesorFederico Maidana
yamil R llaver muza
Esteban Santiago Pizzani
Juan Pablo Lopez Ramirez
Juan Castro
ProfesorPatricio Nally
Ricardo Alfonso Chavez Vilcapoma
Paulo Sebastián Vaccaro Hernández
Juan David Moreno Rodriguez
Victor Hugo Cruz Carballo
Dario Mendoza
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 😁.
Justo lo que me preguntaba, gracias por la respuesta.
Buen aporte
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
Como hacés esa imagen bro? Gracias.
Es una extensión de VSC, Patricio, la que yo uso se llama Carbon y de ahí ya configuras lo demás.
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" }, });
los elementos dentro de los parametros pueden ir sin las comillas!
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
En este caso podrías usar la sintaxis de módulos de ECMAScript 6:
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.
Cual es la diferencia entre params y headers?
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.
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 } });
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.
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?
Hola ricardojusto, son muchas las ventajas.
Gracias EdgardoAVS por el aporte
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 😅)
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/
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.
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.
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é?
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 comentario
