為什麼 Ky 是現代 HTTP 請求的 Axios 和 Fetch 的最佳替代品

當涉及到用 JavaScript 處理 HTTP 請求時，Axios 和 Fetch 長期以來一直是首選工具。然而，開發者應該考慮一個強大的、現代的替代方案 — Ky。 Ky 輕量級且具有高級功能，使處理 HTTP 請求變得更容易、更有效率。在本文中，我們將透過與 Axios 和 Fetch API 的直接比較來分析 Ky 為何脫穎而出。

1. Ky、Axios、Fetch API 概述

阿克西奧斯

Axios 是一個流行的、基於 Promise 的 JavaScript 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 不同，Fetch 會默默失敗。

內建重試

Ky 具有內建重試支持，這是處理不可靠網路條件的關鍵功能。 Axios 也提供重試功能，但您需要使用額外的外掛程式或自行設定。相比之下，Ky 預設提供此功能且零配置。

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

在此範例中，Ky 將在失敗的情況下重試請求最多 2 次，無需任何額外設定。

3. beforeRequest 和 afterResponse：Ky 中 Hooks 的強大功能

Ky 最引人注目的功能之一是它的 hooks 系統，特別是 beforeRequest 和 afterResponse。這些鉤子可讓您完全控制 HTTP 請求和回應，而無需 Axios 經常需要的外部中間件。

beforeRequest Hook：輕鬆增強請求

使用 Ky，您可以使用 beforeRequest 掛鉤輕鬆修改傳出請求。無論您需要新增身份驗證令牌還是修改標頭，beforeRequest 都可以輕鬆實現。

範例：為每個請求新增授權令牌。

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

這減少了重複程式碼，從而更容易處理全域身份驗證。

afterResponse Hook：簡化回應處理

使用 afterResponse 鉤子，您可以在整個應用程式中操作回應。該鉤子對於處理特定狀態代碼的重試特別有用，例如刷新過期的令牌。

範例：在 401 未經授權的回應中自動刷新過期令牌。

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 是現代 HTTP 請求的 Axios 和 Fetch 的最佳替代品的詳細內容。更多資訊請關注PHP中文網其他相關文章！