cURL en JavaScript: Convertir Solicitudes a Fetch y Axios

TL;DR:

• Un comando cURL es un contrato de solicitud portátil, no código JavaScript. Convierte deliberadamente el método, URL, encabezados, cuerpo, autenticación, política de redireccionamiento y tiempo de espera.
• Utiliza fetch() incorporado para pequeños clientes basados en estándares. Verifica response.ok, analiza el cuerpo explícitamente y cancela las solicitudes con una señal de aborto.
• Usa Axios cuando los interceptores, instancias compartidas y una política de solicitud centralizada mejoran la aplicación. La solicitud de red debe seguir siendo equivalente a la llamada cURL probada.
• Mantén los secretos fuera de los comandos copiados y archivos fuente. Lee las claves de API desde el entorno y elimina los encabezados generados por el navegador que el servidor no requiere.

cURL es a menudo la forma más rápida de probar un punto final HTTP. Las herramientas de desarrollo del navegador, la documentación de la API, y los equipos de soporte producen comandos cURL copiables porque el formato hace que la solicitud sea visible: la URL, el método, los encabezados y el cuerpo están en un solo lugar.

Las aplicaciones JavaScript necesitan la misma solicitud expresada como objetos y flujo de control asincrónico. Esta guía muestra cómo traducir cURL en Fetch y Axios sin perder comportamiento, y luego aplica el método a una solicitud API Scrapeless.

¿Qué significa "Usar cURL en JavaScript"?

JavaScript no ejecuta la sintaxis de cURL de manera nativa. "Usar cURL en JavaScript" generalmente significa traducir una solicitud cURL funcional en fetch() o Axios para que la aplicación envíe el mismo mensaje HTTP.

La referencia de línea de comandos de cURL define banderas como -X, -H, --data, y --location. Cada bandera tiene un equivalente en JavaScript, pero la asignación no siempre es uno a uno porque la shell, cURL, el navegador y Node.js tienen diferentes valores predeterminados.

Mapeo de cURL a JavaScript

No copies cada encabezado de las herramientas de desarrollo del navegador. Host, Content-Length, campos de nivel de conexión, cookies temporales y encabezados de seguimiento son normalmente generados por el tiempo de ejecución o específicos de una sesión.

Paso 1: Comienza con una solicitud cURL probada

Este ejemplo público envía JSON a un punto final de eco:

Los bloques de eco público en los Pasos 1–4 son contratos de solicitud ilustrativos; muestran un comportamiento equivalente de red sin reclamar un resultado de servicio en producción.

curl 'https://httpbin.org/anything' \
  -X POST \
  -H 'accept: application/json' \
  -H 'content-type: application/json' \
  --data '{"query":"browser automation","limit":3}'

Antes de convertirlo, identifica el contrato:

• Método: POST.
• URL: https://httpbin.org/anything.
• Tipo de medio de solicitud: JSON.
• Respuesta aceptada: JSON.
• Campos del cuerpo: query y limit.

Paso 2: Convierte cURL a Fetch

Los navegadores modernos y los tiempos de ejecución actuales de Node.js exponen la API Fetch. La guía MDN sobre Fetch documenta las opciones de solicitud y un comportamiento importante: los estados de error HTTP aún se resuelven a Response, por lo que el código debe verificar response.ok.

const response = await fetch("https://httpbin.org/anything", {
  method: "POST",
  headers: {
    accept: "application/json",
    "content-type": "application/json",
  },
  body: JSON.stringify({ query: "browser automation", limit: 3 }),
});

if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}

const data = await response.json();
console.log(data.json);

El objeto pasado a JSON.stringify() es el contraparte directa del cuerpo JSON de cURL. No pases un objeto plano como body; Fetch espera un tipo de cuerpo como una cadena, FormData, o bytes.

Paso 3: Agrega un tiempo de espera explícito

Una solicitud de aplicación necesita una condición de parada. Utiliza una señal de aborto para que la operación y el consumo del cuerpo de la respuesta se puedan cancelar juntos. La documentación de AbortController describe ese modelo de cancelación.

const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 15_000);

try {
  const response = await fetch("https://httpbin.org/anything", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ query: "browser automation", limit: 3 }),
    signal: controller.signal,
  });

  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  console.log(await response.json());
} finally {
  clearTimeout(timer);
}

Mantén errores de transporte, errores de estado HTTP y errores de esquema de respuesta distintos. Señalan diferentes causas y deben producir diferentes registros.

Paso 4: Convierte la misma solicitud cURL a Axios

Axios acepta el cuerpo en data y analiza las respuestas JSON comunes en response.data. Su documentación de configuración de solicitudes lista encabezados, tiempo de espera, autenticación y otros controles del cliente.

import axios from "axios";

const response = await axios({
  method: "post",
  url: "https://httpbin.org/anything",
  headers: {
    accept: "application/json",
    "content-type": "application/json",
  },
  data: { query: "browser automation", limit: 3 },
  timeout: 15_000,
});

console.log(response.data.json);

Axios es útil cuando una aplicación se beneficia de una instancia configurada:

const api = axios.create({
  baseURL: "https://httpbin.org",
  timeout: 15_000,
  headers: { accept: "application/json" },
});

const { data } = await api.post("/anything", {
  query: "browser automation",
  limit: 3,
});

Comienza a raspar con Scrapeless

Potencia tu flujo de trabajo de web scraping y automatización con Scrapeless!
Regístrate hoy y obtén $5 en crédito gratis — sin tarjeta de crédito requerida.
Reclama tu crédito gratuito ahora en el Scrapeless Dashboard.

Paso 5: Convertir una Solicitud de API de Scrapeless

El mismo mapeo funciona para una solicitud de adquisición web administrada. Este ejemplo utiliza la Scrapeless Universal Scraping API. Requiere un SCRAPELESS_API_KEY de propiedad del lector, por lo que los bloques con credenciales son ejemplos de configuración en lugar de resultados en vivo reclamados.

La forma de cURL es:

curl 'https://api.scrapeless.com/api/v2/unlocker/request' \
  -H "x-api-token: ${SCRAPELESS_API_KEY}" \
  -H 'content-type: application/json' \
  --data '{
    "actor":"unlocker.webunlocker",
    "proxy":{"country":"ANY"},
    "input":{
      "url":"https://example.com/",
      "jsRender":{"enabled":true,"response":{"type":"markdown"}}
    }
  }'

La traducción de Fetch es:

const payload = {
  actor: "unlocker.webunlocker",
  proxy: { country: "ANY" },
  input: {
    url: "https://example.com/",
    jsRender: { enabled: true, response: { type: "markdown" } },
  },
};

const response = await fetch(
  "https://api.scrapeless.com/api/v2/unlocker/request",
  {
    method: "POST",
    headers: {
      "content-type": "application/json",
      "x-api-token": process.env.SCRAPELESS_API_KEY,
    },
    body: JSON.stringify(payload),
  },
);

if (!response.ok) throw new Error(`HTTP ${response.status}`);
const result = await response.json();
console.log(result);

La traducción de Axios cambia solo la forma del cliente:

const { data } = await axios.post(
  "https://api.scrapeless.com/api/v2/unlocker/request",
  payload,
  {
    headers: { "x-api-token": process.env.SCRAPELESS_API_KEY },
    timeout: 90_000,
  },
);

console.log(data);

Fetch o Axios: ¿Cuál Debes Elegir?

Elige Fetch cuando el proyecto quiera una API basada en estándares, con dependencias mínimas y manejo de respuestas explícito. Elige Axios cuando las instancias compartidas, interceptores, transformaciones de solicitudes o una política de cliente uniforme reduzcan el código de la aplicación.

La elección no debe cambiar el contrato del servidor. Mantén un comando cURL dorado para diagnósticos, luego confirma que el cliente de JavaScript envía el mismo método, encabezados y cuerpo serializado.

Errores Comunes de Conversión

• Olvidar JSON.stringify() en una solicitud Fetch.
• Asumir que Fetch arroja automáticamente en una respuesta 404 o 500.
• Copiar un valor de cookie temporal o autorización en el código fuente.
• Enviar data dentro de las opciones de Fetch en lugar de body.
• Enviar body en Axios en lugar de data.
• Analizar cada respuesta como JSON sin comprobar content-type.
• Llevar encabezados solo para navegadores a un cliente de Node.js.
• Omitir un tiempo de espera explícito o señal de aborto.

La guía Scrapeless JSON cURL cubre la cita de shell y archivos de carga con mayor profundidad. Consulta los actuales precios de Scrapeless cuando el cliente traducido pase de la validación local a la adquisición sostenida.

Conclusión

Convertir cURL a JavaScript es una traducción controlada de un contrato HTTP. Mapea la URL, método, encabezados, cuerpo, autenticación, redireccionamientos, tiempo de espera y análisis de respuestas uno por uno. Fetch mantiene el cliente cerca de los estándares web; Axios agrega comodidades a nivel de aplicación. Un comando cURL verificado sigue siendo la mejor referencia diagnóstica para ambos.

¿Listo para Transformar una Solicitud Comprobada en un Flujo de Datos?

Únete a la comunidad de Scrapeless en Discord o Telegram. Crea una cuenta en el Scrapeless Dashboard y lleva una solicitud cURL funcional al cliente de JavaScript que tu aplicación ya utiliza.

FAQ

P: ¿Puede JavaScript ejecutar un comando cURL directamente?

JavaScript normalmente traduce la solicitud cURL a Fetch o Axios. Un proceso de Node.js puede lanzar el binario externo curl, pero eso añade una dependencia del sistema operativo y rara vez es necesario para las llamadas HTTP de la aplicación.

P: ¿Está Fetch disponible en Node.js?

Las versiones actuales de Node.js proporcionan una API global Fetch compatible con el navegador. Consulta la documentación oficial del tiempo de ejecución y la política de soporte antes de elegir la versión mínima del proyecto.

P: ¿Por qué Fetch no lanza un error en HTTP 404?

Fetch trata una respuesta HTTP como una operación de red completada incluso cuando el estado señala un error de aplicación. Verifica response.ok o response.status antes de analizar el cuerpo.

P: ¿Es Axios mejor que Fetch?

Axios es mejor cuando sus instancias, interceptores, transformaciones y configuración de tiempo de espera simplifican un cliente más grande. Fetch es mejor cuando una superficie pequeña, libre de dependencias y basada en estándares es suficiente.

P: ¿Cómo deben manejarse las claves de API durante la conversión?

Lee las claves de API de las variables de entorno o de un servicio de secretos, inyectalas en tiempo de ejecución y redáctalas de los registros. Nunca pegues una clave real en un comando cURL comprometido en un repositorio.

P: ¿Cuándo necesita un cliente de JavaScript Scrapeless?

Un cliente de JavaScript se beneficia de Scrapeless cuando el objetivo requiere renderizado gestionado, egreso regional, infraestructura de sesión o adquisición estructurada más allá de una respuesta HTTP directa.