了解 Fetch API 中 resok 的重要性-js教程-PHP中文网

了解 Fetch API 中 resok 的重要性

碧海醫心

发布： 2024-12-10 19:06:28

转载

989人浏览过

了解 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 块中捕获错误。

为什么会发生这种情况？

Android中文帮助文档pdf版

Android 是一个专门针对移动设备的软件集，它包括一个操作系统，中间件和一些重要的应用程序。Beta版的 Android SDK 提供了在Android平台上使用JaVa语言进行Android应用开发必须的工具和API接口。特性  应用程序框架支持组件的重用与替换  Dalvik 虚拟机专为移动设备优化  集成的浏览器基于开源的WebKit 引擎  优化的图形库包括定制的2D图形库，3D图形库基于