了解 Fetch API 中 res.ok 的重要性

我一直是使用 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` 函数会解析承诺，让您检查响应是否成功。

为了正确处理 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（服务器错误）将把 response.ok 设置为 false。

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

感谢您的阅读，希望本文能对大家有所帮助！

CLIS.CC

了解 Fetch API 中 res.ok 的重要性