为什么 Ky 是现代 HTTP 请求的 Axios 和 Fetch 的最佳替代品

php中文网 2024-10-15 11:59:15

在 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 =&gt; {
        const token = localstorage.getitem('authtoken');
        request.headers.set('authorization', `bearer ${token}`);
      }
    ]
  }
});

这减少了重复代码，从而更容易处理全局身份验证。

afterresponse hook：简化响应处理

使用 afterresponse 钩子，您可以在整个应用程序中操作响应。该钩子对于处理特定状态代码的重试特别有用，例如刷新过期的令牌。

示例：在 401 未经授权的响应中自动刷新过期令牌。

ky.extend({
  hooks: {
    afterresponse: [
      async (request, options, response) =&gt; {
        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。

以上就是为什么 Ky 是现代 HTTP 请求的 Axios 和 Fetch 的最佳替代品的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/11799.html