JavaScript Fetch API para principiantes: Explicado con ejemplos de código

Original article: JavaScript Fetch API For Beginners – Explained With Code Examples

Fetch API es una función de JavaScript que puede utilizar para enviar una solicitud a cualquier URL de API web y obtener una respuesta.

En este artículo, le mostraré cómo realizar solicitudes HTTP a API externas utilizando la API Fetch de JavaScript. Aprenderá a crear solicitudes GET, POST, PUT/PATCH y DELETE utilizando la API Fetch.

Para aprovechar al máximo este artículo, debe tener un buen conocimiento de las promesas de JavaScript. Puedes leer mi artículo Promesas en JavaScript si necesitas un repaso.

Cómo funciona la API Fetch
Cómo enviar una solicitud GET
Cómo enviar una solicitud POST
Cómo enviar una solicitud PUT
Cómo enviar una solicitud PATCH
Cómo enviar una solicitud DELETE
Cómo usar Async/Await con la API Fetch
Ejemplos de Código de Ejecución
Resumen

¡Comencemos!

¿Cómo trabaja la API Fetch?

Para enviar una petición similar a la de un formulario HTML, solo necesita pasar la URL donde desea enviar los datos como argumento a la función fetch():

fetch('<Tu URL>', {})

Sintaxis de una petición Fetch

La función fetch() acepta dos parámetros:

La URL a la que enviar la petición (este es un parámetro obligatorio).
Las opciones a configurar en la petición. Puede configurar el método de solicitud aquí (este es un parámetro opcional).

Debajo del capó, la función fetch() devuelve una Promesa, por lo que necesitas agregar los métodos .then() y .catch().

Cuando la petición devuelve una respuesta, se llamará al método then(). Si la solicitud devuelve un error, se ejecutará el método catch():

fetch('<Tu URL>', {})
  .then(respuesta => {
    // Manejamos la respuesta de la petición aqui
  })
  .catch(error => {
    // Si hay un error en la petición, lo manejamos aqui 
  })

Respuesta de una solicitud Fetch con los métodos then() y catch()

Dentro de los métodos .then() y .catch(), pasas una función de callback de llamada para ejecutarla cuando se llaman los métodos respectivos.

El método .catch() se puede omitir en Fetch API. Se usa solo cuando Fetch no puede realizar una solicitud a la API, como por ejemplo si no hay conexión de red o no se encuentra la URL.

¿Cómo mandar una petición GET usando Fetch API?

La petición GET es una solicitud HTTP que se utiliza para solicitar datos específicos de una API cuando así se necesita.

En el siguiente ejemplo, accederemos a una URL ficticia ubicada en https://jsonplaceholder.typicode.com para solicitar un usuario registrado en el sitio:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(respuesta => console.log(respuesta))
  .catch(error => console.log(error));

Mandamos una petición GET usando Fetch API

El código anterior dará la siguiente respuesta:

fetch-readable-stream — Respuesta de la petición HTTP

Aquí puede ver que la propiedad del cuerpo contiene un ReadableStream. Para usar ReadableStream en nuestra aplicación JavaScript, necesitamos convertirlo para llamar al método json():

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

Convertir la respuesta a JSON usando el método json()

El método json() convierte ReadableStream en un objeto JavaScript. La variable de datos anterior se imprimirá de la siguiente manera:

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

La petición regresa un objeto de JavaScript

Ahora que tiene el objeto de datos, puede utilizar este valor de la forma que desee. Por ejemplo, si desea mostrar el nombre de usuario y el correo electrónico en HTML, así es como lo hace:

<body>
  <h1 id='nombre-usuario'>Esperando por datos</h1>
  <h2 id='correo-usuario'>Esperando por datos</h1>
  <script>
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(respuesta => respuesta.json())
      .then(datos => {
        document.querySelector('#nombre-usuario').textContent = datos.name
        document.querySelector('#correo-usuario').textContent = datos.email
      })
  </script>
</body>

Mostrnado datos de la petición Fetch en HTML

En el código anterior, la API Fetch se ejecutará tan pronto como el navegador cargue el documento HTML.

Después de procesar la respuesta en un objeto de datos, JavaScript cambiará el texto de los elementos <h1> y <h2> anteriores para reflejar el nombre y el correo electrónico del usuario.

Si ejecuta el código anterior, obtendrá el siguiente resultado:

fetch-get-response — Salida de la petición Fetch en el navegador

Y así es como envía una solicitud GET usando Fetch y muestra los datos devueltos en HTML.

Tenga en cuenta que, según la petición que solicite, una API puede devolver un tipo diferente de datos.

En este ejemplo, la API typicode devuelve un objeto, pero también puede obtener una matriz cuando solicita más de una unidad de datos.

Si accede a la URL en https://jsonplaceholder.typicode.com/users, verá que la API responde con un arreglo de objetos.

Necesita conocer el tipo de datos devuelto por la API para manejarlo correctamente.

¿Cómo mandar peticiones POST usando Fetch API?

Si desea enviar una solicitud POST en lugar de una solicitud GET, debe definir el segundo argumento al llamar a la función, que es el objeto de configuración

Dentro del objeto de configuración, defina una propiedad method de la siguiente manera:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST', // Establecemos el método de la petición aqui
})
.then(respuesta => respuesta.json())
.then(datos => console.log(datos))

Configuramos la petición Fetch con el método POST

Cuando envía un método POST, debe configurar el encabezado de la solicitud y las propiedades del cuerpo para garantizar un proceso fluido.

Para el encabezado, debe agregar la propiedad Content-Type y configurarla en application/json.

Los datos que desea enviar deben colocarse dentro de la propiedad `body` en formato JSON. Vea el ejemplo a continuación:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    nombre: 'Nathan Sebhastian',
    correo: 'ns@mail.com'
  }),
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

Agregamos a la petición la cabecera y el cuerpo

En el ejemplo anterior, enviamos una solicitud POST para crear un nuevo usuario. En la propiedad del cuerpo, un objeto JavaScript normal se convirtió en una cadena JSON llamando al método JSON.stringify().

JSON es uno de los formatos que utilizan las computadoras para comunicarse entre sí en Internet.

La respuesta de la API de Typicode.com sería similar a la siguiente:

{
  "nombre": "Nathan Sebhastian",
  "correo": "ns@mail.com",
  "id": 11
}

Respuesta a la petición POST

Esto significa que creamos exitosamente un nuevo usuario. Dado que typicode.com es una API falsa, el usuario realmente no será agregado, pero simulará como si lo fuera.

¿Cómo mandar peticiones PUT?

Una solicitud PUT se utiliza para crear un nuevo recurso o actualizar uno existente.

Por ejemplo, si desea actualizar un nombre de usuario y datos de correo electrónico existentes. Puede utilizar una solicitud PUT para hacerlo:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    nombre: 'Nathan Sebhastian',
    correo: 'nathan@mail.com'
  }),
}).then(respuesta => resporespuestanse.json())
  .then(datos => console.log(datos))

Ejemplo de petición PUT usando Fetch API

La solicitud anterior recibirá la siguiente respuesta:

{
    "name": "Nathan Sebhastian",
    "email": "nathan@mail.com",
    "id": 1
}

Debido a que ya existen datos de usuario con un id de 1, la solicitud PUT anterior actualiza esos datos.

A continuación, veamos la solicitud PATCH.

¿Cómo mandar una petición PATCH?

La solicitud PATCH se envía cuando necesita actualizar una petición existente.

Por ejemplo, si desea cambiar el nombre y el usuario de un usuario existente.

A continuación se muestra un ejemplo de cómo enviar una solicitud PATCH a typicode.com:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ 
    nombre: 'Nathan Sebhastian',
    usaurio: 'nsebhastian'
  }),
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

Ejemplo de envio de una petición PATCH con Fetch API

La solicitud anterior recibirá la siguiente respuesta:

{
    "id": 1,
    "nombre": "Nathan Sebhastian",
    "usuario": "nsebhastian",
    "correo": "Sincere@april.biz",
    // ... the rest of user data
}

Arriba, puede ver que los valores de las propiedades de nombre yusuario se actualizan utilizando el cuerpo de la solicitud PATCH.

¿Cómo mandar una petición DELETE?

La solicitud DELETE se utiliza cuando desea solicitar que un recurso se elimine permanentemente del servidor.

Para ejecutar una solicitud DELETE con Fetch, solo necesita especificar la URL del recurso que desea eliminar y el method: 'DELETE' de la siguiente manera:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'DELETE',
}).then(respuesta => respuesta.json())
  .then(datos => console.log(datos))

Ejemplo de petición DELETE usando Fetch

La solicitud anterior eliminará los datos de un usuario que tenga un idde 1.

La API podría responder con algún mensaje para confirmar que el recurso se ha eliminado. Pero como typicode.com es una API ficticia, devolverá un objeto JavaScript vacío {}.

¿Cómo utilizar Async/Await con la API Fetch?

Dado que Fetch devuelve un objeto Promise, esto significa que también puede usar la sintaxis async/await para reemplazar los métodos .then() y .catch().

A continuación se muestra un ejemplo de envío de una solicitud GET usando Fetch en sintaxis async/await:

try {
  const respuesta = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const json = await respuesta.json();
  console.log(json);
} catch (error) {
  console.log(error);
}

Usamos async/await para manejar la respuesta Fetch

Manejar una respuesta Fetch usando async/await parece más limpio porque no es necesario usar las devoluciones de llamada .then() y .catch().

Si necesita un repaso sobre async/await, puede leer mi artículo JavaScript Async/Await.

Ejecutando el código de ejemplo

También creé un sitio web de ejemplo que le muestra cómo ejecutar estos 5 protocolos de solicitud HTTP en https://nathansebhastian.github.io/js-fetch-api/

Compruébelo y estudie el objeto de datos devuelto. Para saber qué peticiones puede enviar a una API específica, debe consultar la documentación de ese proyecto de API.

Resumen

Fetch API le permite acceder a las API y realizar una solicitud de red utilizando métodos de solicitud estándar como GET, POST, PUT, PATCH y DELETE.

La API Fetch devuelve una promesa, por lo que debe encadenar la llamada a la función con los métodos .then() y .catch(), o usar la sintaxis async/await.

¡Y así es como funciona la API Fetch! Si te ha gustado este artículo, quizás quieras consultar mi libro Beginning Modern JavaScript para mejorar tus habilidades en JavaScript:

El libro está diseñado para ser fácil para principiantes y accesible para cualquiera que quiera aprender JavaScript. Proporciona una guía sencilla paso a paso que le ayudará a comprender cómo utilizar JavaScript para crear una aplicación web dinámica.

Esta es mi promesa: realmente sentirás que entiendes lo que estás haciendo con JavaScript.

¡Nos vemos en otros artículos!