Migración a Axios

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? 🤔
.

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

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

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

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

i lo necesitas en texto, dímelo 🙌

Mi aporte con el repositorio:

Mi repositorio

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.