Ky가 Axios 및 최신 HTTP 요청에 대한 Fetch에 대한 최선의 대안인 이유

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. Error Handling: Ky vs Axios vs Fetch API

Axios

Axios provides decent error handling via interceptors, but it lacks the simplicity that Ky offers out of the box. Axios often requires custom logic for retries and error status code handling.

Fetch API

Fetch’s error handling is limited by default. It doesn’t throw errors for HTTP status codes like 404 or 500, forcing developers to check response statuses manually.

Ky

Ky excels in error handling. It automatically throws errors for non-2xx HTTP responses and provides retry functionality for failed requests without needing additional code. This makes Ky a robust solution for handling errors elegantly.

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

Ky wraps the entire request in a promise, automatically throwing an error if the response status code indicates a failure, which simplifies debugging.

5. Practical Examples: Ky in Action

Let’s put Ky to the test with a few practical examples that showcase its simplicity and power.

Example 1: Making a GET Request

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

Ky automatically handles JSON parsing and throws an error for any non-2xx status codes, which Fetch does not.

Example 2: POST Request with Retries

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

Ky retries the POST request up to 3 times if it fails, offering better reliability than Fetch or Axios without extra configuration.

6. Conclusion: Is Ky Worth the Switch?

If you’re looking for a modern , lightweight , and feature-packed solution for making HTTP requests in JavaScript, Ky is an excellent choice. While Axios and Fetch are still widely used, Ky offers key advantages like automatic retries, hooks for customizing requests and responses, and better default error handling.

For developers who prioritize simplicity , performance , and control over HTTP requests, Ky is definitely worth considering as a primary tool in your JavaScript projects.

For more examples and detailed API information, you can visit https://www.npmjs.com/package/ky.

위 내용은 Ky가 Axios 및 최신 HTTP 요청에 대한 Fetch에 대한 최선의 대안인 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!