コード生成中級
axios から fetch への移行
axios クライアントを Web 標準 fetch ベースのラッパーに置き換えるプロンプト。
監修: 平原尚樹
株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)
監修: 酒井歩乃加
早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆
こんな課題を解決
依存を減らすために axios をやめたいが、interceptor やリトライ・エラーハンドリングを fetch でどう再現するかが面倒。
プロンプト
Claude Code に入力
axios を fetch ベースに移行してください。
## 現状
- axios インスタンス: src/lib/api.ts に baseURL / interceptors 定義
- 利用箇所: src 配下で約 80 箇所
- interceptor の役割は 1) 認証ヘッダ付与 2) 401 で自動リフレッシュ 3) エラー正規化
## 手順
1. src/lib/http.ts に fetch ラッパーを新規作成（型は同じ shape を維持）
2. authFetch 関数で cookie + Authorization を付与
3. 401 時のリフレッシュロジックを Promise queue で実装（多重リクエスト対策）
4. AbortController でタイムアウトとキャンセル
5. 既存呼び出しを sed 的に置換 → 単体で動作確認
## 守ること
- レスポンスの型推論を維持（zod でランタイム検証を推奨）
- 既存のテストモック（msw など）が引き続き動くこと
- ファイルアップロードや FormData のケースを忘れない実行結果の例
Claude Code が以下を返します。 - src/lib/http.ts（120 行） - 置換 diff サマリ（80 箇所、import が変わるだけ） - 401 リフレッシュの Promise queue 実装 - msw ハンドラの互換性確認結果
コツ・ポイント
- fetch は 4xx/5xx で reject しないので throw を自前で行う
- Node 環境のテストは undici か polyfill を整える
- リトライは exponential backoff、500 / network error のみ対象に
- 巨大バイナリは streaming で送る前提に揃える