Aprende a utilizar Node-Fetch (NPM) para realizar solicitudes HTTP en Node.js

Antes de empezar a hablaros de la API de Node-Fetch, debo daros una breve explicación sobre qué es una solicitud HTTP. El objetivo de una solicitud HTTP es recuperar información de direcciones URL de todo Internet. Un ejemplo sencillo de solicitud HTTP es acceder a un sitio web.

Aunque hace tiempo las solicitudes HTTP se realizaban mediante objetos XMLHttpRequest o XHR, hoy en día todos los navegadores modernos admiten la API Fetch de JavaScript. Esto permite a los programadores realizar las solicitudes con una sintaxis mucho más sencilla y clara. Sin embargo, la API Fetch estuvo ausente durante mucho tiempo del lenguaje del lado del servidor Node.JS, lo que dejó espacio para que otros paquetes personalizados se encargaran de esta funcionalidad, como Axios, GOT y muchos otros.

Node-Fetch es el equivalente a la API Fetch de JavaScript, y ahora por fin también está disponible en Node.js.

En primer lugar, dado que se trata de un tutorial de Node.JS, necesitarás, por supuesto, tener Node.JS instalado. Si aún no lo tienes, puedes descargarlo e instalarlo desde este enlace.

Node.js ha lanzado la compatibilidad experimental con la API Fetch a partir de la versión 17.5. Por lo tanto, necesitarás tener al menos la versión 17.5 de Node.js. Además, deberás utilizar el –experimental-fal ejecutar tus scripts.

Si tienes una versión anterior de Node.JS, para pasar a la última versión puedes utilizar el paquete «n». «n» es un paquete de npmjs cuyo único objetivo es permitirte cambiar entre las versiones de Node y npm. Para instalarlo y pasar a la última versión, sigue estos pasos:

npm install -g n
n última versión

La ElEl comando «test» instalará la última versión de Node.js. Para comprobar tu versión de Node.js, simplemente ejecuta este comando:

node –version

Realizar una solicitud HTTP en cualquier lenguaje de programación es una operación asíncrona, ya que recibir la respuesta a la solicitud lleva tiempo. Existen dos enfoques a la hora de utilizar las operaciones asíncronas: puedes optar por esperar a recibir la respuesta y luego continuar con el código, o bien ejecutar el código en paralelo.

Node-Fetch admite llamadas a funciones tanto síncronas como asíncronas.

Para realizar una solicitud GET sencilla y extraer el cuerpo de la respuesta, puedes utilizar el siguiente fragmento de código:

fetch('https://www.webscrapingapi.com/')

    .then((response) => response.text())

    .then((body) => {

        console.log(body);

    });

Para ejecutar este código, debes guardarlo en un archivo llamado node-fetch-example.js y ejecutarlo desde la misma carpeta con este comando: node --experimental-fetch node-fetch-example.js. Ten en cuenta que, al ejecutarlo, aparecerá una advertencia que dice: «La API Fetch es una función experimental». Esto es normal, ya que se trata de una función experimental en el momento de escribir este artículo.

El fragmento de código anterior no espera a que finalice la solicitud antes de continuar con su ejecución. Esto significa que cualquier código que se encuentre a continuación comenzará a ejecutarse de inmediato, sin esperar a que finalice la operación de recuperación. Por ejemplo, si añades un console.log(“Something”); debajo del código, al ejecutar el script el resultado será el siguiente:

Para explicar con más detalle el código anterior, se puede observar que utilizamos la función «then» dos veces. El primer «then» se ejecutará cuando recibamos una respuesta de la solicitud HTTP, y lo que hace es asociar esa respuesta con el contenido de la método response.text() (que devuelve el cuerpo de la respuesta). Sin embargo, el response.text() también es asíncrono, por lo que debemos esperar su respuesta en el segundo «then», donde body es igual al resultado de la promesa de response.text().

También puedes llamar a la API Fetch utilizando «await», tal y como hacemos en el siguiente ejemplo:

(async () => {

    const response = await fetch('https://webscrapingapi.com');

    const body = await response.text();

    console.log(body);

})();

Esto ofrece una explicación aún más clara sobre cómo funciona la API Fetch y cuáles son las promesas que hay que esperar. Más adelante en este artículo utilizaremos la API Fetch con «await», ya que esto nos permite mantener una sintaxis más clara en el código.

Incluir encabezados en la solicitud

Otra función que necesitarás al enviar solicitudes es la posibilidad de configurar los encabezados de la solicitud que estés realizando. Para ello, puedes añadir los encabezados en el segundo parámetro de la API Fetch, de la siguiente manera:

(async () => {

    const response = await fetch('http://httpbin.org/headers', {

        headers: {

            'my-custom-header': 'my-header-value'

        }

    });

    const body = await response.text();

    console.log(body);

})();

Además de los encabezados, hay muchas más opciones que puedes enviar en el segundo parámetro de la API fetch. Para verlas todas, consulta la documentación de la API fetch (la que se utiliza en el lado del cliente).

Otra opción importante de la API Fetch es la opción «method». Esta especifica el método que se utiliza para la solicitud HTTP. Hay cinco métodos disponibles: GET, POST, PUT, PATCH y DELETE, pero de todos ellos, los dos primeros son los más utilizados (GET y POST). Por defecto, si no se especifica ningún método, Node-Fetch utilizará GET.

Para realizar una solicitud POST con Node-Fetch, puedes utilizar este fragmento de código:

(async () => {

    const response = await fetch('http://httpbin.org/post', {

        method: 'POST',

        body: JSON.stringify({

            'key': 'value'

        })

    });

    const body = await response.text();

    console.log(body);

})();

Quizá te hayas dado cuenta de que aquí utilizamos JSON.stringify para enviar el cuerpo de la solicitud. Esto se debe a que la API Fetch envía el cuerpo como una cadena en lugar de como un objeto, a diferencia de lo que hacen otros paquetes, como Axios.

La API Fetch también abarca todos los demás métodos de solicitud.

Es imprescindible gestionar los errores al realizar solicitudes HTTP, ya que nunca se puede dar por sentado que un servicio de terceros estará siempre disponible. Como buena práctica, siempre debes gestionar los errores para evitar que tu aplicación o script deje de funcionar al mismo tiempo que la URL a la que estás enviando la solicitud.

La gestión de errores en node-fetch se puede realizar rodeando el código con una sintaxis sencilla de «try-catch». A continuación se muestra un ejemplo de cómo hacerlo cuando se utiliza «await»:

(async () => {

    try {

        const response = await fetch('[INVALID_URL]');

        const responseBody = await response.text();

    } catch (error) {

        console.log(error.message);

    }

})();

Si prefieres utilizar `fetch` sin `await`, puedes añadir una instrucción `catch` a tu código de la siguiente manera:

fetch('[INVALID_URL]')

    .then((response) => response.text())

    .then((body) => {

        console.log(body);

    })

    .catch((error) => {

        console.log(error.message);

    });

Realizar solicitudes HTTP puede resultar útil de muchas maneras, ya que permite obtener nueva información de distintos servicios y extraer datos de una forma bastante elegante y sencilla. Hay algunos casos de uso que analizaremos en los siguientes párrafos.

Al programar, a menudo puede que tengas que utilizar una API. El motivo es que quizá necesites obtener datos específicos de una fuente de backend diferente y, a continuación, procesarlos o actualizarlos. Un buen ejemplo sería una API con cuatro puntos de conexión que te permita crear, leer, actualizar y eliminar usuarios (operaciones CRUD) en una base de datos de backend desde otro servidor.

A menudo, una API de este tipo requeriría autenticación para evitar que fuentes no autorizadas la utilicen y modifiquen los datos en su propio beneficio. Las solicitudes HTTP cuentan con numerosos métodos de autenticación. Uno de los más habituales es el uso de una clave API, en el que el proveedor de la API te proporciona una clave que solo tú debes conocer, y los puntos de conexión de la API solo funcionan cuando se envía la clave correcta.

Otro método mediante el cual se puede proteger una API es la autenticación básica. Esto significa que, para acceder a la API, tendrás que enviar un encabezado con una cadena codificada en base64 con el formato «nombre de usuario:contraseña». A continuación te mostramos un ejemplo de cómo puedes utilizar la autenticación básica en una solicitud POST:

(async () => {

    const response = await fetch('http://httpbin.org/post', {

        method: 'POST',

        headers: {

            "Authorization": `Basic ${btoa('login:password')}`

        },

        body: JSON.stringify({

            'key': 'value'

        })

    });

    const body = await response.text();

    console.log(body);

})();

El web scraping es una forma de extraer contenido de sitios web y analizarlo, de modo que solo se conserven los datos necesarios, que luego se pueden utilizar como se desee. Una buena biblioteca de npmjs que se puede utilizar para facilitar el análisis de los datos es cheerio. Esta biblioteca permite consultar código HTML estático, una vez obtenido mediante la API Fetch, del mismo modo que se consultaría desde JavaScript o jQuery.

A continuación te muestro un ejemplo de cómo obtener el título de una página utilizando la API Fetch y Cheerio:

const cheerio = require("cheerio");

(async () => {

    const response = await fetch('https://www.webscrapingapi.com/');

    const responseBody = await response.text();

    const $ = cheerio.load(responseBody);

    console.log($('title').first().text());

})();

El ejemplo anterior debería devolver «WebScrapingAPI | All-In-One Scraping API», ya que ese es el título de la página (el texto que aparece en la parte superior de la ventana del navegador). Para explicarlo con más detalle, utilizamos fetch para obtener el código fuente de la página HTML de https://www.webscrapingapi.com/ y utilizamos cheerio para analizar ese contenido. Para obtener más información sobre cheerio, puedes consultar su documentación aquí. 

Extraer información de otros sitios web puede resultar útil de muchas maneras. Por ejemplo, la información extraída puede utilizarse para crear un conjunto de datos de entrenamiento para un modelo de aprendizaje automático o para desarrollar una herramienta de comparación de precios que recopile datos de múltiples fuentes y los compare.

Aunque el ejemplo anterior funciona bien, es posible que la API Fetch no sea siempre la mejor opción a la hora de extraer datos. Esto se debe a que los sitios web actuales muestran su contenido mediante JavaScript y utilizan captchas u otros métodos para evitar que se extraigan sus datos. La API Fetch funciona como una simple llamada CURL a la URL indicada y recupera el contenido estático que muestra la página al cargarse, sin ningún tipo de renderización de JavaScript.

Para extraer datos y, al mismo tiempo, ejecutar el código JavaScript de la página, quizá te interese explorar alternativas como Puppeteer, tal y como se describe en este artículo sobre extracción avanzada de datos. Sin embargo, si no quieres complicarte tanto, puedes utilizar WebScrapingAPI, una API diseñada específicamente para esta tarea, que se encarga de resolver todos estos problemas (incluida la detección de bots) y que ofrece una prueba gratuita con todas las funciones incluidas. 

En resumen, la buena noticia es que la tan esperada API Fetch ya está disponible en Node.js, aunque por ahora se encuentra solo en fase experimental (en el momento de escribir este artículo). Aunque antes ya era posible realizar solicitudes en Node.js, la única forma de hacerlo era a través de los objetos XMLHttpRequest/XHR o de alguno de los muchos paquetes existentes, como Axios o GOT.

Este cambio hará que el JavaScript del lado del cliente y Node.js del lado del servidor se parezcan más, ya que esta función ya estaba disponible y era compatible con todos los navegadores modernos en el JavaScript del lado del cliente.

Realizar solicitudes HTTP puede resultar útil de muchas maneras, como al utilizar una API o extraer datos de un sitio web. Aunque los demás paquetes de npm seguirán siendo una opción y se seguirán utilizando en proyectos heredados, el uso de fetch es la mejor solución de cara al futuro. Esto mejorará la legibilidad del código de Node.js y facilitará aún más el paso del front-end al back-end.