cURL 在 JavaScript 中：将请求转换为 Fetch 和 Axios

TL;DR:

• cURL 命令是一个可移植的请求契约，而不是 JavaScript 代码。 有意地转换方法、URL、头部、主体、身份验证、重定向策略和超时。
• 对于小型基于标准的客户端，请使用内置的 fetch()。 检查 response.ok，显式解析主体，并使用中止信号取消请求。
• 当拦截器、共享实例和集中请求策略改善应用程序时，请使用 Axios。 该网络请求应保持与经过验证的 cURL 调用等效。
• 保持机密信息不在复制的命令和源文件中。 从环境中读取 API 密钥，并删除服务器不需要的浏览器生成的头部。

cURL 通常是证明 HTTP 端点的最快方式。浏览器开发者工具、API 文档和支持团队都生成可复制的 cURL 命令，因为这种格式使请求可见：URL、方法、头部和主体集中在一个地方。

JavaScript 应用程序需要以对象和异步控制流的形式表达同样的请求。此指南展示如何将 cURL 转换为 Fetch 和 Axios，而不丢失行为，然后将该方法应用于 Scrapeless API 请求。

“在 JavaScript 中使用 cURL”是什么意思？

JavaScript 不直接执行 cURL 语法。“在 JavaScript 中使用 cURL”通常意味着将一个有效的 cURL 请求转换为 fetch() 或 Axios，以便应用程序发送相同的 HTTP 消息。

cURL 命令行参考 定义了诸如 -X、-H、--data 和 --location 的标志。每个标志都有一个 JavaScript 对应项，但映射并不总是一一对应，因为 shell、cURL、浏览器和 Node.js 具有不同的默认值。

cURL 到 JavaScript 的映射

不要从浏览器开发者工具复制每个头部。Host、Content-Length、连接级字段、临时 cookie 和跟踪头通常由运行时生成或特定于一个会话。

第 1 步：从一个经过验证的 cURL 请求开始

这个公共示例向一个回显端点发送 JSON：

步骤 1-4 中的公共回显块是说明性请求契约；它们显示等效的网络行为，而不声称产生生产服务结果。

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

在转换之前，确定契约：

• 方法：POST。
• URL：https://httpbin.org/anything。
• 请求媒体类型：JSON。
• 接受的响应：JSON。
• 主体字段：query 和 limit。

第 2 步：将 cURL 转换为 Fetch

现代浏览器和当前的 Node.js 运行时公开 Fetch API。MDN Fetch 指南 记录了请求选项和一个重要行为：HTTP 错误状态仍将解析为 Response，因此代码必须检查 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);

传递给 JSON.stringify() 的对象是 cURL JSON 主体的直接对应项。不要将普通对象作为 body 传递；Fetch 期待的主体类型如字符串、FormData 或字节。

第 3 步：添加显式超时

应用程序请求需要一个停止条件。使用中止信号，以便操作和响应主体消费可以一起取消。AbortController 文档 描述了该取消模型。

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);
}

保持传输错误、HTTP 状态错误和响应模式错误的不同。它们指向不同的原因，并应生成不同的日志。

第 4 步：将相同的 cURL 请求转换为 Axios

Axios 在 data 中接受主体，并将常见的 JSON 响应解析为 response.data。它的 请求配置文档 列出了头部、超时、身份验证和其他客户端控制。

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 非常有用：

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,
});

开始使用 Scrapeless 进行抓取

利用 Scrapeless 提升您的网络抓取和自动化工作流程！
今天注册并获得 5 美元的免费额度 — 无需信用卡。
现在在 Scrapeless Dashboard 领取您的免费信用。

第 5 步：转换 Scrapeless API 请求

相同的映射适用于管理的网络获取请求。此示例使用 Scrapeless Universal Scraping API。它需要一个由读者拥有的 SCRAPELESS_API_KEY，因此凭证保护的区块是配置示例，而不是实际的结果。

cURL 形状为：

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"}}
    }
  }'

Fetch 翻译为：

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);

Axios 翻译仅改变客户端形状：

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 或 Axios：您该选择哪个？

当项目需要基于标准的 API、最小的依赖关系和明确的响应处理时，选择 Fetch。当共享实例、拦截器、请求转换或统一客户端策略减少应用程序代码时，选择 Axios。

选择不应改变服务器合同。保留一个黄金 cURL 命令以供诊断，然后确认 JavaScript 客户端发送相同的方法、头部和序列化主体。

常见转换错误

• 忘记在 Fetch 请求中使用 JSON.stringify()。
• 假设 Fetch 在 404 或 500 响应时自动抛出错误。
• 将临时 cookie 或授权值复制到源代码中。
• 在 Fetch 选项中发送 data 而不是 body。
• 在 Axios 中发送 body 而不是 data。
• 在没有检查 content-type 的情况下将每个响应解析为 JSON。
• 将浏览器唯一的头部带入 Node.js 客户端。
• 忽略明确的超时或中止信号。

Scrapeless JSON cURL 指南 更深入地介绍了 shell 引号和有效负载文件。查看当前 Scrapeless 定价，当翻译的客户端从本地验证转向持续获取时。

结论

将 cURL 转换为 JavaScript 是对 HTTP 合同的控制翻译。逐一映射 URL、方法、头部、主体、身份验证、重定向、超时和响应解析。Fetch 使客户端更接近网络标准；Axios 添加了应用级便利性。经过验证的 cURL 命令仍然是最佳的诊断参考。

准备将一个经过验证的请求转化为数据工作流吗？

加入 Discord 或 Telegram 的 Scrapeless 社区。在 Scrapeless Dashboard 创建一个账户，将一个有效的 cURL 请求移植到您的应用程序已使用的 JavaScript 客户端中。

常见问题解答

问：JavaScript 可以直接运行 cURL 命令吗？

JavaScript 通常将 cURL 请求转换为 Fetch 或 Axios。Node.js 进程可以启动外部 curl 二进制文件，但这会增加操作系统依赖性，且在应用程序 HTTP 调用中很少需要。

问：Fetch 在 Node.js 中可用吗？

当前的 Node.js 版本提供与浏览器兼容的全局 Fetch API。在选择最低项目版本之前，请检查运行时的官方文档和支持政策。

问：为什么 Fetch 在 HTTP 404 时不抛出错误？

Fetch 将 HTTP 响应视为已完成的网络操作，即使状态信号表示应用程序错误。在解析主体之前检查 response.ok 或 response.status。

问：Axios 比 Fetch 更好吗？

当其实例、拦截器、转换和超时配置简化更大的客户端时，Axios 更好。当小的无依赖基于标准的表面足够时，Fetch 更好。

问：在转换过程中，API 密钥应该如何处理？

从环境变量或秘密服务读取 API 密钥，在运行时注入，并从日志中删除。切勿将真实密钥粘贴入提交到代码库的 cURL 命令中。

问：JavaScript 请求何时需要 Scrapeless？

当目标需要管理渲染、区域出口、会话基础设施或超出直接 HTTP 响应结构的获取时，JavaScript 客户端可以从 Scrapeless 中受益。