Dec 14, 2020
React — Haciendo peticiones con Axios y Hooks
Temario
- Introducción
- ¿Qué es Axios?
- Nuestra primera API REST con Axios (Sintaxis básica, Ejemplo)
- Métodos abreviados (get, post, delete, put, patch, head, all, spread)
- Enviar encabezados personalizados
- Interceptar solicitudes
- Creando Instancias
- Ventajas y desventajas
i. Introducción
Cuando estamos desarrollando una aplicación real, hay un punto donde debemos realizar solicitudes a una API[ref]. React, a diferencia de otros frameworks/librerías no tiene una forma propia de consumir una API, así que tenemos la libertad de utilizar la API Nativa Fetch[ref] o algún otra librería como Axios[ref], Apollo Client[ref]…
En esta story vamos a enfocarnos en la librería Axios…
ii. ¿Qué es Axios?
Es un cliente HTTP basado en promesas para el navegador y node.js[ref]
Axios es una API HTTP de cliente basada en XMLHttpRequest, que se puede utilizar en el navegador y en un servidor con Node.js[ref]. Axios funciona de forma asíncrona, permitiendo realizar llamadas API REST[ref] con retorno JSON. Además es uno de los clientes más populares basado en promesas, que es simple, liviano y muy fácil de personalizar.
iii. Nuestra primera API REST con Axios
Para nuestros ejemplos, vamos a utilizar la API JSONPlaceholder[ref], API REST gratuita en línea que se puede usar para datos falsos.
:: Instalación
:: Sintaxis básica
Hacer una solicitud API REST con Axios, es tan sencilla, que solo se necesita pasarle un objeto de configuración a la función Axios
Usando async/await:
Importante:
async/awaites parte de ECMAScript2017 y NO es compatible con Internet Explorer y navegadores viejos, por lo que hay que tener cuidado.
La respuesta de la petición, siempre será de la siguiente forma:
La respuesta del error, siempre será de la siguiente forma:
Se importa de la siguiente manera:
:: Ejemplo
Vamos a crear la petición, donde ocuparemos useEffect[ref], Axios, así como el estado list que va a guardar la lista.
— Ejemplo Completo
El mismo ejemplo, utilizando async/await :
— Ejemplo Completo
iv. Métodos abreviados
Axios, nos proporciona un conjunto de métodos con alias, para realizar los diferentes tipos de solicitudes.
Los más populares son :
axios.get(url[, config])axios.post(url[, data[, config]])
Para los verbos HTTP:
axios.delete(url[, config])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])axios.options(url[, config])
Otros:
axios.head(url[, config])— Obtener las cabeceras de una peticiónaxios.all(iterable)— Hacer solicitudes simultáneasaxios.spread— Obtener los valores separados deaxios.all
:: axios.get
Vamos a convertir el primer ejemplo:
— Ejemplo (revisa la consola, para ver la petición)
Si se requiere mandar datos, tenemos dos formas de hacerlo:
- Directamente en la url:
— Ejemplo (revisa la consola, para ver la petición)
- Por medio de la propiedad
params:
— Ejemplo (revisa la consola, para ver la petición)
:: axios.post
Vamos a utilizar el método axios.post() para agregar un nuevo registro:
— Ejemplo (revisa la consola, para ver la petición)
:: axios.delete
Vamos a utilizar el método axios.delete(), para eliminar un registro:
— Ejemplo (revisa la consola, para ver la petición)
:: axios.put
Vamos a utilizar el método axios.put(), para actualizar un registro completo:
— Ejemplo (revisa la consola, para ver la petición)
:: axios.patch
Vamos a utilizar el método axios.patch(), para actualizar un registro (algunos datos):
— Ejemplo (revisa la consola, para ver la petición)
:: axios.head
Vamos a utilizar el método axios.head(), para obtener las cabeceras de una petición:
— Ejemplo (revisa la consola, para ver la petición)
:: axios.all
Una de las características más atractivas que tiene axios, es poder realizar múltiples llamadas en paralelo, este método retorna un objeto de promesa que se resuelve cuando todos las peticiones pasadas dentro de una matriz se han resuelto.
Vamos a utilizar el método axios.all para realizar dos peticiones get :
En el código de arriba, estamos realizando dos peticiones (el post con id=1, así como los comentarios de este post).
Importante: Si alguna petición es rechaza, automáticamente las demás serán rechazadas.
— Ejemplo (revisa la consola, para ver la petición)
:: axios.spread
Axios, nos proporciona un método para obtener por argumento cada una de las peticiones. Veamos el mismo ejemplo:
— Ejemplo (revisa la consola, para ver la petición)
v. Enviar encabezados personalizados
Axios nos permite mandar headers personalizados:
Nota: No olvidemos que el primer argumento es la
url, el segundo argumentodataque le vamos a pasar y por últimooptions
vi. Interceptar solicitudes
Otra de las características atractivas que tiene Axios, es el poder interceptar las solicitudes (request) o respuestas (response) antes de que sean manejadas por then o catch.
Esta función es bastante útil, ya que vamos a tener un control total de todas las peticiones y respuestas que se hagan.
:: Sintaxis
- Solicitud (request):
- Respuesta (response):
:: Cómo funciona
:: Ejemplo
Imagina que tenemos una aplicación, donde el usuario debe autentificarse, al momento de que se loguea, el servicio nos regresa el siguiente resultado:
Donde lo guardamos en la sessionStorage[ref], para que siempre esté disponible. Ahora, la idea es de que el token se mande en el header de todas las peticiones, con la finalidad de validar que realmente es el usuario y tiene permisos para ver, editar, insertar o eliminar. Para eso usaremos interceptors.request :
Entonces, hacemos la petición:
- Cuando se manda el token en el
header:
Podemos observar en la animación que dentro de Request Headers estamos mandando x-rapidapi-key, que es el token de autenticación que necesita la API, por lo que nos devuelve los datos.
- Cuando NO se manda el token en el
header:
Podemos observar en la animación que dentro de Request Headers NO estamos mandando x-rapidapi-key, que es el token de autenticación que necesita la API, por lo que nos devuelve un mensaje de error.
— Ejemplo (revisa la consola, para ver la petición)
:: Ejemplo 2
La idea es la siguiente:
- Creamos un token erróneo.
- Lanzamos la petición, el
interceptor.requestagrega el token y lanza la petición. - El
interceptor.responseatrapa la respuesta y válida, se da cuenta que el servicio regresa unerrorde token erróneo. Actualizamos por un token válido. - Relanzamos la petición, el
interceptor.requestagrega el token y lanza la petición. - El
interceptor.responseatrapa la respuesta y valida, al tener una respuesta OK, mandamos los datos al servicio que invocó.
Entonces, vamos por pasos:
- Creamos un token erróneo
- Lanzamos la petición, el
interceptor.requestagrega el token y lanza la petición.
- El
interceptor.responseatrapa la respuesta y valida, se da cuenta que el servicio nos regresa unerrorde token erróneo. Actualizamos por un token válido.
- Relanzamos la petición, el
interceptor.requestagrega el token y lanza la petición.
- El
interceptor.responseatrapa la respuesta y valida, al tener una respuesta OK, mandamos los datos al servicio que invocó.
— Ejemplo (revisa la consola, para ver la petición)
vii. Creando Instancias
Otra característica que es bastante útil, es el de crear múltiples instancias con valores predeterminados. Imagina que debes consumir 2 o 3 API REST de diferentes dominios, con Axios es bastante sencillo.
:: Sintaxis
:: Ejemplo
Vamos a consumir 2 APIS, themoviedb[ref] para obtener el programa de televisión y myapifilms[ref] para obtener los datos de una actriz.
Importante: En caso de que no funcione el ejemplo, deben crear su propio
token[ref] yapi_key[ref] y actualizarlas en los archivos.
- Creamos un proyecto con
create-react-app, donde vamos a crear la carpetasrc/utilsque es donde van a ir nuestras instancias. - Creamos el archivo
src/utils/axios.themoviedb.js
Lo que hacemos es interceptar el request, para agregarle la API_KEY
- Creamos el archivo
src/utils/axios.myapifilms.js
Lo que hacemos es interceptar el request, para agregarle la API_KEY y format.
Ahora en nuestra App los importamos, y los usamos:
Podrías mejorar el código utilizando Axios.all …
— Ejemplo (revisa la consola, para ver la petición)
El usuario de Github moreta[ref], ha hecho un ejemplo más avanzado para una instancia[ref].
Si quieres ver toda la documentación a fondo y ver otras características que tiene Axios[ref].
viii. Ventajas y desventajas
- Compatible con todos los navegadores modernos, incluido el soporte para IE8 y superior.
- Está basado en promesas, por lo que podemos escribir código asíncrono.
- Se puede cancelar la solicitud
- Podemos interceptar las peticiones (request y response).
- Manejo simplificado y unificado de errores.
- Protección contra XSRF
- Transformación automática de datos JSON, además puedes interceptar los datos y cambiarlos.
- Trabaja en Node.js
En la siguiente entrega vamos a ver React — Componentes genéricos con props.children y la API Children
La entrega pasada vimos React — Creando la app Search Pokémon con create-react-app, estilos con react-jss y Hooks (useState, useEffect, useRef, useReducer, useCallback y custom Hooks)
Bibliografía y links que te puede interesar…
Iconos e imágenes…
