fetch と Axios の出力

cURL を fetch または Axios に変換するのは、構文の変更だけではありません。ランタイムの挙動も変わることがあります。

fetch

fetch はモダンブラウザとモダン Node ランタイムで利用できます。レスポンスオブジェクトを返し、HTTP 4xx や 5xx ステータスでは throw しません。

const response = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" })
});

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

Axios

Axios はリクエストとレスポンスの挙動を異なる方法でラップします。通常、2xx 以外のレスポンスでは reject し、可能なら JSON を自動的にパースします。

const response = await axios.post(
  "https://api.example.com/users",
  { name: "Ada" },
  { headers: { "Content-Type": "application/json" } }
);

ブラウザの違い

cURL コマンドはマシンからほぼ任意のヘッダーを送れます。ブラウザコードは CORS、禁止ヘッダー、Cookie、認証情報の規則に制限されます。変換されたリクエストは有効な JavaScript でも、ブラウザでは失敗する可能性があります。

Node の違い

Node コードには、単純な cURL 例に示されない環境変数、プロキシ設定、TLS オプション、タイムアウト処理が必要な場合があります。

生成コードは出発点として扱い、本番コードに貼り付ける前にランタイムの前提をレビューしてください。