了解 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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
您没有使用(但应该使用)的被低估的 NPM 软件包
上一篇 2025年12月19日 21:42:03
使用 Nextjs Tailwind CSS、Prisma 和 Clerk 构建的 MeetRoomly 应用程序
下一篇 2025年12月19日 21:42:17

相关推荐

发表回复

登录后才能评论
关注微信