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/await es 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ón
• axios.all(iterable) — Hacer solicitudes simultáneas
• axios.spread — Obtener los valores separados de axios.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 argumento data que le vamos a pasar y por último options

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.request agrega el token y lanza la petición.
• El interceptor.response atrapa la respuesta y válida, se da cuenta que el servicio regresa un error de token erróneo. Actualizamos por un token válido.
• Relanzamos la petición, el interceptor.request agrega el token y lanza la petición.
• El interceptor.response atrapa 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.request agrega el token y lanza la petición.

• El interceptor.response atrapa la respuesta y valida, se da cuenta que el servicio nos regresa un error de token erróneo. Actualizamos por un token válido.

• Relanzamos la petición, el interceptor.request agrega el token y lanza la petición.

• El interceptor.response atrapa 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] y api_key[ref] y actualizarlas en los archivos.

• Creamos un proyecto con create-react-app, donde vamos a crear la carpeta src/utils que 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…

Conceptos básicos — API

axios/axios

How to fetch data with React Hooks? - RWieruch

JSONPlaceholder - Fake online REST API for developers

JavaScript — Callbacks y Promises

Iconos e imágenes…

85 free vector icons of Computer Programming Icons designed by Flat Icons