El consumo de API REST en una aplicación React se puede hacer de varias maneras, pero en este tutorial, discutiremos 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 sobrecargar 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. Entonces podemos usar las API para consumir los datos en el lado del cliente.

Las API consisten en un conjunto de datos, que a menudo está 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 solo 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 incluyen el uso del JavaScript incorporado fetch() método 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 será útil a medida que avance en este tutorial.

Comencemos por aprender más sobre la API REST.

¿Qué es una API REST?

A REST API es una API que sigue lo que está estructurado de acuerdo con el Estructura REST para APIs. REST significa "Transferencia de Estado representativa". Consiste en varias reglas que los desarrolladores siguen al crear API.

Los beneficios de las API REST

1. Muy fácil de aprender y entender;
2. Proporciona a los desarrolladores la capacidad de organizar aplicaciones complicadas en recursos simples;
3. Es fácil para los clientes externos construir en su API REST sin complicaciones;
4. Es muy fácil de escalar;
5. Una API REST no es específica del idioma o de la plataforma, pero puede consumirse con cualquier idioma o ejecutarse en cualquier plataforma.

Un ejemplo de una respuesta API REST

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

La siguiente muestra de respuesta es de API abierta de Github. Usaremos esta API para construir 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 es de la API REST de Github cuando hago un GET solicitud al siguiente punto final https://api.github.com/users/hacktivist123. Devuelve todos los datos almacenados sobre un usuario llamado hacktivista123. Con esta respuesta, podemos decidir representarlo de la forma que queramos en nuestra aplicación React.

Consumir API utilizando la API Fetch

El fetch() API es un método JavaScript incorporado para obtener recursos de un servidor o un punto final API. Es similar a XMLHttpRequest, Pero el buscar API Proporciona un conjunto de características más potente y flexible.

Define conceptos como CORS y del Encabezado de origen HTTP semántica, suplantando sus definiciones separadas en otra parte.

El fetch() El método API siempre incluye un argumento obligatorio, que es la ruta o la URL del recurso que desea obtener. 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 se debe manejar.

La diferencia entre la API Fetch y jQuery Ajax

La API Fetch es diferente de jQueryAjax en tres formas principales, que son:

1. La promesa regresó de un fetch() la solicitud no se rechazará cuando haya un error HTTP, sin importar la naturaleza del estado de la respuesta. En su lugar, 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 se rechazará debido a una falla de la red o si algo impide que la solicitud se complete
2. fetch() no permitirá el uso de cookies entre sitios, es decir, no puede llevar a cabo una sesión entre sitios utilizando fetch()
3. fetch() tampoco enviará cookies por defecto a menos que establezca credentials en la opción init

Parámetros para la API Fetch

• resource
  Esta es la ruta al recurso que desea obtener, 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 le gustaría proporcionar para su fetch() solicitud. Las siguientes son algunas de las posibles opciones que pueden incluirse en init :
  • method
    Esto es para especificar el método de solicitud HTTP, por ejemplo, GET, POST, etc.
  • headers
    Esto es para especificar cualquier encabezado que le gustaría agregar a su solicitud, generalmente contenido en un objeto o un literal de objeto.
  • body
    Esto es para especificar un cuerpo que desea agregar a su solicitud: esto puede ser un Blob, BufferSource, FormData, URLSearchParams, USVStringo ReadableStream objeto
  • mode
    Esto es 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 búsqueda básica es realmente simple 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, estamos obteniendo 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 devuelve 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. En otro para obtener el contenido del cuerpo JSON de la respuesta, tendríamos que cambiar la respuesta a JSON real usando el método json () en la respuesta.

Uso de Fetch API en React Apps

Usar la API Fetch en React Apps es la forma normal en que usaríamos la API Fetch en javascript, no hay cambios en la sintaxis, el único problema es decidir dónde hacer 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 puede hacerse dentro de un Método del ciclo de vida si su componente es un Componente de clase o dentro de un useEffect() Reaccionar gancho si su componente es un componente funcional.

Por ejemplo, en el siguiente código, haremos una solicitud de búsqueda 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 búsqueda se realizará dentro de un componentDidMount método de ciclo de vida porque queremos hacer 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 <h1>my 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 hemos realizado en la URL de la API en la consola del navegador después de que el componente Reaccionar haya terminado de montarse.

El fetch() El método toma la ruta al recurso que queremos obtener, 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, estamos extrayendo el contenido del cuerpo JSON de la respuesta usando el json() método, 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, usaremos el método Fetch para consumir la API.

La aplicación simple mostrará todos los repositorios y su descripción que pertenece 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. Tan pronto como se haya creado nuestra nueva aplicación, todo lo que queda por hacer es ejecutar el siguiente comando y comenzar a codificar:

npm start

Si nuestra reacción se crea correctamente, deberíamos ver esto en la ventana de nuestro navegador cuando naveguemos a localhost:3000 después de ejecutar el comando anterior.

(Vista previa grande)

En su src carpeta, cree una nueva carpeta llamada component. Esta carpeta contendrá todos nuestros componentes React. En la nueva carpeta, cree dos archivos titulados lista.js y conListLoading.js. Estos dos archivos contendrán los componentes que se necesitarán en nuestra aplicación.

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

En lista.js archivo que creamos dentro del components carpeta, peguemos el siguiente código:

import React from 'react';
const List = (props) => { const { repos } = props; if (!repos || repos.length === 0) return <p>No 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á los datos, en este caso, el nombre de los repositorios y sus descripciones en una lista.

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

const { repos } = props;

Estamos inicializando un accesorio para el componente llamado repos.

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

Aquí, todo lo que estamos haciendo es hacer una declaración condicional que generará un mensaje cuando la longitud de los repositorios que obtenemos de la solicitud que hacemos es 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í, estamos mapeando a través de cada uno de los repositorios que serán proporcionados por la solicitud de API que hacemos y extrayendo cada uno de los nombres de los repositorios y sus descripciones, luego estamos mostrando cada uno de ellos en una lista.

export default List;

Aquí estamos exportando nuestro List componente para que podamos usarlo en otro lugar.

En conListLoading.js archivo 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 verificar si el actual isLoading estado del componente que se necesita es true or false. Si el actual isLoading el estado es verdadero, mostrará un mensaje Espera, recuperar datos puede llevar algo de tiempo 🙂. De inmediato el isLoading cambios de estado a false representará el componente que tomó. En nuestro caso, representará el Lista componente.

En tus *Aplicación.js archivo dentro del src carpeta, 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'> <h1>My 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 Introducción a la guí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 ListLoading y asignando nuestro withListLoading componente de orden superior envuelto alrededor de nuestro componente de lista. Entonces estamos creando nuestros valores estatales loading y repos usando el useState() Reaccionar gancho.

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() Reaccionar gancho. En el useEffect() Enganche, estamos configurando nuestro estado de carga inicial en verdadero, mientras que esto es cierto, nuestro componente de orden superior mostrará un mensaje. Entonces estamos creando una variable constante llamada user y asignando la URL de la API obtendremos los datos de los repositorios.

Entonces estamos haciendo un básico fetch() solicitud como discutimos anteriormente y luego, una vez realizada la solicitud, configuramos el estado de carga de la aplicación en falso y completamos el estado de repos con los datos que obtuvimos de la solicitud.

return ( <div className='App'> <div className='container'> <h1>My 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 isLoading apoyo y repos apuntalar 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 withListLoading componente 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 aplicación.css archivar, copiar y pegar este código.

@import url('https://fonts.googleapis.com/css2?family=Amiri&display=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 Aplicación.js archivo y, por lo tanto, estamos utilizando 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, discutiremos Axios y cómo podemos usarlo para consumir la misma API en la misma aplicación.

Consumiendo APIs con Axios

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

Características de Axios

• Solicitud y respuesta de intercepción
• Manejo simplificado de errores
• Protección contra XSRF
• Soporte para subir progreso
• Tiempo de espera de respuesta
• La capacidad de cancelar solicitudes
• Soporte para navegadores antiguos
• Transformación automática de datos JSON

Hacer solicitudes con Axios

Hacer solicitudes HTTP con Axios es bastante fácil. El siguiente código es básicamente cómo hacer una solicitud HTTP.

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

El código anterior muestra las formas básicas en que podemos hacer 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 hacer una solicitud similar como el código de ejemplo anterior pero con los métodos abreviados podemos hacerlo así:

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

En el código anterior, estamos haciendo la misma solicitud que lo 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.

Hacer múltiples solicitudes con Axios

Axios proporciona a los desarrolladores la capacidad de realizar y gestionar solicitudes HTTP simultáneas utilizando el axios.all() método. Este método toma una matriz 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 hacer múltiples solicitudes a la API de GitHub usando el axios.all() método así:

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 matriz de argumentos en paralelo y devuelve los datos de respuesta, en nuestro caso, se registrará en la consola created_at objeto de cada una de las respuestas API.

Consumamos una API REST con Axios Client

En esta sección, todo lo que haremos será reemplazar fetch() 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 NPM:

npm install axios

Con hilo:

yarn add axios

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

import axios from 'axios'

Después de agregar la línea de código nuestro Aplicación.js todo lo que tenemos que hacer dentro de nuestro 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 búsqueda con el método abreviado de Axios axios.get para hacer una get solicitud a la API.

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

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

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.

Buscar contra Axios

En esta sección, enumeraré ciertas características y luego hablaré sobre qué tan bien Fetch y Axios son compatibles con estas características.

1. Sintaxis Básica
   Tanto Fetch como Axios tienen sintaxis muy simples para realizar solicitudes. Pero Axios tiene una ventaja porque Axios convierte automáticamente una respuesta a JSON, por lo que al usar Axios omitimos el paso de convertir la respuesta a JSON, a diferencia de Fetch () donde aún tendríamos que convertir la respuesta a JSON. Por último, los métodos abreviados de Axios nos permiten facilitar las solicitudes HTTP específicas.

2. Compatibilidad del navegador
   Una de las muchas razones por las cuales los desarrolladores preferirían Axios sobre 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+.

3. 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 timeout opción dentro del objeto de solicitud. Pero en Fetch, no es tan fácil hacer esto. Fetch proporciona una característica similar al usar el AbortController() interfaz pero lleva más tiempo implementarlo y puede ser confuso.

4. Interceptando 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 dan la capacidad de hacerlo sin tener que escribir código adicional.

5. Hacer múltiples solicitudes simultáneamente
   Axios nos permite realizar múltiples solicitudes HTTP con el uso de axios.all() método (hablé de esto anteriormente). fetch() proporciona la misma característica con el uso de promise.all() método, podemos hacer múltiples fetch() solicitudes dentro de él.

Conclusión

Axios y fetch() son excelentes formas de consumir API, pero te aconsejo que uses fetch() cuando cree aplicaciones relativamente pequeñas y utilice Axios cuando cree aplicaciones grandes por razones de escalabilidad. Espero que hayas disfrutado trabajando en este tutorial, siempre puedes leer más sobre Consumir API REST con Fetch o Axios en las referencias a continuación. Si tiene alguna pregunta, puede dejarla en la sección de comentarios a continuación y estaremos encantados de responder a cada una.

Recursos Relacionados

(ks, ra, il)

Fuente: https://www.smashingmagazine.com/2020/06/rest-api-react-fetch-axios/