La API de recuperación es una interfaz de JavaScript moderna que simplifica las solicitudes HTTP con su sintaxis basada en promesas que hace que el código sea más limpio y fácil de usar. Con la API de recuperación, puedes solicitar datos al servidor sin tener que volver a cargar toda la página, lo que hace que tu aplicación sea más rápida e interactiva. Puedes enviar fácilmente solicitudes GET, POST, PUT o DELETE para interactuar con varias API. La API de recuperación también facilita el manejo de diferentes tipos de datos y métodos HTTP. La personalización de los encabezados de las solicitudes y la administración de los diferentes tipos de contenido se vuelven simples, lo que le permite trabajar sin problemas con diversos servicios.
En este artículo, aprenderás a usar la API de recuperación, sus beneficios para las aplicaciones web y el uso de proxis para garantizar un manejo de datos seguro y eficiente. Revisa esta lista de los mejores proveedores de proxy para ver por qué Bright Data es la mejor opción.
Descripción de la API de recuperación
La API de recuperación se usa para realizar solicitudes HTTP asincrónicas enviando una solicitud al servidor y devolviendo una promesa que se resuelve con los datos de respuesta una vez disponibles. En el desarrollo de JavaScript, el uso de la API de recuperación permite la interacción dinámica con los servidores a través de solicitudes HTTP (por ejemplo, GET, POST, PUT) al permitir que las aplicaciones se comuniquen con el servidor sin necesidad de volver a cargar la página. Las siguientes son algunas de las ventajas de la API de recuperación:
- Sintaxis simplificada con promesas: La API de recuperación elimina la complejidad de XMLHttpRequest mediante promesas, lo que le permite escribir código más limpio y legible.
- Se admiten varios formatos de datos: puedes usar los formatos JSON, texto y blob, lo que facilita el análisis y el trabajo con diferentes tipos de respuestas.
- Se proporcionan objetos de flujo y respuesta: puedes examinar y modificar las respuestas con flujos legibles y ajustar su enfoque de recuperación de datos para que se adapte a tu aplicación.
- Mejor gestión de errores: API de recuperación no arroja ningún error para los códigos de estado de error HTTP de forma predeterminada, pero sí permite realizar comprobaciones de respuesta más explícitas.
- Devoluciones de llamada menos complicadas: no tienes que escribir muchas devoluciones de llamada; en tu lugar, puedes usar
.then (),.catch ()oasync/awaitpara saber cuándo se han completado las solicitudes.
Ahora que has explorado las ventajas de usar la API de recuperación, analicemos sus funciones y capacidades clave.
Operaciones asincrónicas
La API de recuperación es asincrónica y la promesa se resuelve una vez que la respuesta del servidor esté disponible. De esta forma, no bloqueas la interfaz de usuario para tus usuarios y les ofreces una experiencia de usuario fluida. Exploremos algunos ejemplos.
Solicitud GET
Este es un ejemplo de cómo usar la API de recuperación para enviar una solicitud GET:
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log('Data fetched:', data);
})
.catch((error) => {
console.error('Fetch error:', error);
});
En este fragmento, la API de recuperación obtiene publicaciones de jsonplaceholder.typicode.com. Comprueba si la respuesta es correcta usando response.ok y arroja un error si no es así. Luego, analiza la respuesta a JSON con response.json (). Todos los errores, ya sean causados por problemas de red, respuestas mal formadas o errores de análisis, se gestionan en el bloque .catch () .
Solicitud POST
Aquí se explica cómo usar la API de recuperación para enviar una solicitud POST:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
body: JSON.stringify({
title: 'New Post',
body: 'Hello World! This is a test.',
userId: 1,
}),
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log('New Post created:', data);
})
.catch((error) => {
console.error('Fetch error:', error);
});
Aquí, la API de recuperación envía una solicitud para crear un nuevo recurso con el método POST. La solicitud POST es similar a la solicitud GET, pero incluye encabezados para informar al servidor de que la API está enviando datos JSON. Los datos JSON reales se incluyen en la clave principal.
Integración con las API
Puedes usar la API de recuperación para realizar solicitudes a API públicas o privadas, como recuperar datos para gráficos, paneles u otras funciones basadas en datos. Permite que las aplicaciones web se comuniquen con servicios externos mediante su flujo basado en promesas para gestionar las solicitudes y respuestas.
Este es un ejemplo básico de cómo puede obtener datos meteorológicos de la API de OpenWeatherMap :
const city = "London,uk";
const apiKey = "YOUR_API_KEY";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${apiKey}`;
fetch(url)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((weatherData) => {
console.log("Weather data for London:", weatherData);
})
.catch((error) => {
console.error("Error fetching weather data:", error);
});
Sustituye
YOUR_API_KEYpor tu clave de API actual.
Este código recupera los datos meteorológicos de Londres mediante la API de OpenWeather. El objeto WeatherData incluye detalles como la temperatura, la humedad y las condiciones, que puede integrar en su interfaz de usuario.
Una vez que ejecutes este código desde tu terminal o shell (usando el comando node filename.js), deberías ver un resultado como el siguiente:
Weather data for London: {
coord: { lon: -0.1257, lat: 51.5085 },
weather: [
{
id: 804,
main: 'Clouds',
description: 'overcast clouds',
icon: '04d'
}
],
base: 'stations',
main: {
temp: 273.42,
feels_like: 273.42,
temp_min: 272.59,
temp_max: 274.87,
pressure: 1021,
humidity: 87,
sea_level: 1021,
grnd_level: 1016
},
visibility: 10000,
wind: { speed: 0.51, deg: 0 },
clouds: { all: 99 },
dt: 1736525048,
sys: {
type: 2,
id: 268730,
country: 'GB',
sunrise: 1736496173,
sunset: 1736525567
},
timezone: 0,
id: 2643743,
name: 'London',
cod: 200
}
Las aplicaciones suelen necesitar interactuar con API externas para extraer datos externos. Por lo tanto, el uso de un enfoque limpio y coherente para la integración con cualquier servicio externo es una parte clave de la creación de una aplicación web escalable.
Gestión de errores
En comparación con los métodos AJAX más antiguos, como XMLHttpRequest, que requerían configurar varios controladores de eventos para gestionar los errores de red, la API de recuperación simplifica la gestión de errores mediante promesas y un solo bloque .catch () . La API de recuperación rechaza una promesa solo si se produce un error de red (por ejemplo, no hay conexión a Internet). No produce ningún error para los códigos de error HTTP como 404 o 500. Para ver si se ha producido uno de estos errores, tienes que comprobar manualmente response.ok. Si response.ok es false, significa que el servidor respondió con un estado que no está entre 200 y 299. El siguiente ejemplo muestra cómo gestiona a API de recuperación los errores cuando una solicitud falla debido a un punto final no válido:
fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
.then((response) => {
if (!response.ok) {
throw new Error(`Failed to fetch. Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log('This will not run if response is not ok');
})
.catch((error) => {
console.error('Network or response error:', error.message);
});
Al ejecutar este código, aparece el mensaje de salida Error de red o respuesta: no se pudo recuperar. Estado: 404. El código verifica !response.ok y arroja un error porque el punto final no existe.
Uso de proxis con la API de recuperación
Los proxis pueden mejorar las capacidades de la API de recuperación al proporcionar funciones adicionales de seguridad, escalabilidad y geolocalización. Los proxis funcionan como intermediarios entre tu cliente e Internet, proporcionando direcciones IP únicas, capas adicionales de seguridad y un enfoque más flexible para la obtención de recursos. El uso de proxis con recuperación puede ayudar a evitar que se bloquee tu dirección IP, ya que proporciona anonimato durante las actividades de extracción de datos web. Algunas otras ventajas del uso de proxis son las siguientes:
- Seguridad mejorada: los proxis ocultan tu dirección IP, lo que reduce el riesgo de que tu IP sea vulnerable a ataques malintencionados.
- Escalabilidad: los proxis pueden distribuir las solicitudes en varias direcciones IP, lo que evita los límites de velocidad o los bloqueos.
- Flexibilidad de geolocalización: los proxis se utilizan para enviar solicitudes HTTP desde diferentes ubicaciones, lo que resulta útil para acceder a contenido que solo está disponible en regiones específicas.
Tipos de proxis
Hay diferentes tipos de proxis, cada uno sirve para un caso de uso específico. Estos diferentes proxis son los siguientes:
- Proxis residenciales: estos proxis utilizan direcciones IP de ubicaciones residenciales reales y los sitios web confían mucho en ellos, lo que los hace más caros, pero también más eficaces en caso de que los sitios web objetivo bloqueen el tráfico de las IP de los centros de datos.
- Proxis rotativos: estos proxis rotan automáticamente las IP con cada solicitud o sesión. Son ideales para la extracción de datos a gran escala cuando se desea reducir el riesgo de alcanzar los límites de los servidores o las listas negras.
- Proxis de centros de datos: estos proxis provienen de centros de datos; son rentables y ofrecen alta velocidad, pero te bloquean si los usa con frecuencia.
Proxis de Bright Data con API de búsqueda
Bright Data proporciona servicios de proxy avanzados que se integran con las aplicaciones basadas en API de recuperación. Estos proxis te permiten elegir entre opciones residenciales, o de centros de datos, escalar tus capacidades de recuperación de datos para proyectos de nivel empresarial y beneficiarse de la rotación automática de IP para una recopilación de datos eficiente y confiable.
Aquí se explica cómo integrar los proxis de Bright Data con la API de recuperación:
import fetch from "node-fetch";
import { HttpsProxyAgent } from "https-proxy-agent";
const proxyHost = "BRIGHT_DATA_PROXY_HOST:PORT";
const proxyUsername = "BRIGHT_DATA_USERNAME";
const proxyPassword = "BRIGHT_DATA_PASSWORD";
const proxyUrl = `http://${proxyUsername}:${proxyPassword}@${proxyHost}`;
const targetUrl = "https://jsonplaceholder.typicode.com/posts";
// Create a proxy agent
const agent = new HttpsProxyAgent(proxyUrl);
fetch(targetUrl, { agent })
.then((response) => {
if (!response.ok) {
throw new Error(`Error fetching data. Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log("Data fetched via proxy:", data);
})
.catch((error) => {
console.error("Proxy fetch error:", error);
});
Este código envía una solicitud a través de un proxy específico mediante fetch con un HttpsProxyAgent. A continuación, define los detalles del proxy y crea un agente de proxy. fetch también obtiene los datos de la URL de destino mediante el proxy.
Para configurar un proxy, debes usar la
API de recuperacióndenode-fetch. Para obtener más información, visita la documentación de node-fetch. Este código puede ser diferente según el proxy elegido. Consulta la documentación oficial de Bright Data para obtener la información más reciente.
Mejores prácticas de la API de recuperación
Cuando realices solicitudes a la API de recuperación, sigue estas prácticas recomendadas para mejorar la eficiencia y el rendimiento:
Almacenamiento en caché de las respuestas
Para reducir la carga de los servidores y mejorar la experiencia general del usuario, puede utilizar mecanismos de almacenamiento en caché que almacenen los datos solicitados con frecuencia, evitando así las llamadas redundantes al servidor. Este es un ejemplo en el que se comprueba si los datos ya están en caché antes de realizar una solicitud de red:
const cache = new Map();
async function fetchWithCache(url) {
if (cache.has(url)) {
console.log("Fetching from cache:", url);
return cache.get(url);
}
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
cache.set(url, data);
console.log("Fetched and cached:", url);
return data;
} catch (error) {
console.error("Fetch error:", error);
throw error;
}
}
fetchWithCache("https://jsonplaceholder.typicode.com/posts")
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));
Evitar solicitudes innecesarias de datos ya almacenados en caché puede mejorar el rendimiento y reducir los tiempos de carga.
Gestión del tiempo de espera
Establecer algunos tiempos de espera puede evitar que tus solicitudes de recuperación se queden indefinidamente. Puedes cancelar las solicitudes que superen una duración especificada mediante el AbortController. En el siguiente ejemplo, el tiempo de espera se establece en tres segundos, mientras que el valor de tiempo de espera predeterminado es de cinco segundos:
async function fetchWithTimeout(url, timeout = 5000) {
const controller = new AbortController();
const timeoutId = setTimeout(() => {
console.warn("Fetch request timed out:", url);
controller.abort();
}, timeout);
try {
const response = await fetch(url, { signal: controller.signal });
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error("Fetch timeout or error:", error);
throw error;
}
}
fetchWithTimeout("https://jsonplaceholder.typicode.com/posts", 3000)
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));
Esto garantiza que las solicitudes que superen el tiempo de espera especificado se aborten y, al mismo tiempo, se gestionan otros errores de forma adecuada.
Limitación de solicitudes
Para evitar que tus API se sobrecarguen con solicitudes, debes implementar la limitación para controlar la frecuencia de las solicitudes. Por lo tanto, debes limitar la cantidad de solicitudes que se pueden realizar en un período de tiempo determinado. El siguiente ejemplo crea una función throttle que garantiza que una función se ejecute como máximo una vez en cada intervalo especificado (límite):
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function (...args) {
const context = this;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function () {
if (Date.now() - lastRan >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
const throttledFetch = throttle(async (url) => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log("Throttled fetch data:", data);
} catch (error) {
console.error("Throttled fetch error:", error);
}
}, 2000);
throttledFetch("https://jsonplaceholder.typicode.com/posts");
console.log("Fetching again in 2 seconds...");
throttledFetch("https://jsonplaceholder.typicode.com/posts");
La función ThrottledFetch usa la utilidad throttle para controlar las solicitudes de API. Garantiza que las llamadas repetidas para obtener datos de una URL estén separadas por al menos dos segundos. Esto evita llamadas a la API redundantes o excesivas, gestiona los errores y registra los datos obtenidos.
Conclusión
La API de recuperación simplifica las operaciones asincrónicas y el manejo de datos en las aplicaciones web modernas. Sin embargo, pueden surgir desafíos como bloqueos de IP, límites de velocidad y CAPTCHA cuando se trata de solicitudes a gran escala o con segmentación geográfica.
Las API de extracción de datos y el navegador de extracción de Bright Data brindan soluciones poderosas para estos desafíos. Las API de extracción permiten una extracción de datos sin interrupciones al evitar las medidas antiraspado, mientras que el navegador de extraccióno gestiona de manera eficiente el contenido dinámico y con mucho contenido de JavaScript. Estas herramientas garantizan una recopilación de datos segura, escalable y confiable incluso para los sitios web más complejos.
No se requiere tarjeta de crédito
