了解 Fetch API 中 resok 的重要性

了解 fetch api 中 resok 的重要性

我一直是 axios 数据获取的狂热用户,但我最近决定改用 fetch api。在探索过程中,我遇到了一个微妙但显着的差异,我认为值得分享。

让我们从这段代码开始。您认为它会记录什么?

try{   //this returns a 404 error   const res = await fetch("randomapi....")    console.log("successful")  }catch(err){   console.log("failed", err)}

如果您猜测它会在控制台上记录“失败”以及错误对象,那么您并不孤单 – 直到最近我也这么认为。然而,fetch 并不是这样工作的!

这里有一个问题:即使 fetch 请求收到 404 或 500 状态代码,它也不会抛出错误,也不会触发 catch 块。相反,fetch 函数会解析 promise,让您检查响应是否成功。

要正确处理 fetch 错误,您需要显式检查 res.ok 属性,如下所示:

try{    //returns 404 error    const res = await fetch("randomapi")    if(!res.ok){      throw new Error("fetch request failed")    }    console.log("successful")    let data = await res.json()    console.log(data)}catch(err){  console.log(err)}

使用这种方法,如果响应状态超出成功范围(200–299),则执行 throw 语句,并在 catch 块中捕获错误。

为什么会发生这种情况?

与 axios 不同,fetch 不会将 2xx 范围之外的 http 响应代码视为错误。相反,它将所有 http 响应(无论成功与否)视为已履行的承诺。这种设计选择为开发人员提供了更多控制权,但也需要付出额外的努力才能正确处理错误。

理解响应。ok

response.ok 属性是一个布尔值,对于 200 到 299 之间的 http 状态代码,其计算结果为 true。对于任何其他状态代码,其计算结果为 false。这使得检查您的提取请求是否成功成为一种简单可靠的方法。

例如:

200状态表示成功并将response.ok设置为true。将设置 404 状态(未找到)或 500status(服务器错误) 响应.ok 到 false。

如果您需要更精细的错误处理,例如区分客户端错误 (4xx) 和服务器端错误 (5xx),您还可以直接使用 response.status 访问状态代码。

感谢您的阅读,希望这对其他人有帮助!

以上就是了解 Fetch API 中 resok 的重要性的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1499323.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 21:42:03
下一篇 2025年12月19日 21:42:17

相关推荐

  • 您没有使用(但应该使用)的被低估的 NPM 软件包

    NPM 的世界是广阔的。拥有超过 200 万个可用软件包,您很容易会被一些大牌——React、Lodash、Express——所吸引,而错过一些真正被低估的宝石,这些宝石可以让您作为开发者的生活变得更加轻松。 1。日期-fns-tz无需额外开销即可解决时区问题 时区是最糟糕的。跨时区解析和格式化日期…

    2025年12月19日
    000
  • 不再在 HTML 画布上编写代码行

    您想花早上、下午和晚上的时间使用 rough.js 进行编码,或者更糟糕的是使用 canvas api 进行编码吗? 或者你想在…30分钟而不编写代码的情况下绘制这个? canvascript 是一款开源无代码工具,可确保您不会浪费时间编写代码和跟踪坐标来完成像为画布创建图形这样的创意工作。 只需绘…

    2025年12月19日
    000
  • ✨ 带有玻璃变形效果的发光迪斯科灯泡动画! ✨ 代码 HTML CSS 和 JAVASCRIPT

    Disco Bulb Animation body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, …

    2025年12月19日
    000
  • React 19 中的新增功能

    行动 react 应用程序中的一个常见用例是执行数据突变,然后更新状态作为响应。例如,当用户提交表单以更改其姓名时,您将发出 api 请求,然后处理响应。过去,您需要手动处理挂起状态、错误、乐观更新和顺序请求。 例如,您可以在 usestate 中处理挂起和错误状态: // before actio…

    2025年12月19日
    000
  • 我做了一个简单易用的小费计算器

    您是否曾经发现自己在享用完一顿美餐后,不确定要给服务员多少小费?计算小费有时感觉就像是数学测验,尤其是当您与朋友一起用餐或分摊账单时。这就是小费计算器可以拯救世界的地方! 什么是小费计算器? 小费计算器是一个简单、用户友好的工具,旨在消除小费的猜测。无论您是在餐厅、咖啡店,还是点外卖,我们的工具都可…

    2025年12月19日
    000
  • JUnit 测试:Java 单元测试综合指南

    JUnit 测试是一种广泛使用的 Java 测试框架,它通过提供强大的工具和功能来简化单元测试的过程。本文探讨什么是 JUnit、它为何重要以及如何在 Java 项目中有效地使用它。 什么是 JUnit? JUnit 是一个开源框架,专为用 Java 编写和运行可重复测试而设计。它确保各个代码单元(…

    2025年12月19日
    000
  • 使用 Vite 进行静态 React 应用部署

    使用 vite 构建的 react 应用程序以其速度和效率而闻名。将这些应用程序部署为静态网站可确保快速的性能和可扩展性。在本博客中,我们将引导您使用 vite 部署静态 react 应用,使用现代平台来简化流程。 vite是什么? vite是下一代前端工具框架,通过即时服务器启动和闪电般的热模块交…

    2025年12月19日
    000
  • 人工智能驱动的代码生成:彻底改变开发

    人工智能 (AI) 正在改变开发人员编写、调试和维护代码的方式。人工智能工具现在为开发人员提供智能代码建议、自动化测试和无缝集成,使软件开发比以往更快、更高效。在这篇博文中,我们将探讨人工智能代码、其功能、优势、挑战以及可用的最佳工具。 什么是AI代码? 人工智能代码是指由人工智能系统生成、优化或增…

    2025年12月19日
    000
  • 探索 Nodejs 性能提升和令人兴奋的新功能

    Web 开发世界在不断发展,而 Node.js 早于这个快速变化的领域。作为当今 Web 应用程序的核心技术之一,Node.js 随着每次新的更新而进步,Node.js 22 尤其引人注目,因为它带来了每个开发人员都渴望发现的许多强大的新功能和增强功能。这些更新为每个企业带来了突破性的功能,旨在实现…

    2025年12月19日
    000
  • EchoAPI for Cursor 入门指南:断言可视化技术

    在api开发中,使用脚本进行断言起着至关重要的作用;然而,它们的复杂性可能会成为学习的障碍,常常给开发人员带来令人沮丧的体验。具体来说,检查某些响应所需的代码通常很冗长且难以理解,这给新团队成员带来了陡峭的学习曲线。这种复杂性可能会导致开发速度变慢并给代码审查带来挑战。 EchoAPI 针对光标的创…

    2025年12月19日 好文分享
    000
  • 文本压缩和代码分割和现代图像格式 – 性能优化

    我尝试了以下方法来优化我的业余项目性能: 文本压缩代码分割现代图像格式. 分析器 我构建的应用程序使用了 vite 和 pnpm。现代 web 构建工具在构建过程中默认自动优化 web 性能。所以我们可以 pnpm run build 然后 pnpm dlxserve dist。然后使用 chrom…

    2025年12月19日
    000
  • 如何处理异步操作

    如何处理异步操作 在 typescript 中,我们有多种方法来处理异步操作:回调、promise 和 async/await。异步编程使我们能够管理可能需要时间的操作,例如从 api 获取数据,而不会阻塞其他代码的执行。 回调 回调是作为参数传递给另一个函数的函数,并在任务完成后执行。虽然回调适用…

    2025年12月19日
    000
  • 打印队列

    代码来临 2024 年第 5 天 第 1 部分 会有秩序! 这将会是一件很酷的事情。 我喜欢添加的警告,即不应考虑未包含在更新中的页面规则。 我对如何解决这个难题有一个模糊的想法。 但是我需要在这里制定我的策略以保持清晰并确保我准备好编写实际代码。 我希望跌跌撞撞地制定策略 这很有趣。我觉得我知道如…

    2025年12月19日
    000
  • 改变范式:从过早的重构和虚假的“可重用性”到适应性、可扩展性和可靠性

    在软件世界中,人们普遍痴迷于过早的重构以及对虚假可重用性的追求。开发人员(尤其是刚起步的开发人员)经常被教导“可重用性”是圣杯。但不惜一切代价追求可重用性往往会导致过度设计的解决方案,这些解决方案过于通用、过于僵化,并且与当前项目的具体需求相距甚远。事实上,它可能会导致我们通常所说的“抽象地狱”——…

    2025年12月19日
    000
  • 采用声明式数据访问来尊重您作为开发人员的智慧

    在软件开发的世界中,我们经常发现自己在两种范式之间左右为难:命令式和声明式。对于许多开发人员来说,命令式代码的吸引力在于它的简单性——只需逐步编写指令,您就可以确切地知道计算机在做什么。然而,随着复杂性的增加,这种循序渐进的方法变成了分散在代码库中的混乱的逻辑。相比之下,声明式方法旨在让您描述您想要…

    2025年12月19日
    000
  • MeetRoomly 是一款使用 Nextjs Prisma、Tailwind CSS 和 Clerk 轻松管理和预订会议室的应用程序

    见面会 使用 next.js 15、tailwind css、prisma 和 clerk 构建的 meetroomly 应用程序。功能包括用户注册、登录、添加房间、查看房间评论和预订。在开发过程中接受贡献。 入门 克隆存储库:git clone https://github.com/saidmou…

    2025年12月19日
    000
  • 4年前端开发必备技术

    前端开发市场发展迅速,带来了新的工具和实践,改变了创建 Web 应用程序的体验。对于开发人员来说,无论是初学者、全职人员,还是想要了解自己要寻找什么的招聘人员,了解当今不可或缺的技术至关重要。让我们探讨一下 2024 年市场真正发生变化的因素。 1. 现代 JavaScript:坚实的基础 无论你使…

    2025年12月19日
    000
  • React 初学者指南:了解组件

    介绍 嘿,这里是一位开发人员。因为 react 看起来很难而犹豫是否要开始?别担心,我已经帮你解决了。 react 是一个 javascript 库,它使构建用户界面 (ui) 变得更加容易,特别是当您的网站有大量动态内容时。它很强大,但就像任何新技术一样,一开始它可能会令人生畏。事情是这样的:一旦…

    2025年12月19日
    000
  • 在生产中避免控制台日志:稳健日志记录的最佳实践

    简介 日志记录对于调试和监控应用程序至关重要,但不正确的日志记录可能会导致性能问题、安全漏洞和混乱的输出。在本文中,我们将探讨为什么在生产中应避免使用 console.log,并使用示例提供最佳实践。 为什么在生产中应该避免使用 console.log? 性能开销-> 这在我的系统中花费了大约…

    2025年12月19日
    000
  • 使用 Vitest 进行单元测试:下一代测试框架

    为什么选择维泰斯特? vitest 的设计考虑了现代开发。这就是它脱颖而出的原因: 速度 vitest 以 vite 作为基础,利用其闪电般快速的热模块替换 (hmr) 和 esbuild 进行捆绑和转译。结果是: 智能即时监视模式:仅针对受影响的文件重新运行测试,从而实现即时反馈循环。开箱即用的 …

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信