在 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. 错误处理：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。
