了解 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 函數會解析 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 區塊中捕獲錯誤。

為什麼會發生這種情況？

與 Ax​​ios 不同，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 中 res.ok 的重要性的詳細內容。更多資訊請關注PHP中文網其他相關文章！