在 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 在简单性和功能之间取得了平衡。

为什么选择凯？

• 轻量级：大小仅为 157~ KB，非常适合性能敏感的应用程序。
• 现代：基于 Fetch API 构建，但具有更好的默认值。
• 重试支持：失败请求自动重试。
• Hooks ：使用 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 代码抛出有意义的错误。
• Retries ：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. 错误处理：Ky、Axios、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。

示例 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 是一个很好的选择。虽然 Axios 和 Fetch 仍然被广泛使用，但 Ky 提供了一些关键优势，例如自动重试、用于自定义请求和响应的挂钩以及更好的默认错误处理。

对于优先考虑简单性、性能和控制而不是HTTP请求的开发人员，Ky绝对值得考虑作为JavaScript项目中的主要工具。

更多示例和详细API信息，可以访问https://www.npmjs.com/package/ky。