为什么 Ky 是现代 HTTP 请求的 Axios 和 Fetch 的最佳替代品
来源:dev.to
时间:2024-10-13 12:13:08 356浏览 收藏
编程并不是一个机械性的工作,而是需要有思考,有创新的工作,语法是固定的,但解决问题的思路则是依靠人的思维,这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《为什么 Ky 是现代 HTTP 请求的 Axios 和 Fetch 的最佳替代品》,文章讲解的知识点主要包括,如果你对文章方面的知识点感兴趣,就不要错过golang学习网,在这可以对大家的知识积累有所帮助,助力开发能力的提升。
在 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。
本篇关于《为什么 Ky 是现代 HTTP 请求的 Axios 和 Fetch 的最佳替代品》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
452 收藏
-
471 收藏
-
278 收藏
-
243 收藏
-
192 收藏
-
305 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 507次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习