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 propósito 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.

Mientras que hace tiempo las solicitudes HTTP se realizaban mediante XMLHttpRequest u objetos 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 limpia. Sin embargo, la API Fetch estuvo ausente durante mucho tiempo del lenguaje del lado del servidor Node.JS, dejando espacio para que otros paquetes personalizados se encargaran de esta función, 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 este es 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 soporte experimental para 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. Además, deberás utilizar el indicador –experimental-fetch al 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 propósito es permitirte cambiar entre las versiones de Node y npm. Para instalarlo y cambiar a la última versión, sigue estos pasos:

npm install -g n
n latest

El comando n latest instalará la última versión de Node.js. Para verificar 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 operaciones asíncronas. Puedes optar por esperar a la respuesta y luego continuar con tu código, o ejecutar tu 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 utilizando 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 característica experimental». Esto es normal, ya que se trata de una característica 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 su ejecución. Esto significa que cualquier código que se encuentre debajo de este comenzará a ejecutarse inmediatamente, sin esperar a que finalice la operación fetch. Por ejemplo, si añades un console.log(“Something”); debajo del código, al ejecutar el script el resultado será similar a este:

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 asignar esa respuesta al contenido del método response.text() (que devuelve el cuerpo de la respuesta). Sin embargo, el método response.text() también es asíncrono, por lo que debemos esperar a 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 mejor de 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 limpia para el código.

Envío de encabezados a la solicitud

Otra característica que necesitarás al enviar solicitudes es poder 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 esta 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 estás utilizando para la solicitud HTTP. Hay 5 métodos que puedes utilizar: GET, POST, PUT, PATCH y DELETE, pero de 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);

})();

Lo que quizá notes aquí es que 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 cubre todos los demás métodos de solicitud.

La gestión de errores al realizar solicitudes HTTP es imprescindible, ya que nunca se puede contar con que un servicio de terceros esté siempre disponible. Como buena práctica, siempre debes gestionar los errores, para evitar que tu aplicación o script se caiga junto con la URL a la que estás realizando la solicitud.

El manejo de errores en Node-Fetch se puede realizar rodeando el código con una sintaxis simple de try-catch. Aquí tienes 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 un catch a tu código de esta 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 diferentes servicios y extraer datos de una forma bastante elegante y sencilla. Existen algunos casos de uso que exploraremos en los siguientes párrafos.

Al programar, a menudo puede que necesites utilizar una API. La razón 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 4 puntos finales 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 necesitaría autenticación para evitar que fuentes no autorizadas la utilicen y modifiquen los datos en su beneficio. Las solicitudes HTTP cuentan con muchos métodos de autenticación. Uno de los más comunes 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 finales 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 obtener contenido de sitios web y analizarlo, de modo que solo se conserven los datos necesarios, que 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 HTML estático, una vez obtenido de la API Fetch, de la misma manera que se consultaría desde JavaScript o jQuery.

A continuación, se muestra 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 este es el título de la página (el texto que aparece en la parte superior de la ventana de tu navegador). Para desglosarlo, 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 se puede utilizar para crear un conjunto de datos de entrenamiento para un modelo de aprendizaje automático o para crear una herramienta de comparación de precios que extraiga datos de muchas fuentes y luego los compare.

Aunque el ejemplo anterior funciona bien, la API fetch puede que no sea siempre la mejor opción cuando se trata de extraer datos. Esto se debe a que los sitios web modernos de hoy en día muestran su contenido a través de JavaScript y utilizan captchas u otros métodos para evitar que se extraigan sus datos. La API fetch funciona como un simple CURL a la URL dada y recupera el contenido estático que muestra la página cuando se carga, sin ningún tipo de renderizado de JavaScript.

Para extraer datos y, al mismo tiempo, ejecutar el código JavaScript de la página, quizá te interese buscar alternativas como Puppeteer, tal y como se describe en este artículo sobre extracción avanzada. Sin embargo, si no quieres pasar por todo este lío, puedes utilizar WebScrapingAPI, una API creada especialmente para esta tarea, que se encarga de todos estos problemas (incluidas las detecciones antibot) y que ofrece una prueba gratuita con todas las funciones incluidas. 

En resumen, la buena noticia es que la tan esperada API Fetch por fin está disponible en Node.js, aunque por ahora se encuentra solo en su 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 sean más similares, 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 cambio del frontend al backend.