Una guía práctica de ES6 sobre cómo realizar solicitudes HTTP utilizando la API Fetch

Imagen creada por Jad Joubran

En esta guía, le mostraré cómo usar la API Fetch (ES6 +) para realizar solicitudes HTTP a una API REST con algunos ejemplos prácticos que probablemente encontrará.

¿Quieres ver rápidamente los ejemplos de HTTP? Vaya a la sección 5. La primera parte describe la parte asincrónica de JavaScript cuando se trabaja con solicitudes HTTP.

Nota: Todos los ejemplos están escritos en ES6 con funciones de flecha.

Un patrón común en las aplicaciones web / móviles actuales es solicitar o mostrar algún tipo de datos del servidor (como usuarios, publicaciones, comentarios, suscripciones, pagos, etc.) y luego manipularlos utilizando CRUD (crear, leer, actualizar o eliminar) operaciones.

Para manipular aún más un recurso, a menudo utilizamos estos métodos JS (recomendados) como .map (), .filter () y .reduce ().

Si desea convertirse en un mejor desarrollador web, comenzar su propio negocio, enseñar a otros o mejorar sus habilidades de desarrollo, publicaré consejos y trucos semanales sobre los últimos lenguajes de desarrollo web.

Esto es lo que abordaremos

  1. Manejo de las solicitudes HTTP asincrónicas de JS
  2. ¿Qué es el AJAX?
  3. ¿Por qué buscar API?
  4. Una introducción rápida a Fetch API
  5. Fetch API: ejemplos CRUD ← ¡lo bueno!

1. Manejo de las solicitudes HTTP asincrónicas de JS

Una de las partes más desafiantes para comprender cómo funciona JavaScript (JS) es comprender cómo manejar las solicitudes asincrónicas, lo que requiere y comprender cómo funcionan las promesas y las devoluciones de llamadas.

En la mayoría de los lenguajes de programación, estamos conectados para pensar que las operaciones suceden en orden (secuencialmente). La primera línea debe ejecutarse antes de que podamos pasar a la siguiente línea. Tiene sentido porque así es como los humanos operamos y completamos las tareas diarias.

Pero con JS, tenemos múltiples operaciones que se ejecutan en segundo plano / primer plano, y no podemos tener una aplicación web que se congele cada vez que espera un evento de usuario.

Describir JavaScript como asíncrono es quizás engañoso. Es más exacto decir que JavaScript es sincrónico y de subproceso único con varios mecanismos de devolución de llamada. Lee mas.

Sin embargo, a veces las cosas deben suceder en orden, de lo contrario causará caos y resultados inesperados. Por esa razón, podemos usar promesas y devoluciones de llamadas para estructurarlo. Un ejemplo podría ser validar las credenciales de usuario antes de continuar con la siguiente operación.

2. ¿Qué es AJAX?

AJAX significa JavaScript asíncrono y XML, y permite que las páginas web se actualicen de forma asíncrona mediante el intercambio de datos con un servidor web mientras se ejecuta la aplicación. En resumen, esencialmente significa que puede actualizar partes de una página web sin volver a cargar toda la página (la URL permanece igual).

AJAX es un nombre engañoso. Las aplicaciones AJAX pueden usar XML para transportar datos, pero es igualmente común transportar datos como texto sin formato o texto JSON.
 - w3shools.com

AJAX todo el camino?

¡He visto que muchos desarrolladores tienden a entusiasmarse realmente por tener todo en una aplicación de página única (SPA), y esto genera mucho dolor asincrónico! Pero afortunadamente, tenemos bibliotecas como Angular, VueJS y React que hacen que este proceso sea mucho más fácil y práctico.

En general, es importante tener un equilibrio entre lo que debería recargar toda la página o partes de la página.

Y en la mayoría de los casos, una recarga de página funciona bien en términos de cuán poderosos se han vuelto los navegadores. En el pasado, una recarga de la página llevaría segundos (dependiendo de la ubicación del servidor y las capacidades del navegador). Pero los navegadores de hoy son extremadamente rápidos, por lo que decidir si realizar AJAX o recargar la página no es una gran diferencia.

Mi experiencia personal es que es mucho más fácil y rápido crear un motor de búsqueda con un simple botón de búsqueda que hacerlo sin un botón. Y en la mayoría de los casos, al cliente no le importa si es un SPA o una recarga de página adicional. Por supuesto, no me malinterpreten, me encantan los SPA, pero debemos considerar un par de compensaciones, si tratamos con un presupuesto limitado y falta de recursos, entonces tal vez una solución rápida sea un mejor enfoque.

Al final, realmente depende del caso de uso, pero personalmente creo que los SPA requieren más tiempo de desarrollo y un poco de dolor de cabeza que una simple recarga de página.

3. ¿Por qué Fetch API?

Esto nos permite realizar solicitudes HTTP declarativas a un servidor. Para cada solicitud, crea una Promesa que debe resolverse para definir el tipo de contenido y acceder a los datos.

Ahora el beneficio de Fetch API es que es totalmente compatible con el ecosistema JS, y también es parte de los documentos de MDN Mozilla. Y por último, pero no menos importante, funciona de forma predeterminada en la mayoría de los navegadores (excepto IE). A largo plazo, supongo que se convertirá en la forma estándar de llamar a las API web.

¡Nota! Conozco otros enfoques HTTP, como el uso de Observable con RXJS, y cómo se enfoca en la gestión / pérdida de memoria en términos de suscripción / cancelación de suscripción, etc. Y tal vez esa se convierta en la nueva forma estándar de hacer solicitudes HTTP, ¿quién sabe?
De todos modos, en este artículo solo me estoy centrando en Fetch API, pero en el futuro podría escribir un artículo sobre Observable y RXJS.

4. Una introducción rápida a Fetch API

El método fetch () devuelve una Promesa que resuelve la Respuesta de la Solicitud para mostrar el estado (exitoso o no). Si alguna vez recibe este mensaje de promesa {} en la pantalla de registro de la consola, no se preocupe, básicamente significa que la promesa funciona, pero está esperando ser resuelta. Entonces, para resolverlo, necesitamos el controlador .then () (devolución de llamada) para acceder al contenido.

En resumen, primero definimos la ruta (Fetch), en segundo lugar solicitamos datos del servidor (Request), en tercer lugar definimos el tipo de contenido (Body) y, por último, accedemos a los datos (Response).

Si te cuesta entender este concepto, no te preocupes. Obtendrá una mejor visión general a través de los ejemplos que se muestran a continuación.

La ruta que usaremos para nuestros ejemplos
https://jsonplaceholder.typicode.com/users // devuelve JSON

5. Fetch API - Ejemplos HTTP

Si queremos acceder a los datos, necesitamos dos controladores .then () (devolución de llamada). Pero si queremos manipular el recurso, solo necesitamos un controlador .then (). Sin embargo, podemos usar el segundo para asegurarnos de que se haya enviado el valor.

Plantilla básica de API de recuperación:

¡Nota! El ejemplo anterior es solo para fines ilustrativos. El código no funcionará si lo ejecuta.

Obtener ejemplos de API

  1. Mostrando un usuario
  2. Mostrando una lista de usuarios
  3. Crear un nuevo usuario
  4. Eliminar un usuario
  5. Actualización de un usuario
¡Nota! El recurso no se creará realmente en el servidor, pero devolverá un resultado falso para imitar un servidor real.

1. Mostrando un usuario

Como se mencionó anteriormente, el proceso de mostrar un solo usuario consta de dos manejadores .then () (devolución de llamada), el primero para definir el objeto y el segundo para acceder a los datos.

Observe que con solo leer la cadena de consulta / users / 2 podemos entender / predecir lo que hace la API. Para obtener más información sobre cómo escribir API REST de alta calidad, consulte estas sugerencias sobre pautas escritas por Mahesh Haldar.

Ejemplo

2. Mostrando una lista de usuarios

El ejemplo es casi idéntico al ejemplo anterior, excepto que la cadena de consulta es / users y no / users / 2.

Ejemplo

3. Crear un nuevo usuario

Este se ve un poco diferente del ejemplo anterior. Si no está familiarizado con el protocolo HTTP, simplemente nos proporciona un par de buenos métodos como POST, GET, DELETE, UPDATE, PATCH y PUT. Estos métodos son verbos que simplemente describen el tipo de acción a ejecutar, y se utilizan principalmente para manipular los recursos / datos en el servidor.

De todos modos, para crear un nuevo usuario con Fetch API, necesitaremos usar el verbo HTTP POST. Pero primero, necesitamos definirlo en alguna parte. Afortunadamente, hay un argumento opcional Init que podemos pasar junto con la URL para definir configuraciones personalizadas como el tipo de método, cuerpo, credenciales, encabezados, etc.

Nota: Los parámetros del método fetch () son idénticos a los del constructor Request ().

Ejemplo

4. Eliminar un usuario

Para eliminar al usuario, primero debemos apuntar al usuario con / users / 1, y luego definimos el tipo de método que es DELETE.

Ejemplo

5. Actualización de un usuario

El verbo HTTP PUT se usa para manipular el recurso de destino, y si desea hacer cambios parciales, deberá usar PATCH. Para obtener más información sobre lo que hacen estos verbos HTTP, consulte esto.

Ejemplo

Conclusión

Ahora tiene una comprensión básica de cómo recuperar o manipular un recurso desde el servidor utilizando la API Fetch de JavaScript, así como cómo lidiar con las promesas. Puede usar este artículo como guía sobre cómo estructurar sus solicitudes de API para operaciones CRUD.

Personalmente, creo que la API Fetch es declarativa y puede comprender fácilmente lo que está sucediendo sin ninguna experiencia técnica de codificación.

Todos los ejemplos se muestran en la solicitud de base prometida donde encadenamos la solicitud usando .then devolución de llamada. Este es un enfoque estándar con el que muchos desarrolladores están familiarizados, sin embargo, si desea usar async / wait, consulte este artículo. El concepto es el mismo, excepto que async / await es más fácil de leer y escribir.

Aquí hay algunos artículos que he escrito sobre el ecosistema web junto con consejos y trucos de programación personal.

  • Una comparación entre angular y reaccionar
  • Una mente caótica conduce a un código caótico.
  • Desarrolladores que constantemente quieren aprender cosas nuevas.
  • Una guía práctica para los módulos ES6.
  • Aprenda estos conceptos web básicos
  • Mejora tus habilidades con estos importantes métodos de JavaScript
  • Programe más rápido creando comandos bash personalizados

Puedes encontrarme en Medium donde publico semanalmente. O puede seguirme en Twitter, donde publico consejos y trucos relevantes para el desarrollo web junto con historias personales.

PD Si disfrutaste este artículo y quieres más como estos, aplaude ❤ y compártelo con amigos que lo necesiten, es buen karma.