La API Fetch representa la nueva forma oficialmente admitida de realizar solicitudes HTTP y recuperar recursos locales en Node.js. Esto significa que ya no necesitas dependencias de clientes HTTP externos en tu proyecto. Todo lo que tienes que hacer es aprender a usar la API Node Fetch, que es de lo que trata esta guía.
Aquí verás:
- Qué es la API Fetch
- Primeros pasos con la API Node Fetch
- Realizar solicitudes HTTP en Node.js con la API Fetch
- Opciones y funciones adicionales
¡Vamos allá!
¿Qué es la API Fetch?
La API Fetch es una interfaz de JavaScript para obtener recursos localmente o a través de una red. En detalle, proporciona una función global fetch () que facilita la ejecución de solicitudes HTTP asincrónicas. El mismo método también se puede utilizar para recuperar archivos locales. La API Fetch de JavaScript es un sustituto flexible de la antigua API XMLHttpRequest.
El método fetch () se basa en los objetos Request y Response. Solo requiere un argumento obligatorio, la ruta local o la URL del recurso que desea obtener. Además, también acepta algunas funciones opcionales, como CORS, el encabezado HTTP y la configuración de almacenamiento en caché. Como método asincrónico, fetch () devuelve una Promise que resuelve la respuesta producida por el servidor. Esto se representa mediante un objeto Response, que expone varios métodos para acceder a su cuerpo de contenido y analizarlo.
Este es el aspecto de una llamada básica a la API Fetch:
fetch("https://httpbin.io/ip", {
// optional configs...
}).then((response) => {
// print the JSON response body
console.log(response.json()) // { "origin": "<YOUR_IP_ADDRESS>" }
})
Or if you prefer the equivalent async/await syntax, you can write:
const response = await fetch("https://httpbin.io/ip", {
// optional configs...
})
// print the JSON response body
console.log(await response.json()) // { "origin": "<YOUR_IP_ADDRESS>" }
Primeros pasos con la API Node Fetch
La API Fetch ha sido compatible con los principales navegadores durante años. Sin embargo, solo forma parte de la biblioteca estándar de Node.js desde la versión 18.0.0, publicada en abril de 2022. En concreto, la API Node Fetch se basa en la implementación de undici.
Antes de Node.js 18, podías usar fetch () habilitándolo como una función experimental o gracias a la biblioteca npm node-fetch, otra implementación popular de la API Fetch. Como fetch () ahora forma parte de la biblioteca estándar oficial de Node.js, puedes usarlo directamente en tu código sin importarlo. Todo lo que tienes que hacer es llamar al método fetch () con la siguiente sintaxis:
fetch(url, options)
url es un campo obligatorio y puede contener
- La ruta a un recurso local (p. ej., movies.json)
- La URL de un punto final o recurso remoto (p. ej., https://httpbin.io/ip o https://example.com/movies.json)
En cambio, options es un objeto opcional que acepta los siguientes campos opcionales:
- method: el método HTTP de la solicitud, como por ejemplo “GET”, “POST”, “PUT”, “PATCH”, and “DELETE”. El valor predeterminado es «GET».
- headers: un Headers o un objeto literal que contenga las cabeceras HTTP a añadir a tu solicitud. De forma predeterminada, no hay ningún encabezado establecido.
- body: el objeto que contiene los datos que se van a usar como cuerpo de la solicitud. Tenga en cuenta que las solicitudes GET y HEAD no pueden tener un cuerpo.
- mode: el modo a utilizar para la solicitud (p. ej., «cors», «no-cors», «same-origin», «navigate» o «websocket»).« De forma predeterminada, se establece en cors.
- credentials: para especificar si el navegador debe enviar las credenciales o no. Debe ser una de las siguientes cadenas: «omit», «same-origin» o «include».
- redirect: para determinar cómo gestionar una respuesta de redirección HTTP. Puede ser «follow», «error» o «manual». De forma predeterminada, está configurado como «follow».
- referrer: una cadena que contiene la referencia de la solicitud. De forma predeterminada, es una cadena vacía.
- referrerPolicy: especifica la política de referencia a utilizar para la solicitud.
- signal: una instancia del objeto AbortSignal que te permite abortar la solicitud a través de la interfaz AbortController.
- priority: una cadena que especifica la prioridad de la solicitud de recuperación actual en relación con otras solicitudes del mismo tipo. Acepta «high», «low» o «auto». De forma predeterminada, es «auto».
Consulta la sección de parámetros de fetch() de la documentación oficial para obtener más información.
Este es un ejemplo de una solicitud Fetch de Node.js con un objeto options:
const response = await fetch("https://your-domain.com/api/v1/users", {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: "jane-doe",
email: "[email protected]"
role: "superuser",
age: 23,
birthplace: "New York",
}),
})
Ten en cuenta que los datos del cuerpo deben coincidir con el encabezado Content-Type.
Realizar solicitudes HTTP en Node.js con la API Fetch
Veamos ahora la API Node Fetch en acción en ejemplos de solicitudes reales para los métodos HTTP más populares.
GET
Así es como puedes realizar una solicitud GET con la API Fetch:
const response = await fetch("https://your-domain.com/your-endpoint")Como puedes ver, solo se necesita una línea de código. Esto se debe a que fetch () realiza solicitudes GET de forma predeterminada.
Luego, puedes acceder al contenido de la respuesta con uno de los siguientes métodos:
- response.text (): devuelve una Promise que se resuelve con el cuerpo de la respuesta en forma de texto.
- response.json (): devuelve una Promise que se resuelve con un objeto analizado a partir de la respuesta de JSON.
- response.blob (): devuelve una Promise que se resuelve con el cuerpo de la respuesta como un objeto Blob.
- response.arrayBuffer (): devuelve una Promise que se resuelve con el cuerpo de la respuesta como una instancia de ArrayBuffer.
- response.formData (): devuelve una Promise que se resuelve con el cuerpo de la respuesta como un objeto FormData.
Entonces, el código de un ejemplo completo sería:
const response = await fetch("https://httpbin.io/ip")
const jsonResponseContent = await response.json() // { "origin": "<YOUR_IP_ADDRESS>" }
const origin = jsonResponseContent.origin // <YOUR_IP_ADDRESS>Si la respuesta devuelta por el servidor no está en formato JSON, la instrucción response.json () fallará con un error de sintaxis.
POST
Realizar una solicitud POST con una llamada a la API Node Fetch solo requiere unas pocas líneas:
const formData = new FormData()
formData.append("username", "serena-smith")
formData.append("email", "[email protected]")
const response = await fetch("https://example.com/api/v1/users", {
method: "POST",
body: formData,
})La clave para enviar una solicitud POST con fetch () es especificar los datos que se enviarán al servidor en la opción body. Puede estar en varios formatos, como JSON, FormData y texto. Al enviar un objeto FormData, no es necesario especificar un encabezado Content-Type. En caso contrario, es obligatorio.
PUT
Realizar una solicitud PUT con la API Fetch es como hacer un POST:
const response = await fetch("https://example.com/api/v1/users", {
method: "PUT",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: "john-doe",
email: "[email protected]"
role: "regular-user",
age: 47,
birthplace: "Chicago",
}),
})
La única diferencia es que debes especificar «PUT» como configuración del método. Del mismo modo, puede enviar una solicitud PATCH configurándola en «PATCH».
ELIMINAR
Este es un ejemplo de una solicitud HTTP DELETE con fetch ():
const response = await fetch("https://example.com/api/v1/users/45", {
method: "DELETE",
})Una vez más, todo se reduce a configurar el método HTTP correcto. La implementación de la API Fetch se encargará del resto.
Opciones y funciones adicionales
Ahora que sabes cómo usar fetch () en situaciones comunes, estás listo para explorar las opciones avanzadas de la API Node Fetch.
Configuración de encabezados
fetch () te permite personalizar los encabezados HTTP de tu solicitud a través del campo headers del objeto options. En particular, los encabezados aceptan un objeto Headers o un literal de objeto con valores de cadena específicos.
Supongamos que quieres establecer el encabezado Content-Type y User-Agent en tu solicitud fetch (). Puedes usar un objeto Headers como se muestra a continuación:
const customHeaders = new Headers()
customHeaders.append("Content-Type", "application/json")
customHeaders.append("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36")
const response = fetch("https://your-domain.com/your-endpoint", {
headers: customHeaders,
// other options...
})De lo contrario, podrías configurarlos de manera equivalente con un objeto literal:
const response = fetch("https://your-domain.com/your-endpoint", {
headers: {
"Content-Type": "application/json",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36",
},
// other options...
})Esta sintaxis es más compacta y fácil de leer.
Lectura de encabezados
Si quieres leer los encabezados HTTP establecidos por el servidor en la respuesta, puedes acceder a ellos de la siguiente manera:
const response = await fetch("https://your-domain.com/your-endpoint", {
// optional configs...
})
// accessing the "Content-Type" response header
const responseHeaders = response.headers
const responseContentType = response.headers.get("Content-Type")El campo response.headers devuelve un objeto Headers, desde el que puede acceder a encabezados específicos con el método get () .
Gestión de errores de la API Node Fetch
Una llamada a la API Fetch de Node.js solo puede fallar por dos motivos:
- Una excepción AbortError: cuando un AbortController abortó intencionadamente la solicitud.
- Una excepción TypeError: esto puede deberse a varios motivos, como un nombre de encabezado no válido, una URL no válida o un error de red genérico. Descubre más causas en los documentos.
Lo que es esencial entender es que cualquier respuesta de 4xx o 5xx se considera una solicitud exitosa para la API Fetch. En otras palabras, una respuesta de error producida por el servidor no provocará ningún error de JavaScript. La razón de este comportamiento es que fetch () hizo la solicitud y el servidor respondió con una respuesta. Conceptualmente, eso no puede considerarse un error desde el punto de vista de la red. Al final, la solicitud concluyó con éxito.
Esto significa que, antes de procesar los datos devueltos por el servidor, siempre debes comprobar si la respuesta es correcta. Para ello, puedes implementar la siguiente lógica de gestión de errores:
try {
const response = await fetch("https://your-domain.com/your-endpoint", {
// optional configs...
})
if (response.ok) {
// use the data returned by the server...
// e.g.,
// await response.json()
} else {
// handle 4xx and 5xx errors...
}
} catch (error) {
// handle network or abort errors...
}
Tenga en cuenta que la propiedad ok de Response solo contiene true cuando la solicitud se realizó correctamente.
Anular una solicitud fetch
La API Fetch admite la anulación de solicitudes ya iniciadas a través de la API AbortController.
Para detener una solicitud fetch () en curso, primero debes generar un objeto de señal como se muestra a continuación:
const controller = new AbortController()
const signal = controller.signal
Then, specify it in the options object of your request:
const response = await fetch("https://your-domain.com/your-endpoint", {
signal: signal,
// other configs...
})Ahora, cada vez que llames a la siguiente instrucción, tu solicitud será interrumpida por un AbortError:
controller.abort()Ten en cuenta que el servidor puede haber recibido ya la solicitud. En este caso, el servidor seguirá ejecutando la solicitud, pero Node.js ignorará la respuesta.
¡Enhorabuena! ¡Ahora eres un maestro de la API Fetch de Node.js!
Conclusión
En este artículo, has aprendido qué es la API Fetch y cómo usarla en Node.js. Más en detalle, has comenzado con lo básico de fetch () y luego has profunzidado en sus opciones y funciones avanzadas. Con un cliente HTTP tan potente, la recuperación de datos en línea es fácil. Por ejemplo, puedes usarla para llamar a nuestros puntos finales de la API SERP y empezar a extraer datos de SERP.
Bright Data es la plataforma de datos web más grande del mundo que presta servicio a más de 20 000 empresas de todo el mundo. Habla con uno de nuestros expertos en datos para encontrar el producto adecuado para ti y tus necesidades de raspado web.
