Realización de solicitudes HTTP: Fetch Vs Axios

En JavaScript, Fetch API y Axios se utilizan ampliamente para implementar solicitudes HTTP. Sin embargo, elegir uno no es fácil, ya que ambos tienen características únicas.

En este artículo, discutiré los aspectos más destacados de Fetch API y Axios para ver la mejor opción para las solicitudes HTTP.

1. Diferencias de sintaxis

Tanto Axios como Fetch API devuelven promesas cuando realiza una solicitud HTTP. Aunque existen algunas diferencias en la sintaxis.

El siguiente código muestra cómo podemos enviar una POSTsolicitud simple con Axios.

Con Axios, podemos crear un objeto de configuración utilizando parámetros específicos como baseUrl, params, headers, auth, responseType enviar con la solicitud. Devolverá una Promesa que se resuelve con un objeto de respuesta o un objeto de error. Además, lo siguiente se puede encontrar en el objeto devuelto por la Promesa.

• datos: - el cuerpo de respuesta real
• estado: - estado HTTP de la llamada, como 200 o 404
• statusText: estado HTTP devuelto como un mensaje de texto
• encabezados: el servidor devuelve los encabezados
• config: - solicitar configuración
• solicitud: - objeto XMLHttpRequest

Si intentamos lo mismo POSTcon Fetch API, se verá así:

El argumento url(ruta al recurso que desea obtener) es obligatorio en el método fetch(). Similar a Axios, devuelve una Promesa que el objeto de respuesta puede resolver. Opcionalmente, podemos pasar opciones en el segundo argumento del fetch()método.

Diferencias clave:

• Con Axios, los datos se envían a través de la propiedad data de las opciones, pero la API Fetch usa la propiedad body.
• Obtener respuesta requiere una validación adicional, ya que siempre devuelve un objeto de respuesta, independientemente de si tiene éxito o no.
• Los datos de fetch()se han serializado en una cadena (en cadena).
• La URL se proporciona fetch()como argumento. Pero, en Axios, se establece en el objeto de opciones.

2. Conversión de datos JSON

Con Fetch API, el manejo de datos JSON es un proceso de 2 pasos. Primero, debe realizar la solicitud y luego llamar a la .json()función en la respuesta, ya que Fetch API envía datos con la propiedad body.

Con Axios, los datos se envían a través de la propiedad data de las opciones y automáticamente en la cadena de los datos en la respuesta. Por lo tanto, no tenemos que hacer mucho allí, ya que Axios inevitablemente convierte los datos JSON después de que se resuelve la solicitud.

3. Manejo de errores

El manejo de errores con Axios es fácil porque las respuestas incorrectas (como 404 o 500) terminarán haciendo que la Promesa sea rechazada al lanzar una excepción. Por lo tanto, para manejar errores 404 o 400 con Axios, debe usar el bloque catch() como se muestra a continuación.

Al usar fetch(), debe leer el objeto de respuesta, ya que las respuestas incorrectas aún se resuelven con el método then(). Una promesa de Fetch API se rechazará solo si la solicitud no se puede completar en un escenario como una falla de red.

4. Solicitudes simultáneas

Tanto Axios como Fetch API pueden manejar múltiples solicitudes en paralelo. Axios usa el método axios.all() que permite pasar una variedad de solicitudes. Luego asigne las propiedades de la matriz de respuesta a distintas variables usando axios.spread()como se muestra aquí.

Con Fetch API, puede utilizar el método Promise.all() integrado para lograr lo mismo pasando todas las solicitudes de recuperación Promise.all()como una matriz. A continuación, puede usar una funciónasync para manejar la respuesta de la siguiente manera.

5. Tiempo de espera de respuesta

Si realiza una solicitud sin definir un tiempo de espera, la solicitud se bloqueará y ralentizará la aplicación. Por lo tanto, debemos establecer un tiempo de espera de respuesta para las solicitudes HTTP.

En Axios, puede establecer el tiempo de respuesta en milisegundos como un parámetro opcional en el objeto de configuración.

Pero en Fetch API, no es tan simple como en Axios.

En el ejemplo anterior, puede ver esa fetch()funcionalidad de tiempo de espera de respuesta a través de la interfaz AbortController. Además, la propiedad signal de solo lectura de AbortController permite interactuar con una solicitud o cancelarla.

Si el servidor no responde dentro del tiempo especificado (3 segundos), el metodo controller.abort()se invoca y se cancela la solicitud.

Axios establece el tiempo de espera en 0 de forma predeterminada. Por lo tanto, recuerde siempre especificar un tiempo de espera para cada solicitud. También puede utilizar un interceptor de solicitudes para establecer el tiempo de espera de la solicitud automáticamente.

6. Interceptar solicitudes y respuestas

En las aplicaciones web, hay situaciones en las que necesitamos interceptar solicitudes HTTP. Por ejemplo, es posible que necesitemos agregar un token personalizado a una solicitud HTTP.

El uso de Axios puede resultar útil en tales situaciones, ya que viene con una función incorporada llamada interceptor HTTP. Elimina la necesidad de codificar para cada solicitud por separado y puede usarlo fácilmente de la siguiente manera:

Fetch API no ofrece una forma de interceptar solicitudes de forma predeterminada.

Pero, como solución alternativa, puede implementar su propio interceptor anulando el fetch()método global :

7. Solicite el progreso de la carga/descarga

Si su solicitud HTTP tarda mucho en completarse, el uso de un indicador de progreso seguramente ayudará a mejorar la experiencia del usuario.

Si usa Axios, puede usar fácilmente el módulo Axios Progress Bar para implementar un buen indicador de progreso.

Primero, agregue las siguientes etiquetas de estilo y script a su componente.

Luego, puede implementar la barra de progreso como se muestra a continuación. Eso es todo.

Pero Fetch API no tiene soporte incorporado para barras de progreso.

En cambio, ofrece una instancia ReadableStream que proporciona datos response.body en fragmentos. Proporciona comentarios instantáneos a los usuarios durante una descarga o una carga, y puede usar esa transmisión para realizar un seguimiento del progreso.

Conclusión

Se evaluó dos enfoques para realizar solicitudes HTTP, Axios y Fetch API.

Esta comparación demuestra que Axios mantiene el código mínimo para aplicaciones que requieren un manejo eficiente de errores o intercepciones HTTP. es compatible con casi todos los navegadores modernos y entornos NodeJS.

Por otro lado, Fetch API tampoco está lejos como método nativo compatible con todos los navegadores principales (no es compatible con IE).

Sin embargo, no podemos ceñirnos a un solo aspecto a la hora de elegir la mejor opción. En su lugar, debe evaluar todas estas características y decidir qué es lo mejor para su proyecto en función de sus requisitos.