iT邦幫忙

2025 iThome 鐵人賽

DAY 21
0
Modern Web

AI × Web:生活魔法方程式系列 第 21

Day21.錯誤處理 & 體驗優化

  • 分享至 

  • xImage
  •  

「最後一天,讓工具更穩定。處理使用者輸入錯誤、API key 過期、網路斷線等情況,顯示友善提示,讓小工具從『能用』升級為『好用』!」

內容重點

  • 處理城市錯誤、API key 過期、網路斷線
  • 顯示友善提示(紅色文字、emoji、alert)
  • 最後整理小工具

程式說明

if (!city.trim()) {
  document.getElementById("result").innerText = "⚠️ 請輸入城市名稱";
  return;
}

try {
  // fetch ...
} catch (error) {
  document.getElementById("result").innerText = "❌ 系統錯誤,請稍後再試";
}

  • 後端也要回傳清楚錯誤:
if (data.cod !== 200) return res.json({ error: data.message || "找不到城市或 API 錯誤" });

解析:增加錯誤處理與提示,提升使用者體驗,完成一個真正可用的小工具


上一篇
Day20.前後端整合
下一篇
Day22.回顧
系列文
AI × Web:生活魔法方程式22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言