No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Migraci贸n a Axios

7/17
Recursos

Aportes 18

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渁pi鈥 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

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

鈥淪on 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
	}
});

Listo las categorias

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

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

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

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 馃榾

Recuerden que como programadores no tenemos que 鈥渃asarnos鈥 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 馃槄)

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 馃檶

Como explica mi amigo personal Juan !!! 馃榾

Mi aporte con el repositorio:

Mi repositorio

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