cURLをJavaScriptで：リクエストをFetchとAxiosに変換する

TL;DR:

• cURLコマンドは、ポータブルなリクエスト契約であり、JavaScriptコードではありません。 メソッド、URL、ヘッダー、ボディ、認証、リダイレクトポリシー、タイムアウトを故意に変換してください。
• 小規模な標準ベースのクライアントには、組み込みの fetch() を使用してください。 response.ok を確認し、ボディを明示的に解析し、abort signal でリクエストをキャンセルします。
• インターセプター、共有インスタンス、および集中管理されたリクエストポリシーがアプリケーションを改善する場合は、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の対応物がありますが、シェル、cURL、ブラウザ、Node.jsのデフォルトが異なるため、マッピングは常に1対1ではありません。

cURLからJavaScriptへのマッピング

ブラウザの開発者ツールからすべてのヘッダーをコピーしないでください。Host、Content-Length、接続レベルのフィールド、一時的なクッキー、トレースヘッダーは通常、実行時によって生成されるか、特定のセッションに固有です。

ステップ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: 明示的なタイムアウトを追加する

アプリケーションリクエストには停止条件が必要です。abort signal を使用して、操作とレスポンスボディの消費を同時にキャンセルできるようにしてください。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 のレスポンスで自動的にスローされると仮定すること。
• 一時的なクッキーまたは認証値をソースコードにコピーすること。
• Fetch オプション内で data を送信し、body の代わりに使用すること。
• Axios で body を送信し、data の代わりに使用すること。
• content-type をチェックせずにすべてのレスポンスを JSON として解析すること。
• ブラウザ専用のヘッダーを Node.js クライアントに持ち込むこと。
• 明示的なタイムアウトまたは中止信号を省略すること。

Scrapeless JSON cURL ガイド は、シェルクオーティングとペイロードファイルについてより深くカバーしています。翻訳されたクライアントがローカル検証から持続的取得に移行するとき、現在の Scrapeless 価格 を確認してください。

結論

cURL を JavaScript に変換することは、HTTP 契約の制御された翻訳です。URL、メソッド、ヘッダー、ボディ、認証、リダイレクト、タイムアウト、およびレスポンス解析を一つずつマッピングします。Fetch はクライアントをウェブ標準に近づけ、Axios はアプリケーションレベルの利便性を追加します。検証済みの cURL コマンドは、どちらにとっても最良の診断リファレンスです。

実証済みのリクエストをデータワークフローに変換する準備はできましたか？

Discord または Telegram で Scrapeless コミュニティに参加してください。Scrapeless Dashboard でアカウントを作成し、アプリケーションで既に使用している JavaScript クライアントに機能する cURL リクエストを移植してください。

FAQ

Q: JavaScript は cURL コマンドを直接実行できますか？

JavaScript は通常、cURL リクエストを Fetch または Axios に変換します。Node.js プロセスは外部 curl バイナリを起動できますが、それはオペレーティングシステムの依存関係を追加し、アプリケーションの HTTP 呼び出しにはほとんど必要ありません。

Q: Fetch は Node.js で使用できますか？

現在の Node.js リリースは、ブラウザ互換のグローバル Fetch API を提供します。最低限のプロジェクトバージョンを選択する前に、ランタイムの公式ドキュメントとサポートポリシーを確認してください。

Q: なぜ Fetch は HTTP 404 でスローしないのですか？

Fetch は、ステータスがアプリケーションエラーを信号する場合でも、HTTP レスポンスを完了したネットワーク操作として扱います。ボディを解析する前に response.ok または response.status をチェックしてください。

Q: Axios は Fetch より優れていますか？

Axios は、インスタンス、インターセプター、変換、タイムアウト設定がより大きなクライアントを簡素化する場合に優れています。Fetch は、依存関係のない標準ベースの低コストな表面が十分な場合に優れています。

Q: API キーは変換中にどのように処理するべきですか？

環境変数または秘密サービスから API キーを読み込み、ランタイムでインジェクトし、ログから削除します。本物のキーをリポジトリにコミットされた cURL コマンドに貼り付けないでください。

Q: JavaScript リクエストはいつ Scrapeless を必要としますか？

JavaScript クライアントは、ターゲットが管理されたレンダリング、地域的な出口、セッションインフラストラクチャ、または直接 HTTP レスポンスを超える構造化された取得を必要とする場合に Scrapeless の恩恵を受けます。