fetch拿到404為什麼不進catch？先檢查Response.ok

替網站加上作品、商品或文章卡片時，fetch已經寫了catch，API回404卻沒進錯誤處理。這不一定是catch壞了：伺服器確實回了HTTP回應，fetch的Promise通常就會完成；回應內容是不是你要的，還要再判斷。

有收到回應，和成功拿到內容分開看

404或500是HTTP回應。fetch不會只因這些狀態就自動拒絕Promise；網路連線失敗等情況才會走拒絕路徑。先讀Response.ok，它在狀態碼200到299時為true。

async function loadCards() {
  const response = await fetch('/api/cards');
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return await response.json();
}

loadCards()
  .then(cards => renderCards(cards))
  .catch(() => showError('內容暫時無法載入，請稍後重試。'));

renderCards與showError要換成你網站真正的顯示函式。先檢查ok再讀JSON，才不會把錯誤回應當成正常卡片。即使狀態是200，JSON無法解析也可能失敗；資料能解析後，仍要確認欄位符合頁面需要。

讓訪客知道是載入失敗，不是沒有內容

網站可以分出載入中、正常空列表與失敗三種畫面。真正沒有文章時顯示「目前沒有內容」；API失敗則保留重試入口，別把它默默變成空白。訪客重新操作時，也要清掉上次的錯誤訊息。

重試不表示一定會成功。伺服器持續404時，重新請求仍會失敗；先查端點路徑與部署路由。若是登入或權限問題，也別一直自動重試，應依401、403等狀態安排適當提示。

先在自己的網站測兩種失敗

一種是端點回404，另一種是伺服器沒有可用連線。看看畫面是否都能結束載入狀態、保留主要內容與操作。範例只處理GET讀取；付款、送出資料等可能有副作用的請求，不能不分情況就重送。

參考資料

資料核對於2026年10月3日；範例與文件可能更新。