前幾天已經成功串接 AI，也加入了載入提示。

不過，實際使用 API 時，不一定每次都能順利取得資料。可能是網路不穩定、API 金鑰設定錯誤，或 AI 服務暫時無法使用。

所以今天要加入錯誤處理。

一、為什麼需要錯誤處理？

如果沒有錯誤處理，當 API 請求失敗時，使用者可能只看到空白畫面，完全不知道發生什麼事情。

因此，我希望網站能在發生問題時，顯示容易理解的訊息。

二、修改 JavaScript

將推薦函式調整為：

async function recommendRecipe(ingredients) {
    loading.hidden = false;
    recipeResult.replaceChildren();

    try {
        const answer = await getAIRecipe(
            ingredients.join("、")
        );

        recipeResult.textContent = answer;

    } catch (error) {
        recipeResult.textContent =
            "目前無法取得食譜，請稍後再試一次。";

        console.error(error);

    } finally {
        loading.hidden = true;
    }
}

這裡使用：

• try：執行可能發生錯誤的程式。
• catch：發生錯誤時執行對應處理。
• finally：不論成功或失敗都會執行。

三、今天的成果

今天完成基本的錯誤處理，讓網站在 API 無法正常回應時，也能提供使用者明確的提示。

未來還可以針對不同錯誤狀況，設計更詳細的訊息。

接下來要開始加入更多使用者可以選擇的條件，讓推薦結果更符合個人需求！