Consumir API REST en React con Fetch y Axios

Implemente rápidamente. Implementar inteligentemente

Register!

Índice

¿Qué es una API REST?
1. Los beneficios de las API REST
2. Un ejemplo de respuesta de API REST
Consumir API utilizando Fetch API
Consumamos una API REST con el método Fetch
Consumir API con Axios
Consumamos una API REST con el cliente Axios
Recuperar y Axios

Si es un desarrollador de React y desea aprender cómo comenzar a consumir API en sus aplicaciones de React, este artículo es para usted. Shedrack Akintayo explica qué es una API REST y cómo crear una aplicación sencilla que consuma una API REST utilizando Fetch API y Axios.

El consumo de API REST en una aplicación React se puede realizar de varias maneras, pero en este tutorial, analizaremos cómo podemos consumir API REST utilizando dos de los métodos más populares conocidos como Axios (un cliente HTTP basado en promesas) y Fetch API. (una API web incorporada en el navegador). Discutiré e implementaré cada uno de estos métodos en detalle y arrojaré luz sobre algunas de las características interesantes que cada uno de ellos tiene para ofrecer.

Las API son lo que podemos usar para potenciar nuestras aplicaciones React con datos. Hay ciertas operaciones que no se pueden realizar en el lado del cliente, por lo que estas operaciones se implementan en el lado del servidor. Luego podemos usar las API para consumir los datos en el lado del cliente.

Las API constan de un conjunto de datos, que suele estar en formato JSON con puntos finales específicos. Cuando accedemos a datos desde una API, queremos acceder a puntos finales específicos dentro de ese marco de API. También podemos decir que una API es un acuerdo contractual entre dos servicios sobre la forma de solicitud y respuesta. El código es sólo un subproducto. También contiene los términos de este intercambio de datos.

En React, hay varias formas en que podemos consumir API REST en nuestras aplicaciones, estas formas incluyen el uso del fetch()método incorporado de JavaScript y Axios, que es un cliente HTTP basado en promesas para el navegador y Node.js.

Nota: Un buen conocimiento de ReactJS, React Hooks, JavaScript y CSS le resultará útil a medida que avance en este tutorial.

Comencemos aprendiendo más sobre la API REST.

¿Qué es una API REST?

Una API REST es una API que sigue lo estructurado de acuerdo con la Estructura REST para API. REST significa "Transferencia de Estado Representacional". Consta de varias reglas que siguen los desarrolladores al crear API.

Los beneficios de las API REST

Muy fácil de aprender y entender;
Proporciona a los desarrolladores la capacidad de organizar aplicaciones complicadas en recursos simples;
Es fácil para los clientes externos desarrollar su API REST sin complicaciones;
Es muy fácil de escalar;
Una API REST no es específica de un idioma ni de una plataforma, pero puede usarse con cualquier idioma o ejecutarse en cualquier plataforma.

Un ejemplo de respuesta de API REST

La forma en que se estructura una API REST depende del producto para el que se creó, pero se deben seguir las reglas de REST.

La respuesta de ejemplo a continuación es de Github Open API . Usaremos esta API para crear una aplicación React más adelante en este tutorial.

{"login": "hacktivist123","id": 26572907,"node_id": "MDQ6VXNlcjI2NTcyOTA3","avatar_url": "https://avatars3.githubusercontent.com/u/26572907?v=4","gravatar_id": "","url": "https://api.github.com/users/hacktivist123","html_url": "https://github.com/hacktivist123","followers_url": "https://api.github.com/users/hacktivist123/followers","following_url": "https://api.github.com/users/hacktivist123/following{/other_user}","gists_url": "https://api.github.com/users/hacktivist123/gists{/gist_id}","starred_url": "https://api.github.com/users/hacktivist123/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/hacktivist123/subscriptions","organizations_url": "https://api.github.com/users/hacktivist123/orgs","repos_url": "https://api.github.com/users/hacktivist123/repos","events_url": "https://api.github.com/users/hacktivist123/events{/privacy}","received_events_url": "https://api.github.com/users/hacktivist123/received_events","type": "User","site_admin": false,"name": "Shedrack akintayo","company": null,"blog": "https://sheddy.xyz","location": "Lagos, Nigeria ","email": null,"hireable": true,"bio": "☕ Software Engineer | | Developer Advocate || ❤ Everything JavaScript","public_repos": 68,"public_gists": 1,"followers": 130,"following": 246,"created_at": "2017-03-21T12:55:48Z","updated_at": "2020-05-11T13:02:57Z"}

La respuesta anterior proviene de la API REST de Github cuando hago una GETsolicitud al siguiente punto final https://api.github.com/users/hacktivist123. Devuelve todos los datos almacenados sobre un usuario llamado hacktivist123 . Con esta respuesta, podemos decidir renderizarla como queramos en nuestra aplicación React.

Consumir API utilizando Fetch API

La fetch()API es un método JavaScript incorporado para obtener recursos de un servidor o un punto final de API. Es similar a XMLHttpRequest, pero la API de recuperación proporciona un conjunto de funciones más potente y flexible.

Define conceptos como CORS y la semántica del encabezado de origen HTTP , reemplazando sus definiciones separadas en otros lugares.

El fetch()método API siempre incluye un argumento obligatorio, que es la ruta o URL del recurso que desea recuperar. Devuelve una promesa que apunta a la respuesta de la solicitud, ya sea que la solicitud sea exitosa o no. Opcionalmente, también puede pasar un objeto de opciones de inicio como segundo argumento.

Una vez que se ha obtenido una respuesta, hay varios métodos incorporados disponibles para definir cuál es el contenido del cuerpo y cómo debe manejarse.

La diferencia entre Fetch API y jQuery Ajax

La API Fetch se diferencia de jQuery Ajax en tres aspectos principales, que son:

La promesa devuelta por una fetch()solicitud no se rechazará cuando haya un error HTTP, sin importar la naturaleza del estado de la respuesta. En cambio, resolverá la solicitud normalmente; si el código de estado de respuesta es un código de tipo 400 o 500, establecerá el estado correcto. Una solicitud solo será rechazada debido a una falla en la red o si algo impide que se complete la solicitud.
fetch()no permitirá el uso de cookies entre sitios, es decir, no puede realizar una sesión entre sitios utilizandofetch()
fetch()Tampoco enviará cookies de forma predeterminada a menos que configure la credentialsopción de inicio.

Parámetros para la API Fetch

resource
Esta es la ruta al recurso que desea recuperar; puede ser un enlace directo a la ruta del recurso o un objeto de solicitud.
init
Este es un objeto que contiene cualquier configuración personalizada o credenciales que desee proporcionar para su fetch()solicitud. Las siguientes son algunas de las posibles opciones que pueden estar contenidas en el initobjeto:
- method
  Esto es para especificar el método de solicitud HTTP, por ejemplo, GET, POST, etc.
- headers
  Esto es para especificar cualquier encabezado que desee agregar a su solicitud, generalmente contenido en un objeto o en un objeto literal.
- body
  Esto es para especificar un cuerpo que desea agregar a su solicitud: puede ser un Blob, BufferSource, FormData, URLSearchParams, USVStringu ReadableStreamobjeto
- mode
  Esto sirve para especificar el modo que desea utilizar para la solicitud, por ejemplo, cors, no-corso same-origin.
- credentials
  Esto para especificar las credenciales de solicitud que desea utilizar para la solicitud; esta opción debe proporcionarse si considera enviar cookies automáticamente para el dominio actual.

Sintaxis básica para usar la API Fetch()

Una solicitud de recuperación básica es realmente sencilla de escribir; eche un vistazo al siguiente código:

fetch('https://api.github.com/users/hacktivist123/repos') .then(response = response.json()) .then(data = console.log(data));

En el código anterior, obtenemos datos de una URL que devuelve datos como JSON y luego los imprimimos en la consola. La forma más simple de usar fetch() a menudo toma solo un argumento, que es la ruta al recurso que desea recuperar y luego devolver una promesa que contiene la respuesta de la solicitud de recuperación. Esta respuesta es un objeto.

La respuesta es solo una respuesta HTTP normal y no el JSON real. Para obtener el contenido del cuerpo JSON de la respuesta, tendríamos que cambiar la respuesta al JSON real usando el método json() en la respuesta.

Uso de Fetch API en aplicaciones React

Usar Fetch API en React Apps es la forma normal en que usaríamos Fetch API en javascript, no hay cambios en la sintaxis, el único problema es decidir dónde realizar la solicitud de recuperación en nuestra aplicación React. La mayoría de las solicitudes de recuperación o cualquier solicitud HTTP de cualquier tipo generalmente se realiza en un componente React.

Esta solicitud se puede realizar dentro de un Método de ciclo de vida si su componente es un Componente de clase o dentro de un React Hook si su componente es un Componente funcional.useEffect()

Por ejemplo, en el código siguiente, realizaremos una solicitud de recuperación dentro de un componente de clase, lo que significa que tendremos que hacerlo dentro de un método de ciclo de vida. En este caso particular, nuestra solicitud de recuperación se realizará dentro de un componentDidMountmétodo de ciclo de vida porque queremos realizar la solicitud justo después de que nuestro componente React se haya montado.

import React from 'react';class myComponent extends React.Component { componentDidMount() { const apiUrl = 'https://api.github.com/users/hacktivist123/repos'; fetch(apiUrl) .then((response) = response.json()) .then((data) = console.log('This is your data', data)); } render() { return h1my Component has Mounted, Check the browser 'console' /h1; }}export default myComponent;

En el código anterior, estamos creando un componente de clase muy simple que realiza una solicitud de recuperación que registra los datos finales de la solicitud de recuperación que realizamos en la URL de la API en la consola del navegador después de que el componente React haya terminado de montarse.

El fetch()método toma la ruta al recurso que queremos recuperar, que se asigna a una variable llamada apiUrl. Una vez completada la solicitud de recuperación, devuelve una promesa que contiene un objeto de respuesta. Luego, extraemos el contenido del cuerpo JSON de la respuesta usando el json()método y finalmente registramos los datos finales de la promesa en la consola.

Consumamos una API REST con el método Fetch

En esta sección, crearemos una aplicación de reacción simple que consume una API externa y usaremos el método Fetch para consumir la API.

La sencilla aplicación mostrará todos los repositorios y su descripción que pertenecen a un usuario en particular. Para este tutorial, usaré mi nombre de usuario de GitHub; también puedes usar el tuyo si lo deseas.

Lo primero que debemos hacer es generar nuestra aplicación React usando create-react-app:

npx create-react-app myRepos

El comando anterior iniciará una nueva aplicación React para nosotros. Una vez creada nuestra nueva aplicación, todo lo que queda por hacer es ejecutar el siguiente comando y comenzar a codificar:

npm start

Si nuestro React se creó correctamente, deberíamos ver esto en la ventana de nuestro navegador cuando navegamos localhost:3000después de ejecutar el comando anterior.

( Vista previa grande )

En su srccarpeta, cree una nueva carpeta llamada component. Esta carpeta contendrá todos nuestros componentes de React. En la nueva carpeta, cree dos archivos titulados List.js y withListLoading.js . Estos dos archivos contendrán los componentes que serán necesarios en nuestra aplicación.

El archivo List.js manejará la visualización de nuestros Repositorios en forma de lista, y el archivo withListLoading.js contendrá un componente de orden superior que se mostrará cuando la solicitud de recuperación que realizaremos aún esté en curso.

En el archivo List.js que creamos dentro de la componentscarpeta, peguemos el siguiente código:

import React from 'react';const List = (props) = { const { repos } = props; if (!repos || repos.length === 0) return pNo repos, sorry/p; return ( ul h2 className='list-head'Available Public Repositories/h2 {repos.map((repo) = { return ( li key={repo.id} className='list' span className='repo-text'{repo.name} /span span className='repo-description'{repo.description}/span /li ); })} /ul );};export default List;

El código anterior es un componente básico de la lista de React que mostraría los datos, en este caso, el nombre de los repositorios y sus descripciones en una lista. Știri de ultimă oră din Spania

Ahora déjame explicarte el código poco a poco.

const { repos } = props;

Estamos inicializando un accesorio para el componente llamado repositorios.

if (repos.length === 0 || !repos) return pNo repos, sorry/p;

Aquí, todo lo que hacemos es hacer una declaración condicional que mostrará un mensaje cuando la longitud de los repositorios que obtenemos de la solicitud que realizamos sea igual a cero.

return ( ul h2 className='list-head'Available Public Repositories/h2 {repos.map((repo) = { return ( li key={repo.id} className='list' span className='repo-text'{repo.name} /span span className='repo-description'{repo.description}/span /li ); })} /ul );

Aquí, mapeamos cada uno de los repositorios que proporcionará la solicitud de API que realizamos y extraemos cada uno de los nombres de los repositorios y sus descripciones, luego mostramos cada uno de ellos en una lista.

export default List;

Aquí estamos exportando nuestro Listcomponente para poder usarlo en otro lugar.

En el archivo withListLoading.js que creamos dentro de la carpeta de componentes, peguemos el siguiente código:

import React from 'react';function WithListLoading(Component) { return function WihLoadingComponent({ isLoading, ...props }) { if (!isLoading) return Component {...props} /; return ( p style={{ textAlign: 'center', fontSize: '30px' }} Hold on, fetching data may take some time :) /p ); };}export default WithListLoading;

El código anterior es un componente React de orden superior que toma otro componente y luego devuelve algo de lógica. En nuestro caso, nuestro componente superior esperará para comprobar si el isLoadingestado actual del componente que toma es trueo false. Si el isLoadingestado actual es verdadero, mostrará un mensaje Espera, la obtención de datos puede llevar algún tiempo 🙂 . Inmediatamente, el isLoadingestado cambia y falserepresentará el componente que tomó. En nuestro caso, representará el componente Lista .

En su archivo * App.js dentro de la carpeta src , peguemos el siguiente código:

import React, { useEffect, useState } from 'react';import './App.css';import List from './components/List';import withListLoading from './components/withListLoading';function App() { const ListLoading = withListLoading(List); const [appState, setAppState] = useState({ loading: false, repos: null, }); useEffect(() = { setAppState({ loading: true }); const apiUrl = `https://api.github.com/users/hacktivist123/repos`; fetch(apiUrl) .then((res) = res.json()) .then((repos) = { setAppState({ loading: false, repos: repos }); }); }, [setAppState]); return ( div className='App' div className='container' h1My Repositories/h1 /div div className='repo-container' ListLoading isLoading={appState.loading} repos={appState.repos} / /div footer div className='footer' Built{' '} span role='img' aria-label='love' /span{' '} with by Shedrack Akintayo /div /footer /div );}export default App;

Nuestro App.js es un componente funcional que utiliza React Hooks para manejar el estado y también los efectos secundarios. Si no está familiarizado con React Hooks, lea mi Guía de introducción a React Hooks.

Déjame explicarte el código anterior poco a poco.

import React, { useEffect, useState } from 'react';import './App.css';import List from './components/List';import withListLoading from './components/withListLoading';

Aquí, estamos importando todos los archivos externos que necesitamos y también los componentes que creamos en nuestra carpeta de componentes. También estamos importando los React Hooks que necesitamos de React.

const ListLoading = withListLoading(List); const [appState, setAppState] = useState({ loading: false, repos: null, });

Aquí, estamos creando un nuevo componente llamado ListLoadingy asignando nuestro withListLoadingcomponente de orden superior envuelto alrededor de nuestro componente de lista. Luego estamos creando nuestros valores de estado loadingy reposusando useState()React Hook.

useEffect(() = { setAppState({ loading: true }); const user = `https://api.github.com/users/hacktivist123/repos`; fetch(user) .then((res) = res.json()) .then((repos) = { setAppState({ loading: false, repos: repos }); }); }, [setAppState]);

Aquí, estamos inicializando un useEffect()React Hook. En el useEffect()gancho, configuramos nuestro estado de carga inicial en verdadero; mientras esto sea cierto, nuestro componente de orden superior mostrará un mensaje. Luego, creamos una variable constante llamada usery asignamos la URL de API de la que obtendremos los datos de los repositorios.

Luego hacemos una fetch()solicitud básica como la que comentamos anteriormente y luego, una vez realizada la solicitud, configuramos el estado de carga de la aplicación en falso y completamos el estado de los repositorios con los datos que obtuvimos de la solicitud.

return ( div className='App' div className='container' h1My Repositories/h1 /div div className='repo-container' ListLoading isLoading={AppState.loading} repos={AppState.repos} / /div /div );}export default App;

Aquí básicamente solo representamos el Componente al que asignamos nuestro componente de orden superior y también llenamos el isLoadingaccesorio y reposel accesorio con su valor de estado.

Ahora, deberíamos ver esto en nuestro navegador, cuando la solicitud de recuperación aún se está realizando, cortesía de nuestro withListLoadingcomponente de orden superior:

( Vista previa grande )

Ahora, cuando la solicitud de recuperación se haya completado con éxito, deberíamos ver los repositorios mostrados en un formato de lista como se muestra a continuación:

( Vista previa grande )

Ahora, diseñemos un poco nuestro proyecto, en su archivo App.css , copie y pegue este código.

@import url('https://fonts.googleapis.com/css2?family=Amiridisplay=swap');:root { --basic-color: #23cc71;}.App { box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: 'Amiri', serif; overflow: hidden;}.container { display: flex; flex-direction: row;}.container h1 { font-size: 60px; text-align: center; color: var(--basic-color);}.repo-container { width: 50%; height: 700px; margin: 50px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); overflow: scroll;}@media screen and (max-width: 600px) { .repo-container { width: 100%; margin: 0; box-shadow: none; }}.repo-text { font-weight: 600;}.repo-description { font-weight: 600; font-style: bold; color: var(--basic-color);}.list-head { text-align: center; font-weight: 800; text-transform: uppercase;}.footer { font-size: 15px; font-weight: 600;}.list { list-style: circle;}

Entonces, en el código anterior, estamos diseñando nuestra aplicación para que se vea más agradable a la vista, hemos asignado varios nombres de clase a cada elemento en nuestro archivo App.js y, por lo tanto, estamos usando estos nombres de clase para diseñar nuestra aplicación.

Una vez que hayamos aplicado nuestro estilo, nuestra aplicación debería verse así:

( Vista previa grande )

Ahora nuestra aplicación se ve mucho mejor.

Así es como podemos usar la API Fetch para consumir una API REST. En la siguiente sección, analizaremos Axios y cómo podemos usarlo para consumir la misma API en la misma aplicación.

Consumir API con Axios

Axios es un cliente HTTP basado en promesas fácil de usar para el navegador y node.js. Dado que Axios se basa en promesas, podemos aprovechar async y esperar a que haya código más legible y asincrónico. Con Axios, tenemos la capacidad de interceptar y cancelar solicitudes; también tiene una función incorporada que brinda protección del lado del cliente contra la falsificación de solicitudes entre sitios.

Características de Axios

Interceptación de solicitudes y respuestas
Manejo de errores optimizado
Protección contra XSRF
Soporte para el progreso de carga
Tiempo de espera de respuesta
La capacidad de cancelar solicitudes.
Soporte para navegadores antiguos
Transformación automática de datos JSON

Realizar solicitudes con Axios

Realizar solicitudes HTTP con Axios es bastante sencillo. El siguiente código es básicamente cómo realizar una solicitud HTTP.

// Make a GET requestaxios({ method: 'get', url: 'https://api.github.com/users/hacktivist123',});// Make a Post Requestaxios({ method: 'post', url: '/login', data: { firstName: 'shedrack', lastName: 'akintayo' }});

El código anterior muestra las formas básicas en que podemos realizar una solicitud HTTP GET y POST con Axios.

Axios también proporciona un conjunto de métodos abreviados para realizar diferentes solicitudes HTTP. Los métodos son los siguientes:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Por ejemplo, si queremos realizar una solicitud similar al código de ejemplo anterior pero con los métodos abreviados, podemos hacerlo así:

// Make a GET request with a shorthand methodaxios.get('https://api.github.com/users/hacktivist123');// Make a Post Request with a shorthand methodaxios.post('/signup', { firstName: 'shedrack', lastName: 'akintayo'});

En el código anterior, realizamos la misma solicitud que hicimos anteriormente, pero esta vez con el método abreviado. Axios proporciona flexibilidad y hace que sus solicitudes HTTP sean aún más legibles.

Realizar múltiples solicitudes con Axios

Axios brinda a los desarrolladores la capacidad de realizar y manejar solicitudes HTTP simultáneas utilizando el axios.all()método. Este método toma una serie de argumentos y devuelve un único objeto de promesa que se resuelve solo cuando se han resuelto todos los argumentos pasados en la matriz.

Por ejemplo, podemos realizar múltiples solicitudes a la API de GitHub usando el axios.all()siguiente método:

axios.all([ axios.get('https://api.github.com/users/hacktivist123'), axios.get('https://api.github.com/users/adenekan41')]).then(response = { console.log('Date created: ', response[0].data.created_at); console.log('Date created: ', response[1].data.created_at);});

El código anterior realiza solicitudes simultáneas a una serie de argumentos en paralelo y devuelve los datos de respuesta; en nuestro caso, registrará en la consola el created_atobjeto de cada una de las respuestas de la API.

Consumamos una API REST con el cliente Axios

En esta sección, todo lo que haremos será reemplazar fetch()el método con Axios en nuestra aplicación React existente. Todo lo que necesitamos hacer es instalar Axios y luego usarlo en nuestro archivo App.js para realizar la solicitud HTTP a la API de GitHub.

Ahora instalemos Axios en nuestra aplicación React ejecutando cualquiera de los siguientes:

Con el MNP:

npm install axios

Con hilo:

yarn add axios

Una vez completada la instalación, tenemos que importar axios a nuestro App.js. En nuestro App.js agregaremos la siguiente línea en la parte superior de nuestro archivo App.js:

import axios from 'axios'

Después de agregar la línea de código de nuestro App.js, todo lo que tenemos que hacer dentro useEffect()es escribir el siguiente código:

useEffect(() = { setAppState({ loading: true }); const apiUrl = 'https://api.github.com/users/hacktivist123/repos'; axios.get(apiUrl).then((repos) = { const allRepos = repos.data; setAppState({ loading: false, repos: allRepos }); }); }, [setAppState]);

Es posible que haya notado que ahora hemos reemplazado la API de recuperación con el método abreviado de Axios axios.getpara realizar una getsolicitud a la API.

axios.get(apiUrl).then((repos) = { const allRepos = repos.data; setAppState({ loading: false, repos: allRepos }); });

En este bloque de código, realizamos una solicitud GET, luego devolvemos una promesa que contiene los datos de los repositorios y asignamos los datos a una variable constante llamada allRepos. Luego configuramos el estado de carga actual en falso y también pasamos los datos de la solicitud a la variable de estado de repositorios.

Si hicimos todo correctamente, deberíamos ver que nuestra aplicación aún se procesa de la misma manera sin ningún cambio.

( Vista previa grande )

Así es como podemos usar el cliente Axios para consumir una API REST.

Recuperar y Axios

En esta sección, enumeraré ciertas funciones y luego hablaré sobre qué tan bien Fetch y Axios admiten estas funciones.

Sintaxis básica
Tanto Fetch como Axios tienen sintaxis muy simples para realizar solicitudes. Pero Axios tiene ventaja porque Axios convierte automáticamente una respuesta a JSON, por lo que cuando usamos Axios nos saltamos el paso de convertir la respuesta a JSON, a diferencia de Fetch() donde todavía tendríamos que convertir la respuesta a JSON. Por último, los métodos abreviados de Axios nos permiten facilitar solicitudes HTTP específicas.
Compatibilidad del navegador
Una de las muchas razones por las que los desarrolladores preferirían Axios a Fetch es porque Axios es compatible con los principales navegadores y versiones, a diferencia de Fetch, que solo es compatible con Chrome 42+, Firefox 39+, Edge 14+ y Safari 10.1+.
Manejo del tiempo de espera de respuesta
Establecer un tiempo de espera para las respuestas es muy fácil de hacer en Axios haciendo uso de la timeoutopción dentro del objeto de solicitud. Pero en Fetch no es tan fácil hacer esto. Fetch proporciona una función similar mediante el uso de la AbortController()interfaz, pero lleva más tiempo implementarla y puede resultar confuso.
Intercepción de solicitudes HTTP
Axios permite a los desarrolladores interceptar solicitudes HTTP. Los interceptores HTTP son necesarios cuando necesitamos cambiar las solicitudes HTTP de nuestra aplicación al servidor. Los interceptores nos brindan la capacidad de hacerlo sin tener que escribir código adicional.
Realizar múltiples solicitudes simultáneamente
Axios nos permite r

Tal vez te puede interesar:

Consumir API REST en React con Fetch y Axios

Consumir API REST en React con Fetch y Axios

¿Qué es una API REST?Consumir API utilizando Fetch APIConsumamos una API REST con el método FetchConsumir API con AxiosConsumamos una API REST con el client

programar

es

https://aprendeprogramando.es/static/images/programar-consumir-api-rest-en-react-con-fetch-y-axios-1034-0.jpg

2024-12-03

Consumir API REST en React con Fetch y Axios — Consumir API REST en React con Fetch y Axios

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

Update cookies preferences