为什么 Ky 是现代 HTTP 请求的 Axios 和 Fetch 的最佳替代品
编程并不是一个机械性的工作,而是需要有思考,有创新的工作,语法是固定的,但解决问题的思路则是依靠人的思维,这就需要我们坚持学习和更新自己的知识。今天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学习网公众号!

- 上一篇
- 清华系“仓颉”来了!大模型造字7天交付超40套,客户成本大降80%

- 下一篇
- 如何在Windows 11快速复制屏幕截图中的文本
-
- 文章 · 前端 | 2小时前 |
- Excel导入数据的实现方法全解析
- 473浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- JavaScript闭包捕获自由变量的方式详解
- 260浏览 收藏
-
- 文章 · 前端 | 2小时前 | Float shape-outside polygon() CSS文字环绕图片 shape-margin
- CSS图文环绕实现技巧
- 286浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- param标签怎么用?参数设置详解
- 412浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- HTML表格跨行跨列合并技巧
- 245浏览 收藏
-
- 文章 · 前端 | 2小时前 | CSS优化 浏览器兼容性 字体选择 font-smoothing 韩文显示
- CSS优化韩文显示:font-smoothing设置技巧
- 235浏览 收藏
-
- 文章 · 前端 | 2小时前 | JavaScript HTML表单 用户行为追踪 热图分析 表单优化
- HTML表单热图分析与用户行为追踪技巧
- 129浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- 表单API调用与后端交互全解析
- 105浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- JS实现分页功能的完整教程
- 281浏览 收藏
-
- 文章 · 前端 | 2小时前 |
- CSS浮动的作用及适用场景解析
- 489浏览 收藏
-
- 文章 · 前端 | 2小时前 | CSS text-shadow background-clip:text 文字渐变描边 渐变填充
- CSS文字渐变描边教程详解
- 207浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- 千音漫语
- 千音漫语,北京熠声科技倾力打造的智能声音创作助手,提供AI配音、音视频翻译、语音识别、声音克隆等强大功能,助力有声书制作、视频创作、教育培训等领域,官网:https://qianyin123.com
- 168次使用
-
- MiniWork
- MiniWork是一款智能高效的AI工具平台,专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具,提供精准智能解决方案,让复杂工作简单高效。
- 167次使用
-
- NoCode
- NoCode (nocode.cn)是领先的无代码开发平台,通过拖放、AI对话等简单操作,助您快速创建各类应用、网站与管理系统。无需编程知识,轻松实现个人生活、商业经营、企业管理多场景需求,大幅降低开发门槛,高效低成本。
- 171次使用
-
- 达医智影
- 达医智影,阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”,仅一次CT扫描即可高效识别多种癌症、急症及慢病,为疾病早期发现提供智能、精准的AI影像早筛解决方案。
- 172次使用
-
- 智慧芽Eureka
- 智慧芽Eureka,专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景,通过专家级AI Agent精准执行任务,智能化工作流解放70%生产力,让您专注核心创新。
- 186次使用
-
- 优化用户界面体验的秘密武器:CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览
-
- UI设计中为何选择绝对定位的智慧之道
- 2024-02-03 501浏览