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

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á.

¿Quiere 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 usando CRUD (crear, leer, actualizar o eliminar) operaciones.

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

Si desea convertirse en un mejor desarrollador web, iniciar 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. Tratar con las solicitudes HTTP asincrónicas de JS
  2. ¿Qué es AJAX?
  3. ¿Por qué Fetch API?
  4. Una introducción rápida a Fetch API
  5. Obtener API - Ejemplos de 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 lidiar con solicitudes asincrónicas, lo que requiere y comprender cómo funcionan las promesas y las devoluciones de llamada.

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

Pero con JS, tenemos varias operaciones que se ejecutan en segundo plano / en 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 síncrono y de un solo subproceso con varios mecanismos de devolución de llamada. Lee mas.

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

2. ¿Qué es AJAX?

AJAX son las siglas de Asynchronous JavaScript and XML, y permite que las páginas web se actualicen de forma asincrónica mediante el intercambio de datos con un servidor web mientras la aplicación se está ejecutando. 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 mucho con tener todo en una aplicación de una sola página (SPA), ¡y esto genera muchos problemas asincrónicos! 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, la recarga de una página funciona bien en términos de cuán poderosos se han vuelto los navegadores. En el pasado, la recarga de una página demoraba unos segundos (según la ubicación del servidor y las capacidades del navegador). Pero los navegadores actuales 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 nos ocupamos de un presupuesto limitado y la falta de recursos, 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 un Promiseque debe resolverse para poder 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 MDN Mozilla. Y por último, pero no menos importante, funciona de inmediato 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! Soy consciente de otros enfoques HTTP, como el uso de Observable con RXJS, y cómo se enfoca en la administración / fuga 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 realizar solicitudes HTTP, ¿quién sabe?

De todos modos, en este artículo solo me estoy centrando en Fetch API, pero es posible que en el futuro escriba un artículo sobre Observable y RXJS.

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

El fetch()método devuelve un Promiseque resuelve el Responsede Requestpara mostrar el estado (exitoso o no). Si alguna vez recibe este mensaje promise {}en la pantalla de registro de su consola, no se asuste, básicamente significa que Promisefunciona, pero está esperando ser resuelto. Entonces, para resolverlo, necesitamos que el .then()controlador (devolución de llamada) acceda al contenido.

Entonces, en resumen, primero definimos la ruta ( Fetch ), en segundo lugar solicitamos datos del servidor ( Solicitud ), en tercer lugar definimos el tipo de contenido ( Cuerpo ) y, por último, pero no menos importante, accedemos a los datos ( Respuesta ).

Si tiene dificultades para comprender este concepto, no se preocupe. Obtendrá una mejor descripción general a través de los ejemplos que se muestran a continuación.

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

5. Obtener API: ejemplos de HTTP

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

Plantilla de API de recuperación básica:

¡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. Creando un nuevo usuario
  4. Eliminar un usuario
  5. Actualizar 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 .then()manejadores (callback), el primero para definir el objeto y el segundo para acceder a los datos.

Observe que con solo leer la cadena de consulta /users/2podemos comprender / predecir lo que hace la API. Para obtener más información sobre cómo escribir una API REST de alta calidad, consulte este consejo de pautas escrito 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. Creando un nuevo usuario

Este se ve un poco diferente al ejemplo anterior. Si no está familiarizado con el protocolo HTTP, simplemente nos proporciona un par de métodos tales como dulces POST, GET, DELETE, UPDATE, PATCHy PUT. Estos métodos son verbos que simplemente describen el tipo de acción que se 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 Initque podemos pasar junto con la URL para definir configuraciones personalizadas como tipo de método, cuerpo, credenciales, encabezados, etc.

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

Ejemplo

4. Eliminar un usuario

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

Ejemplo

5. Actualización de un usuario

El verbo HTTP PUTse 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 un conocimiento básico de cómo recuperar o manipular un recurso del servidor usando la API de recuperación de JavaScript, así como también cómo manejar las promesas. Puede utilizar este artículo como guía sobre cómo estructurar sus solicitudes de API para operaciones CRUD.

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

Todos los ejemplos se muestran en la solicitud de base prometida donde encadenamos la solicitud utilizando la .thendevolución de llamada. Este es un enfoque estándar con el que muchos desarrolladores están familiarizados, sin embargo, si desea utilizarlo, async/awaitconsulte este artículo. El concepto es el mismo, excepto que async/awaites 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 React
  • Una mente caótica conduce a un código caótico
  • Desarrolladores que constantemente quieren aprender cosas nuevas
  • Una guía práctica de los módulos ES6
  • Aprenda estos conceptos básicos de la Web
  • Mejore sus habilidades con estos importantes métodos de JavaScript
  • Programe más rápido creando comandos de bash personalizados

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

PD Si te gustó este artículo y quieres más como estos, aplaude ❤ y compártelo con amigos que puedan necesitarlo, es buen karma.