JavaScript で HTTP リクエストを処理する場合、Axios と Fetch が長年頼りになるツールでした。ただし、開発者が検討すべき強力で最新の代替手段があります。それは、Ky です。 Ky は軽量で高度な機能を満載しており、HTTP リクエストの処理をより簡単かつ効率的にします。この記事では、Ky が優れている理由を、Axios および Fetch API と直接比較しながら詳しく説明します。

1. Ky、Axios、および Fetch API の概要

アクシオス

Axios は、JavaScript 用の人気のある Promise ベースの HTTP クライアントです。自動 JSON 解析、リクエスト インターセプター、カスタム タイムアウトなどの機能を提供することで、HTTP リクエストを簡素化します。ただし、特に軽量のアプリケーションの場合、そのファイル サイズが欠点になる可能性があります。

APIを取得する

Fetch は、HTTP リクエストを行うための組み込みブラウザ API です。 Fetch には広く使用されていますが、いくつかの制限があります。デフォルトのエラー処理や組み込みの再試行が含まれていないため、開発者は基本的な機能であっても追加のコードを記述する必要があります。

カイ

Ky は、Axios および Fetch に代わる軽量 (157 ～ KB) で、Fetch 上に構築されていますが、より機能豊富な API を提供します。 Ky は、組み込みの再試行、簡素化されたエラー処理、カスタマイズ可能なリクエスト フックを備えており、シンプルさとパワーのバランスを保っています。

Ky を選ぶ理由

• 軽量 : サイズはわずか 157~ KB で、パフォーマンス重視のアプリケーションに最適です。
• モダン : Fetch API に基づいて構築されていますが、デフォルトの方が優れています。
• 再試行サポート : 失敗したリクエストに対する自動再試行。
• フック : beforeRequest フックと afterResponse フックを使用したリクエストとレスポンスの簡単な操作。

2. Ky が優れている理由: 主な特徴と利点

軽量かつ高性能

このため、Ky は、パフォーマンスとバンドル サイズが重要なアプリケーションにとって最適な選択肢となります。 Ky は軽量であるにもかかわらず、再試行やエラー処理などの重要な機能を犠牲にしていません。

シンプルなAPI、強力な機能

Ky の構文は Fetch と同じくらい単純ですが、さらに強力な組み込み機能を提供します。たとえば、Ky で GET リクエストを行うのは次のように簡単です:

import ky from 'ky';
const data = await ky.get('https://api.example.com/data').json();

これが Fetch より優れているのはなぜですか?

• 自動 JSON 解析 : 応答を手動で解析する必要はありません。
• エラー処理 : Ky は 404 や 500 などの HTTP コードに対して意味のあるエラーをスローします。
• 再試行 : Ky は、サイレントに失敗する Fetch とは異なり、失敗したリクエストを自動的に再試行します。

組み込みの再試行

Ky には、信頼性の低いネットワーク状態を処理するための重要な機能である再試行サポートが組み込まれています。 Axios には再試行機能もありますが、追加のプラグインを使用するか、自分で設定する必要があります。対照的に、Ky はデフォルトでこの機能を構成なしで提供します。

await ky.get('https://api.example.com/data', { retry: 2 });

この例では、Ky は追加のセットアップを行わずに、失敗した場合にリクエストを最大 2 回再試行します。

3. beforeRequest と afterResponse: ケンタッキー州のフックの力

Ky の最も魅力的な機能の 1 つは、フック システム、特に beforeRequest と afterResponse です。これらのフックを使用すると、Axios でよく必要となる外部ミドルウェアを必要とせずに、HTTP リクエストとレスポンスを完全に制御できます。

beforeRequest フック: リクエストを簡単に強化

Ky を使用すると、beforeRequest フックを使用して送信リクエストを簡単に変更できます。認証トークンを追加する必要がある場合も、ヘッダーを変更する必要がある場合も、beforeRequest を使用すると簡単になります。

例 : すべてのリクエストに認可トークンを追加します。

ky.extend({
  hooks: {
    beforeRequest: [
      request => {
        const token = localStorage.getItem('authToken');
        request.headers.set('Authorization', `Bearer ${token}`);
      }
    ]
  }
});

これによりコードの繰り返しが減り、グローバルな認証の処理が容易になります。

afterResponse フック: 応答処理を簡素化

afterResponse フックを使用すると、アプリケーション全体で応答を操作できます。このフックは、期限切れのトークンのリフレッシュなど、特定のステータス コードでの再試行を処理する場合に特に便利です。

例 : 401 Unauthorized 応答で期限切れのトークンを自動的に更新します。

ky.extend({
  hooks: {
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          const newToken = await refreshAuthToken();
          request.headers.set('Authorization', `Bearer ${newToken}`);
          return ky(request);
        }
      }
    ]
  }
});

この設定を使用すると、アプリケーション全体でロジックを複製することなく、トークンをシームレスに更新できます。

4. エラー処理: Ky vs Axios vs Fetch API

アクシオス

Axios はインターセプターを介して適切なエラー処理を提供しますが、Ky がすぐに提供できるシンプルさには欠けています。 Axios では、再試行とエラー ステータス コードの処理にカスタム ロジックが必要になることがよくあります。

APIを取得する

Fetch のエラー処理はデフォルトで制限されています。 404 や 500 などの HTTP ステータス コードのエラーはスローされないため、開発者は応答ステータスを手動で確認する必要があります。

カイ

Ky はエラー処理が得意です。 2xx 以外の HTTP 応答に対しては自動的にエラーがスローされ、追加のコードを必要とせずに、失敗した要求に対する再試行機能が提供されます。これにより、Ky はエラーをエレガントに処理するための堅牢なソリューションになります。

try {
  const data = await ky.get('https://api.example.com/data').json();
} catch (error) {
  console.error('Request failed:', error);
}

Ky はリクエスト全体を Promise でラップし、応答ステータス コードが失敗を示している場合は自動的にエラーをスローします。これにより、デバッグが簡素化されます。

5. 実践例: Ky の動作

Ky のシンプルさと強力さを示すいくつかの実際的な例を使って、Ky をテストしてみましょう。

例 1: GET リクエストの作成

const response = await ky.get('https://api.example.com/items').json();
console.log(response);

Ky は自動的に JSON 解析を処理し、2xx 以外のステータス コードに対してエラーをスローしますが、Fetch はこれを行いません。

例 2: 再試行を伴う POST リクエスト

const response = await ky.post('https://api.example.com/create', {
  json: { name: 'Ky' },
  retry: 3
}).json();
console.log(response);

Ky は POST リクエストが失敗した場合に最大 3 回再試行し、追加の設定を行わなくても Fetch や Axios よりも高い信頼性を提供します。

6. 結論: Ky は乗り換える価値がありますか?

JavaScript で HTTP リクエストを作成するための モダン 、軽量 、および 機能満載 ソリューションをお探しの場合は、Ky

シンプルさ 、 パフォーマンス 、および コントロール を優先する開発者にとって、Ky は JavaScript プロジェクトの主要ツールとして検討する価値があります。